Uploading a decal converts the color of all transparent pixels to black

Bug Description

When uploading an image to Roblox, Roblox replaces the colors of all fully transparent pixels (alpha = 0) with black (0, 0, 0, 0).

Black fully transparent pixels cause the edges of shapes to have a gray/black edge if the image is scaled in any way. This tool fixes this issue. Here’s the example screenshot from that post:

Pixelfix-1
(this image is a zoomed-in screenshot of Roblox)

This tool fixes this issue by setting all transparent pixels to match their surrounding non-transparent pixels’ colors. In this case, PixelFix makes the transparent pixels white (255, 255, 255, 0). Due to this bug, transparent pixels get set to (0, 0, 0, 0) on upload and developers are stuck with the “Without” behavior above i.e. there is no way to avoid gray/black edges at all anymore.

Repro

For this repro, I’m going to be using the following image (pre-fix):
PixelfixBrokeRepro
The image is 100x100 with a white square with 30px rounded edges and 10px of padding on all sides:

  1. Get an image with transparent pixels. Verify that all fully-transparent pixels are black and all not-fully-transparent pixels are not black. This can be done in an image editor such as gimp. Not all image editors properly show the color values of fully-transparent pixels, so if in doubt use gimp or write your own program to check the color values:
    • White non-transparent pixels: image
    • Black fully-transparent pixels: image
  2. Close the file then run it through PixelFix: image The following image has been ran through PixelFix and has white transparent pixels: PixelfixBrokeRepro
  3. Open in your image editor again and check the color of fully-transparent pixels:
    • White fully-transparent pixels: image
  4. Upload to Roblox
  5. Paste the decal URL into the Image property of a 200x200 ImageLabel. Observe the gray/black edges:
    image
  6. Paste the asset url into your browser and save it as a .png:image
  7. Open this file in your image editor and check the color of fully-transparent pixels:image
    Since we ran this image through PixelFix, its fully-transparent pixels should be white (255, 255, 255, 0). This was the behavior as of a few weeks ago. Since its fully-transparent pixels are not white, Roblox must be modifying it on upload.

For comparison, try using the Local File Importer Plugin and viewing the same image in a 200x200 ImageLabel:
image

Since the local file importer does not change the color of fully-transparent pixels, you cannot see gray edges. We can verify that the image is displaying properly by changing the background color:
image

More info

This bug happens on live/www. This bug happens to any image with fully-transparent pixels. This bug started happening within the last week or two, possibly within the last few days.

11 Likes

I am pretty sure this may not be a “bug bug” but just a consequence of bilinear interpolation. Maybe I’m wrong though.

Edit, here is the article for this problem.

1 Like

I’m aware that bilinear interpolation is what causes edges to turn gray. That is a non-bug that pixelfix solves. Pixelfix is a tool that I wrote and is mentioned in that article. I am well aware that bilinear interpolation causes this since I wrote a tool to fix it.

The solution to the bilinear interpolation problem is to set fully-transparent pixels to have the same color as nearby not-fully-transparent pixels. This is what both that article and pixelfix does. When the fully-transparent pixel colors are the same as their nearby non-transparent pixels, bilinear interpolation does not result in changes to pixel color at the edges in the output of scaled images.

This bug breaks both of these fixes. If you doubt me, please try them yourself, read my repro, and follow its steps before disagreeing.

The bug here is not that edges are gray/black. The bug here is that Roblox is changing images when we upload them. Specifically, Roblox is setting any pixel with alpha = 0 to (0, 0, 0, 0). If you use the fix in that article or pixelfix, both fixes will be “undone” on upload.

1 Like

I do believe it parks, but I just have a question: shouldn’t this be in #development-resources:community-tutorials or #development-resources:community-resources?

This is not a tutorial or resource. Pixelfix is a resource, and it is in the correct category.

This is a bug report. When you upload an image, Roblox changes the color of all fully transparent pixels to black. Roblox should not be changing the values of any pixels in uploaded images.

6 Likes