White borders appearing around objects in decals, even when anti-aliasing is off

Bug Reports Website Bugs
#1

Example 1:
The original file:
Circle
On the website:

In Game:

Note the white border that appears in game. There is no anti-aliasing in the original image, it is simply a pure black circle with a transparent background

Example 2:
The Original File:

On The Website:

In Game:

1105Ă—153 72.9 KB

In this case it seems the anti-aliasing, which is semi-transparent black in the original image, becomes simply shades of grey/white once uploaded to the website (not immediately obvious due to the default white background) creating ugly white outlines around text uploaded to the website.

12 Likes
#2

Theres a setting in PS that makes the nearby transparent pixels the same color as non transparent pictures. It solves this problem.

#3

[Probably dumb question alert] What’s PS?

#4

Photoshop. If you don’t have the money to shell out for it, Paint.NET or GIMP may have equivalent functionality.

#5

Thanks Echo!
@ScriptOn I’ve been using paint.net, I turned anti-aliasing off so there are no semi-transparent pixels in image 1, ONLY 0,0,0 black pixels or fully transparent ones, and yet a white border still appears.

1 Like
#6

I think it has to do with ROBLOX’s upscaling/downscaling. You should use a 256x256 resolution when uploading decals.

#7

In PS when I toggle sRGB export the problem fixes itself. Not sure why.

2 Likes
#8

Yes, but are the transparent pixels actually colored 0,0,0?

1 Like
#9

TopSiz.jpg548Ă—579 6.39 KB

#10

http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html

I’m not even sure this is possible to fix in PDN. If it overwrites transparent pixels on export then you could maybe find or make your own slightly different png file type that doesn’t overwrite them, but if it actively overwrites them then it’s impossible. At best you could paint padding at opacity 1.

1 Like
#11

Just because the alpha channel is set to 1 does not mean the RGB values of the pixels becomes irrelevant.

Get the Alpha Channel plugin, if you don’t already have it, and create the appropriate mask out of black and white pixels, then apply that mask to a completely black image and see if that affects things.

1 Like
#12

As mentioned in @gkku’s link, the down/up scaling is the problem, if the UI element is resized to exactly the same size as the original image the white border disappears. Will have to get a plugin to change PDN defaulting transparent pixels to 255,255,255

#13

Temporary workaround is to set the background as 0,0,0 with an alpha of 1 to stop Pdn from defaulting it back to 255, not sure what the performance impact of this would be though.

#14

This is because when you render the image at original resolution it does not need to use nearby pixels to approximate anything.

#15

I looked into it a bit and you could also use GIMP:

  1. Open your image in GIMP
  2. In the channel list, duplicate the Alpha channel
  3. Create a new layer under the original image. Paint your padding in this layer (if the original image is a solid color, just fill it with that color). Flatten when you’re done
  4. Add a layer mask using the duplicated alpha channel (right click layer > Add Layer Mask > select “Channel”)
  5. Export as PNG and make sure “Save color values from transparent pixels” is enabled

If GIMP has a filter like Solidify B from my earlier link or a way to use Photoshop plugins, ignore step 3 and use that on the original image instead.

5 Likes