Pixelfix: Remove the black edges on scaled images

Resources Community Resources
#4

Awesome!

4 Likes
#5

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

3 Likes
#6

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.
  2. Try dragging a file to pixelfix-macos-x64

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.

8 Likes
#7

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.

2 Likes
#8

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.

3 Likes
#9

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.

PixelFixVsGimp

Update my article too.

12 Likes
Odd dark pixel only appearing against certain colours in game
#10

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

1 Like
#11

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.
1 Like
#12

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:

FireIcon_50x50_Raw

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.

2 Likes
#13

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

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

Raw images

base:

base
base2000×2000 3.86 MB

gimp:
gimp
gimp1414×1414 1.9 MB

pixelfix:
pixelfix
pixelfix2000×2000 3.98 MB

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:

image
image1203×466 279 KB

Here is the icon from gimp and pixelfix:
gimp 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:

RobloxStudioBeta_2019-02-04_14-15-37
RobloxStudioBeta_2019-02-04_14-15-37993×631 306 KB

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:
image
vs
image

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.

8 Likes
#14

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.

5 Likes
#15

But why hasn’t Roblox fixed this yet?

5 Likes
#16

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.

3 Likes
#17

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

#18

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.

1 Like
#19

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

#20

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 :smiley:

2 Likes
#21

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

#22

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

image
image2003×77 7.22 KB

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

2 Likes
#23

Yep, it stopped working for me as well. :sob:

Uploading a decal converts the color of all transparent pixels to black