ImageLabel scaling with transparent backgrounds

rolbloxguy1876 · October 20, 2019, 7:21am

Hello,

I have a question about how to go about properly scaling ImageLabels across different screensizes, specifically imagelabels with images that have transparent backgrounds.

I’m trying to create a horizontal scrollingframe list with square buttons. I need this to scale perfectly across all screensizes, so I am using scale for everything, and used AspectRatioConstraints on the buttons. Here’s what I’m talking about:

Picture

That’s all fine and well. It scales across every screensize and aspect ratio while retaining the square buttons and the proportions of everything. My problem is that the images get a weird border around them, when that border is not present in the raw file. I’ve done some searching and I’ve figured out that it happens when the image is not sized at it’s native resolution. And that’s the problem - the image is almost never going to be at it’s native resolution because I’m using scale here. Here’s what I mean:

Example

In this image, you can see that there is not a green border around the vehicle. This is reflective of the raw file. This image is at 497x440 pixels in Studio, which is it’s native resolution. (Yes, there is a little green border at the top but that’s just because of the sloppy job I did at removing the background. Even if I remove the background perfectly, what I describe next still happens.

Here, even though it may be hard to see, there is a visible green border around the vehicle. Now, it’s at 120x124 in Studio, which is not it’s native resolution.

Anyone know a way to get around this or should I just use offset for this particular UI element?

Humanagon · October 24, 2019, 2:54pm

Well… I’m not an expert, but I would try using the first integer in the UDim2 value instead of the second one for all the sub frames and buttons since it’s based on percent of the parent frame/gui’s size instead of pixels (EXAMPLE: UDim2.new(0.5, 0, 0.5, 0) instead of UDim2.new(0, 50, 0, 25)), that way, if the gui is on another device, you can make a script that detects the screensize, and changes the size of the main frame to fit the screen size, and because you used the first integer for the sub frames, it will auto fit everything inside the main frame along with it. Try it out and see if that words. TIP: To quickly convert it from pixels to percents, just use studio’s built in gui editor that appears when you select a gui in the starter gui.

rolbloxguy1876 · October 24, 2019, 8:39pm

I should’ve clarified.

I’m perfectly aware of the difference between scale and offset. I’ve been designing UI for years. The problem here is that Roblox uses bilinear interpolation to scale images, which creates an undesirable outline around images that aren’t at their native size. Even if the background is transparent, Roblox blends the pixels in the background and creates the black outline around images.

To be clear, I’ve already fixed my problem by using a program someone else on this forum made to blend pixels around the border as a sort of cheat to get around the problem.