Fixing images in Roblox UI

I recently ran once again into an old Roblox development issue. I was working on some icons for a UI overhaul, but they looked really bad on Roblox. There were weird fuzzy outlines on them, and they weren’t very sharp.

This article is going to look how you can fix bad looking outlines in image icons and make your icons look sharp.

Before vs. after

Why it happens

When you upload an image to Roblox and stick it in your game you sometimes see a black or white outline around your image when it scales. This is due to bilinear interpolation. This has been an issue on Roblox for a long time.

When Roblox scales images it samples the pixels and blends the red, green, and blue. In images with transparent backgrounds like the pill below, we can see the outside of the image is transparent. However, the actual pixels in the image are black, with a transparency of 1.

Inspecting transparent pixels leads to a black background

As you can imagine, this is quite bad. We anticipate that this image won’t scale well on Roblox. In fact, when we upload the image to Roblox, Roblox shows the background as black. The pink areas are the transparent white areas.

The pink are transparent areas, the black part is also transparent, but colored as black, not white.

If we insert it into Roblox, we can see the outline if we put the pill in a Gui. It looks ok, but it’ll get worse on detailed images.

The outline here isn’t too bad, but it gets much worse on more detailed images.

Using Gimp to fix images

We can use Gimp to fix these images. There’s a plugin for Gimp that will transform a transparent image to bleed outwards in the transparent pixels. Go ahead and download this script and install it into Gimp. On windows, this goes into C:\Program Files\GIMP 2\share\gimp\2.0\scripts.

What this plugin does is it takes a transparent image and blur out the edges so you can take badly cropped images and make them look fine. In this case, it will also help with the bilinear scaling that Roblox is using.

The image will look mostly the same, but transparent pixels will render correctly when scaled by Roblox

If we apply the same effect to our pill, we can see that when we inspect pixels, now there are only white images.

Applying the effect

Make sure to export the result back to a .png. When we upload it, we see that Roblox has helpfully highlighted the whole image as pink.

We want pink everywhere, it means it’s a all white transparent alpha

When we check out the pill in our test place, we see it fixed it!

The new pill scales fine, without artifacts

You can see the new pill looks great, and doesn’t have the same weird outlines as before.

Using photoshop

You can use photoshop to do the same thing. The plugin we’re looking for Flaming’s Solidify and it’s free.

The icons look much cleaner

Using pixelfix

After this article was released, Roblox developer “Corecii” released an opensource node.js program to automate this process. The source code can be found on Github. You can use this as a command line argument on Windows, Mac, or Linux.

./pixelfix.exe my_image.png

Additionally you can drag your files to the executable, and it will run. You can read more about this process on the Roblox DevForum.

Previously this article stated that pixelfix had poor output in certain cases. However, further research shows this was just my misunderstanding.

Using Alpha Bleed by XAXA

An alternative is to use this JavaScript applet made by XAXA to bleed your images online.

https://js.do/rootmars/alpha_bleed_js

Crispier images

You can still see the icons look a bit blurry. If you know what size your image is going to be you can make the image look even crispier. These icons are 25x25, so I uploaded images at 50x50 pixels. This is because Roblox UDim (universal dimension) of 1 is actually considered 2 pixels on retina displays.

Here’s the stats icon I made.

Unfortunately, Roblox doesn’t support svg images directly, so I have to export to .png. I was very careful to keep everything aligned to a 25x25 grid, so it exports clean and looks good, even when scaled. You can’t do this with every image, but it definitely helps.

This is going to be the hardest technique to apply. You can’t just scale your regular UI elements in an image editor because you’ll end up with the same fuzzyness. Furthermore, some responsive UIs demand that elements be scaled.

Much sharper looking icons at the top

Even the badge icon looks better, even though it has aliasing. You can compare the results below.

I’m satisfied with how the icons turned out!

Hopefully these techniques can help you make a sharper UI on Roblox.