Black outline appears when scaling images

Bug Reports Engine Bugs
#1

I uploaded these images at 1024x460 resolution, and now I am shrinking them down:

In original size, the yellow text with blue outline blends with the blue splash, but when decreased, a black outline appears.

Regular size:

fe8HlWp.png1050×483

I’ve been researching for hours, and I did find some possible solutions, but I didn’t manage to pull anything off.

This post explains why this happens:
http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html

6 Likes
Black fringing on transparent pixels
How do you get rid of fuzzy dark edges around ImageLabels?
How do I fix this fuzzy image outline?
Emoji Have Incorrect Alpha Blending
ImageColor3 Issue
#2

Probably because it’s being decreased a lot in size to appear at the resolution.

Upload the Words and background panel as one image and it should fix it.

If you didn’t notice, the decal behind also has an outline on it at the lower resolution.

#3

[quote] Probably because it’s being decreased a lot in size to appear at the resolution.

Upload the Words and background panel as one image and it should fix it.

If you didn’t notice, the decal behind also has an outline on it at the lower resolution. [/quote]

The black outline appears whenever the image has to be rescaled. It means that even by increasing it’s width / length by a single pixel, we get the outline.

And I need the images to be separate for animation purposes.

#4

So the moment it stops resizing the outline vanishes?

#5

Is this a ScreenGui with ImageLabels? Can you upload the .rbxm?

#6

Should be noted that this also happens when rotation is not 0 or 180.

#7

Pretty sure this is a common thing when scaling images with alpha edges. At least it’s been true for Roblox’s GUI images for as long as I can remember. I’d recommend keeping images the same size that you upload them.

#8

Yes.

#9

The Unity link is correct - this is a result of bilinear filtering of images that are not using premultiplied alpha. It can be solved by using premultiplied alpha (but not in Roblox, since Roblox does not support premultiplied alpha) or by flood-filling transparent regions with the correct color (this is what that link mentions - this should work in all engines).

If this does not work for you it’s likely that either the flood-filling does not work or the image editor does something bad with the alpha channel when saving the image…

#10

[quote] The Unity link is correct - this is a result of bilinear filtering of images that are not using premultiplied alpha. It can be solved by using premultiplied alpha (but not in Roblox, since Roblox does not support premultiplied alpha) or by flood-filling transparent regions with the correct color (this is what that link mentions - this should work in all engines).

If this does not work for you it’s likely that either the flood-filling does not work or the image editor does something bad with the alpha channel when saving the image… [/quote]

Any chance you guys could save the day :P?

#11

We could implement premultiplied alpha but this is at odds with some compressed formats that we use for internal content (i.e. particles etc.), so we’d need some way to tag images as being premult vs non-premult…

Fixing the image assets is not hard though. I can do it in ~1 minute in GIMP (attached). The problem is that website seems to break my image after uploading by reconverting it to PNG and saving color info…

#12

I’ll try to figure out why website breaks the images.

The steps I used to fix the above image were:

  1. Using XnView, do Image -> Remove alpha channel on the original image and verify that the background is black. For filtering to work without artefacts, the background should seamlessly blend with the visible data - i.e. be blue-ish (or whatever that color is… turquoise?)
  2. Open the image in GIMP, add an Alpha mask (http://stackoverflow.com/questions/8058492/edit-only-alpha-layer-in-gimp) to the Layer - when doing it, pick “Initialize Layer Mask to” “Layer’s alpha channel”
  3. Switch to editing just the color by clicking on color thumbnail
  4. Use Color Picker tool to choose the turquoise from background
  5. Use Paint Bucket tool and click somewhere in transparent region. The visible image in canvas does not change but you can see the thumbnail in Layers view to change
  6. Export as PNG, make sure to check “Save color values from transparent pixels”
  7. Using XnView, verify that after removing the alpha channel the color channel does not have a black background

This image works locally (can use rbxasset:// to load it in Studio and test). Website breaks it upon upload.

#13

Ah, great, this forum also breaks the images! Re-attached as zip.

#14

Can we expect a fix in the near future?
If yes, approximately when?

#15

Currently I’m testing the killstreak animations, so you can check how the black outline bug looks like on this place:

Just see how it ruins the look.

#16

Good news everyone!

This has been fixed!

Enjoy resizing decals without fear of artifacts!

Note: You’ll need to reupload your decals for this to take effect.

#17

[quote] Good news everyone!

This has been fixed!

Enjoy resizing decals without fear of artifacts!

Note: You’ll need to reupload your decals for this to take effect. [/quote]

(Sorry to bring up such an old thread).
Black outlines still appear [size=2]at least on bigger images (1000*1000)[/size].

1 Like
#18

There’s an issue relating to the fix for this and it’s currently disabled :frowning:

I’ll let you know when we get this out for real.

(sorry for the late reply)

1 Like
#19

Bumping this thread again, as it seems like this issue is still a thing. What’s the status on the fix fix?

OiCmNKv.png976×552

3 Likes
#20

We’re still tracking down all the places that this caused some minor problems. The good news is that we’re pretty sure we know about all of them and we’re just about finished cleaning everything up.

I know this is frustrating to have it fixed and then disabled almost immediately. Thanks for being patient with us.

I’ll post in this thread once it’s re-enabled.