Issue with rotated GUI scaling and positioning

I put something together with rotated frames, meant to be an arrow facing up, but it’s turned out horribly scaled:

image

And in-game it looks like this:

image

My position and size UDim’s for the individual segments of the arrow are as follows:

Position: {0.5, 1}, {0.5, 0}
Size: {0.5, 0}, {0, 2}

I have tried changing it from offset (2nd number in the set) to scale (1st), but this didn’t fix the issue. In studio, it says the size is 6x2 pixels, but it clearly doesn’t display as such.

I can make it an image if absolutely necessary, but I would rather not add another asset to load if possible.

The best solution for this is just to not use rotational values for frames, and instead resort to images. There’s no real reason to use the Rotate property on GuiObjects over images. Additionally, they’re a lot easier to use and cheaper on performance.

The problem with images is that they’re really blurry unless I upload it in a huge size like 512x512, but that’s just ridiculous for such a small UI element like this.

300x300 would probably be about fine. Besides, 512x512 isn’t exactly huge by today’s standards. More so, rotating frames actually decreases the quality of them and overall just makes it a lot worse than images.

Besides that, they’re really easy to handle when it comes to properties like Size and Position, because it’ll always look the same no matter what size (as long as the image is set to Fit in the frame and not Stretch)

Scaling it to 256x256 showed no improvement in the blurriness. This just seems to be the case for anything small, as increasing the GUI’s size gets rid of the blurriness.

Can you share what you are scaling to prevent confusion? If it’s the image, then you can always try 512x512, which again, isn’t as big as you think it is according to today’s standards.

I managed to actually get it to look decently good:
image

It’s a bit blurry, but I don’t think there’s much I can do about that, as Roblox doesn’t give developers the option of having Nearest Neighbour interpolation.

1 Like

If you’re using a device emulator to view the UI then that might be why it’s appearing blurry. Like you said there’s not a lot to to do about how Roblox renders images but I’m glad you’re satisfied with the result.