Ui proportions and placement

Hi there,
I am working on a game but I am encountering problems with the UIs. Whenever I use frames to assemble the UI, it gets squeezed depending on what screen you are playing on. To avoid this problem I designed the UI in paint .net and put it in roblox as an imagelabel. This still gets squeezed so I changed one of the properties so the image doesn’t “stretch” anymore. This works to keep the whole thing in proportions and it looks good, however, when I tried to put in some buttons these shifted as they did not remain in proportion like the image did. How can I solve this problem? It does not really matter for me what way I prefer to design the Ui, the end result is the same both with frames or designing in a different software.

TL:DR
How can I make sure that the uis of my game do not get squeezed when resizing because of different screens while the UIs dont shift (or something similar to achieve this goal)?

Image examples:
In this picture the output is disabled. Normal studio work size.
image

In the second picture the output is enabled so the hight of the screen decreased, resulting in this:
image

This UI was fully designed in paint but the numbers are textlabels and the V is a textbutton.

If I had to guess, it’s either they are using offset or they are not scaled correctly. See my comments below for alternatives though:

You should look into using UIAspectRatioConstraint and UISizeConstraint for this. I’m not sure whether you mean squeezed in terms of aspect ratio or size but both will help.

9-slicing is usually used because of this. Here’s a link to a post I replied to a while ago that has a good explanation of that.


Would recommend that you make it using Frames again like before instead of using paint .net. Hope this helps!

1 Like