How do I make the UI multi-platform friendly and prevent the scaling issue?

Ignore how noob I am with UIs

So I’ve got an issue with the fact how the UIs act like. My text stays in it’s position and but my "scoreboard does not. There pictures explains what I mean.



How do I fix this?

Can you show a screenshot of the size and position of the menu in the properties window?

image

That’s likely your problem;

Your menu uses Offset instead of Scale.

I’d reccomend changing the values to be something like (0.4,0,0.25,0) or something else for the background, so that way it’ll scale properly to other devices.

You should also set the Position to (0.5,0,-0.1,0) and set the AnchorPoint to 0.5,0

edit: A bit of an explanation as why this is happening:

The first number in the Position and Size is Scale. This is best for whenever you want UI to scale or position properly among all devices. The second number is Offset, which is a pixel value, which will NOT change across devices.

2 Likes

Uh… Where do I change what?

In the properties window.

Yes, but what under the properties window?

image

Still a bit confused (I’m a bit new to Uis), could you possibly PM me a step-by-step guide on what to do?

Is it alright if I do it when I get home? I’m not at a computer right now.

Fixed the issue with the UI going on a trip outside of the screen, but how do I make it re-size as the textlabels do?

You would change the Size to something like (0.4,0,0.2,0)

Also use an anchor point of <1,0> because you should use the Aspect Ratio Constraint
(Tut here:)

The reason why is because when the screen’s aspect ratio changes, it is going to make the gui stretch which will not look very good. The anchor point will move the ‘center’ of the gui and change where it resizes from (the top right corner instead of the top left). My recommendation is to use an invisible wrapper frame with the constraint and then place the scoreboard inside of it. That way it takes up larger screen space and avoids clutter from trying to fit in as large a space as possible.

The values go {XScale,XOffset},{YScale,YOffset}
Offset = in pixels
scale = in screen percentage
0.1 scale is 10% of the screen

1 Like

Use scale, not offset. I recommend using decimals with Scale, or try using UIAspectRatioConstraint and playing around with it until you get a good result. I would also recommend using AnchorPoint.

1 Like

Thanks everyone, I’ll see what I can do and post here again either if I fix or didn’t understand something.