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:
(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.
For this repro, I’m going to be using the following image (pre-fix):
The image is 100x100 with a white square with 30px rounded edges and 10px of padding on all sides:
- 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:
- Black fully-transparent pixels:
- Close the file then run it through PixelFix: The following image has been ran through PixelFix and has white transparent pixels:
- Open in your image editor again and check the color of fully-transparent pixels:
- White fully-transparent pixels:
- Upload to Roblox
- Paste the decal URL into the Image property of a 200x200 ImageLabel. Observe the gray/black edges:
- Paste the asset url into your browser and save it as a
- Open this file in your image editor and check the color of fully-transparent pixels:
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:
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:
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.