Pixelfix: Remove the black edges on scaled images

[anthlons (tatemcraefan45)]

Works flawlessly! I’ve always hated making images for my UI as of how ugly they are in roblox. Thanks! (Bumped ;3)

[pobammer (HowManySmall)]

Seems like it has broken. Kinda bummed out by this.

Got it, it doesn’t like that file name.

[ZacBytes (Zachary)]

Yep, it stopped working for me as well.

[pobammer (HowManySmall)]

I have a fixed one, I’ll upload it shortly.

here it is

[Corecii]

Pixelfix itself is not broken. @howmanysmaII @ZacBytes

See here, comparing images before- and after-uploading:

You can see that pre-upload there are no black edges because the image blends into the background color perfectly. Only after uploading the image does this change.

On upload, Roblox is now making fully transparent pixels black.This was an issue two months ago, too, but it was quickly resolved. See here:

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-tr…

This particular issue can only be solved on Roblox’s end.

[ADbros]

Thank you for this! This is the only method I could find to fix this problem and it works perfectly!

[ZacBytes (Zachary)]

I’m having issues with the executable on MacOS, I built it by myself since the original exec wasn’t working but now it doesn’t respond. Is there a web-based version where I can upload to a site and it does it for me or maybe a web api?

[Shedletsky]

Why hasn’t Roblox fixed this yet +1

Not sure I buy the performance argument from Quenty. Isn’t this just a different blend_func? Or in the modern rendering pipeline maybe it is a line or two of shader code?

Quenty wrote a detailed manifesto on why this is terrible and how hacking around it is hard - Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium

[Corecii]

If you want to help fix this problem, please provide your OS version and any output from pixelfix. Try running pixelfix through the terminal. Try installing Node js and see if node work on its own, then see if pixelfix works through node.

I don’t have a Mac of any sort so I can’t test this myself.

---

Instead of pixelfix, you can use tools like the one posted here:

Fixing images in Roblox ui (black outlines)

I wrote a javascript app that automates this process. It uses the same algorithm as the alpha-bleeding program I posted a while back, but is more accessible since you don’t have compile it yourself. Most importantly, you can run it entirely from your browser! You can access it at http://js.do/rootmars/alpha_bleed_js (right side of the page) or https://pastebin.com/raw/81QpWtsv (save this as an .html and run it in your web browser) How to run: Open the page. Click choose file and select th…

You can also search “alpha bleed” and see if you can find any similar tools on e.g. Google or GitHub.

[Shedletsky]

I ran into this issue today and it’s driving me insane.

Roblox just needs to fix their image interpolation algo.

[ZacBytes (Zachary)]

Thanks! Found this web based version from XAXA Fixing images in Roblox ui (black outlines) - #13 by XAXA

[NinjoOnline]

My computer won’t let me run the shortcut…

[Corecii]

Press “More Info” then press “Run Anyway”

[Kaiits (KAIIT)]

My brain is really having a hard time wrapping its head around how to install pixelfix. do you have a video showing how to install and set it up? thanks!

[Corecii]

I don’t have a video, sorry.

If you’re on windows:

1. Go to this link
2. Download this
   
3. DO NOT RUN IT OR OPEN IT
4. Open your Downloads folder. Right click pixelfix-win-x64, then click “Copy”.
5. Minimize all of your windows. Right click on your desktop, the click “Paste”.
6. It’s now “installed”!

To use Pixelfix:

1. Drag images onto the pixelfix-win-x64 icon on your desktop
2. It will open a window to tell you that your image is fixed
3. You can close that window and upload your fixed images to Roblox now!

[Kaiits (KAIIT)]

Thanks, but when i put an image in there, its stuck like this.

Any solutions?

[Corecii]

I’m not sure why it would do this. Occasionally it can take a few seconds to start up, so that could be all it is.

---

If you can’t get Pixelfix to work, there are other alternatives in this thread that work through your web browser.

Fixing images in Roblox ui (black outlines)

I wrote a javascript app that automates this process. It uses the same algorithm as the alpha-bleeding program I posted a while back, but is more accessible since you don’t have compile it yourself. Most importantly, you can run it entirely from your browser! You can access it at http://js.do/rootmars/alpha_bleed_js (right side of the page) or https://pastebin.com/raw/81QpWtsv (save this as an .html and run it in your web browser) How to run: Open the page. Click choose file and select th…

[nezuo]

If you are using pixelfix on a large image it might take a while to finish, just wait a bit and see if it works!

[OnlyRoids (OnlyStephen)]

I have the same issue as @Nezuo . The javascript one you linked still results in black outlines too.

[Cuxle]

The same issue occurred for me, waited a bit and it worked