As a Roblox developer, it is currently too hard to make images that scale well.
When Roblox scales images, it considers the color of transparent pixels when it calculates the color of each pixel in the resized image. This means that if your completely transparent background happens to be black, it will give your image black edges. This is true of any color.
(The first one has black transparent pixels, the second one has white transparent pixels, the third has red transparent pixels)
The only way to fix this at the moment is to bring the image into a program that lets you edit transparent pixels before upload. I’m not aware of many of those, or at least most don’t make it very clear. Some programs even set the pixel color to black if they’re transparent. I’ve had to write a small program to change each transparent pixel to white + transparent.
If Roblox ignored the color of transparent pixels then this would not be an issue.
If Roblox is able to address my issue, it would make it easier for me to add high quality image assets to my games.
Edit: the image above was taken from this place, if you want to check it out yourself in studio.
Yes, due to the way in which the colors are interpolated. If you interpolate between i.e. an opaque white pixel and a red transparent pixel, then you get a mix of both the colors and the transparency level, so you end up with something reddish at the borders.
I don’t know a whole lot about rendering, so I just did a google search, and according to this result, the solution is premultiplied alpha.
An alternative to doing this sort of thing in-engine is to automatically “bleed” colors on upload, which I think Roblox actually did at one point! I remember a point in time where this would be fixed for new uploads, but it caused problems and they had to turn it off, if I recall correctly.
This has been a pain for years. The only ways I knew to avoid this were make the image have a solid background or display it in the original size. I will have to figure out how to make the transparent pixels white because that would be a life saver!
For the longest time, I thought the only way to make images look good on a screen, in or outside of Roblox Studio, was to keep the exact pixel by pixel proportions in tact and never downscale. Thus I painstakingly uploaded all my assets in all the different resolutions necessary and only used them in those exact dimensions. It was only a few years ago that it dawned on me that UIs downscaled perfectly fine in the browser, Photoshop, and Android Studio, without strange black borders. And that the problem was uniquely Roblox’s.
I really hope Roblox does something to fix this issue because UIs could look so much crisper and more professional if it was. Especially for mobile, where downscaling from PC resolutions is quite common.
This has been a uniquely Roblox problem for as long as I can remember. Also apparent on decals used in the world. Anything involving transparency in roblox has always been ugly
I found a way to “fix” this, just add a layer to your image that is like a tiny tiny bit nontransparent. you cant see it in-game because of how subtle it is and the artifacting is fully fixed.
