Pixelfix: Remove the black edges on scaled images

[Corecii]

Pixelfix

Pixelfix changes the color of transparent pixels to match the color of the nearest non-transparent pixel. Transparent pixels stay transparent, but when resized and blended with non-transparent pixels they won’t cause dark borders.

How it works

Here are screenshots of images in Roblox that have been scaled down, showing with/without Pixelfix and with/without transparency:

Since the transparent pixels are no longer black, they no longer make edges of the image black when resized.

How to use

The ideal way to use Pixelfix is to make an executable file and either drag images to it or use the “Send To” functionality of Windows.

You can grab pre-built executable files from the Github for Pixelfix.

Alternatively, you can build your own by...

1. Downloading Node JS
2. Downloading the git repo
3. Running npm install in the repo directory
4. Installing pkg using npm install -g pkg
5. Running pkg with pkg -o pixelfix -t node10-win-x64,node10-win-x86,node10-macos-x64,node10-linux-x64 .\index.js

Once you have a pixelfix executable, you can drag images onto it to fix them. The fixed images are saved over the existing images.

You can also add a shortcut to your Send To menu:

Instructions for Send To menu

1. Open shell:sendto in the File Explorer
   
   
2. This will open up the Send To directory, where you can place a shortcut to pixelfix
   
   

Side notes

I wrote this in Node JS because it was super easy and I used this technique in a previous project. Something written in a more lightweight, low level language like Rust would be ideal, but would also take more time. Anyone is free to take up the idea and rewrite it if you don’t like Node!

You don’t have to package Pixelfix up as an exe to use it. You can use it from the shell with node, but it’s not near as convenient.

Related threads

Here’s a fix by Quenty, but it requires multiple steps per image through Gimp or Photoshop.

You can find a ton of threads about it at this search, such as this thread I made:

When scaling images, do not use colors from completely transparent pixels

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. [image] (The first one has black transparent pixels, the second one has white transparent pixels, the third has red transparent pixels) T…

[younite]

Thank you for this! I feel that this would be very helpful to other users who encounter this problem!

[EmeraldSlash (Rio)]

This is great, thank you! Didn’t realise what I didn’t have until I have it

[CheetahSp33d (CheetahSpeed)]

Awesome!

[SirMing]

How do I drag the image to execute file on Mac? Don’t think it works like in Windows

[Corecii]

I haven’t tested this on Mac. Pixelfix should work on Mac though, since Node JS and the exe packager work for Mac. If it doesn’t work then the source is available for you to fix it up; I don’t have a mac to test this on.

Assuming the steps needed to run it are the same as on Linux, you need to:

1. Make it executable. You can probably find this in the file properties for pixelfix-macos-x64.
   • If that doesn’t work, you can try running chmod a+x path/to/pixelfix-macos-x64 in the terminal.
   • You might need to add .command to the end of the file name. Google make file executable mac for help.
2. Try dragging a file to pixelfix-macos-x64
   • If that does not work, then open a terminal and try path/to/pixelfix-macos-x64 path/to/image.png . Google using the terminal on mac for help.
   • If the terminal works and you want to be able to drag files to PixelFix, then check out answers from this Google search for mac drag file to executable file. A lot of people are suggesting using Automator to do this.

In other words, make it executable then run it with your image file as the first argument. On Windows, exe files are executable by default and dragging onto an exe file is a shortcut for running it with the file as the first argument.

[Greeny_Alien (Greeny)]

I’ve been having problems with black or white pixels around transparent images for ages and the other solutions just don’t seem convenient. Thanks for the easy way to fix them.

[Validark]

Agreed. I wrote this guide not too long ago for a relatively quicker way but ideally one does not have to interact with GIMP or any other editing program to do something so simple.

[Quenty]

Hi, here’s a comparison of results on my tutorial vs. PixelFix. Both do the job, but PixelFix seems to lose details in certain operations.

Update my article too.

Fixing images in Roblox UI

[Quenty]

Note I think this could probably be fixed with some contributions to the project that’s open source.

[Corecii]

Do you have these images or other differing images I could examine?

I noticed in the article that the blending the gimp plugin does causes edges to fade to black, rather than filling all transparent space with color. In some situations, this could cause the edges to darken more than they would with PixelFix. This is still better than turning black at the edges, and in some cases darkening at the edges might be desirable.

While this is what I hypothesize is happening, running an image through the gimp plugin produces images with color in all transparent areas i.e. no fade-to-black. This is equivalent to what PixelFix does, so there should be no difference between the two.

I would be interested in checking out the images in the comparison gif. I’d like to see:

1. Do gimp-fixed images darken at the edges?
2. If not, how do the pixels in gimp-fixed images differ?
3. If they don’t differ, then are the images saved with different png qualities/settings? It’s possible that jimp (the image manipulation library PixelFix uses) might be saving images in a suboptimal format.

[Quenty]

The GIMP plugin preserves alpha better, perhaps at a cost of color accuracy.

