Black outline appears when scaling images

loleris · September 29, 2014, 12:45am

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:

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:

Ripull · September 29, 2014, 12:47am

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.

loleris · September 29, 2014, 12:59am

[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.

Ripull · September 29, 2014, 1:00am

So the moment it stops resizing the outline vanishes?

MerelyDupe · September 29, 2014, 4:18am

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

Sharksie · September 29, 2014, 4:24am

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

sleitnick · September 29, 2014, 4:55am

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.

loleris · September 29, 2014, 8:20pm

Yes.
https://www.dropbox.com/s/bl3zvcpswivp8ms/BilinearBug.rbxm?dl=0

zeuxcg · September 29, 2014, 8:50pm

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…

loleris · September 29, 2014, 8:53pm

[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?

zeuxcg · September 29, 2014, 9:21pm

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…

zeuxcg · September 29, 2014, 9:27pm

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

The steps I used to fix the above image were:

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?)
Open the image in GIMP, add an Alpha mask (image - Edit only alpha layer in GIMP - Stack Overflow) to the Layer - when doing it, pick “Initialize Layer Mask to” “Layer’s alpha channel”
Switch to editing just the color by clicking on color thumbnail
Use Color Picker tool to choose the turquoise from background
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
Export as PNG, make sure to check “Save color values from transparent pixels”
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.

zeuxcg · September 29, 2014, 9:30pm

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

loleris · September 29, 2014, 10:35pm

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

loleris · September 30, 2014, 8:41pm

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.

thorisviking · June 9, 2015, 5:22pm

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.

Trioxide · June 16, 2015, 7:50pm

[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].

thorisviking · July 9, 2015, 8:34pm

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

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

(sorry for the late reply)

Wsly · August 16, 2015, 8:32pm

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

thorisviking · August 17, 2015, 4:41pm

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.