Since I’m running on a white image (for UI) color accuracy isn’t a primary concern.

Now that you mention this, I think this is just a tradeoff between alpha accuracy and color accuracy. Presumably we can get both, making pixelfix better than GIMP.

Here’s the icon I used:

Edit: I have the SVG file if you want, I can pass it to you privately.
Edit: The images definitely differ pixel-to-pixel. The GIMP images do not darken the edges on the pure-white assets I’m using. It will on more colorful assets.

[Corecii]

Thanks for the icon! I’ll test it out.

---

@Quenty

The images definitely differ pixel-to-pixel. The GIMP images do not darken the edges on the pure-white assets I’m using. It will on more colorful assets.

On colorful assets, the GIMP and PixelFix images will definitely differ. The GIMP plugin blurs the edges between colors, while PixelFix does not:

Raw images

base:

gimp:

pixelfix:

While this will cause some differences for colored images, it’s not what’s going on here, since both images are all-white. Whether the blurred image looks better is something that I should look into.

It’s worth noting that this image might be outdated, since the gimp plugin does appear to fill color out to the edges, which this image does not show:

---

Here is the icon from gimp and pixelfix:

I’m actually not able to repro this difference. Here is a place file: NoRepro.rbxl (17.8 KB)

Here’s a messy snippet you can run in the command bar to see the difference in the compare model in Workspace for 15 seconds, alternating every half second:

local c = workspace.compare for i = 1, 30 do print(i%2 == 0 and 'gimp' or 'pixelfix') for _, d in next, c:GetDescendants() do if d.Name == 'gimp' then d.Transparency = i%2 == 0 and 0 or 1 elseif d.Name == 'pixelfix' then d.Transparency = i%2 == 0 and 1 or 0 end end wait(0.5) end

This includes the base icon prior to gimp or pixelfix processing at the top:

You can also toggle the pixelfix gui inside the gimp gui on and off to check for overlapping differences there too. I’m not able to see any differences between pixelfix and gimp. I’ve checked to make sure my gimp plugin is up to date, and I’ve re-uploaded both the gimp and pixelfix images to make sure that I didn’t misclick.

I’ve also checked their png data and they do have different data, but their pixel output is the same. The gimp image has additional data like time, dpi, and background color. Both have chosen different compression parameters but come out to the same image – I’ve checked that in gimp as well.

---

I’m not sure why I’m not able to repro this. Are you sure none of the lighting settings changed between the screenshots that you took? Everything looks a bit more “flat” in the Pixelfix screenshot, but that might be because it’s a gif:

vs

I’m not sure if the gif is an accurate representation of the difference that you saw. It would be nice to look at the original screenshots, not gif-ified.

It’s possible that this difference is caused by how gimp or jimp works on different computers, or it could be caused by a difference in how our computers render images. It would be nice to see if you still see a difference between the two icons I posted above. It would also be nice to see if I can see any difference between the two icons that you took those screenshots with.

I’ve already tested the two FireIcon decals in your decals, but I had no way of knowing if those were the ones that you took those screenshots with. I could not see any difference between them.

[Quenty]

I was thinking about this issue more, and I realized I made a mistake.

I apologize. I really messed this up. The different is caused entirely by the decals overlapping. I’m a fool. -_-

Sorry about this! I’ve updated my article.

[sleitnick]

But why hasn’t Roblox fixed this yet?

[Quenty]

It’s a performance thing. You’ll see it in unity and other engines too.

I think preferably Roblox would allow SVGs to be uploaded. However, other solutions include fixing things on upload.

However, this does change image composition so it’s not something always desirable, although in 99% of cases it is. I think Roblox could definitely offer to modify images upon upload, or provide it as an option.

[spliceosome (Shardwielder)]

I’m having some trouble getting this to run on Mac, when passing a correct pathname. It doesn’t seem to modify the image. I can verify the pathname argument is being received because it gives me a Not a directory error when it’s wrong

The image is a png

Any ideas?

Output: Killed: 9

[Corecii]

Could you post a screenshot of the terminal window where you tried to run Pixelfix? It might contain more information that can help solve your issue.

Pixelfix itself shouldn’t put out Not a directory or Killed: 9, but one of its dependencies or the packaged version of node might. The terminal window might contain information about what put out those errors.

[spliceosome (Shardwielder)]

Nevermind, I think i was doing something weird

Anyway, I don’t know why but I think the pathname argument isn’t being recognised;

Terminal: sudo bash /untitled/pixelfix-macos-x64.command /untitled/settings.png

Script: on: No such file or directory

Script done, output file is started

Maybe I’m doing something wrong and it’s on my end? All of the file path are correct

[spliceosome (Shardwielder)]

Turns out I was running pixelfix as a shell script, not a Unix executable, and then you can just do:

/untitled/pixelfix-macos-x64 /untitled/settings.png

And it’ll work perfectly

Well this was a Terminal-learning experience, I’m a Windows person and switched to Mac recently so I’ll blame it on that (lol)

Thanks for the help