Making UI look the same-ish on all devices (aside mobile)

[webturne (Nocturne)]

Hello! first time writing here, so I hope I am in the right place.
I’m making UI for my game (duh) anddd I can’t for the life of me figure out how to properly do things.

This is how it looks like in Studio

this is in game.
I have used AutoScale to convert the positions and sizes to Size, but it does NOT change a thing. The constraint also seems to do not much, only working when I inserted one myself.
I have NO idea what the hell I’m supposed to do to fix this, as UI is NOT my strong suit.

All help is appreciated. (This was done on a laptop, as I do not currently have access to my home computer).

[Eenat283 (Renatka)]

Have you changed the Anchor Point?

Here are 2 examples:
AnchorPoint 0,0
Position {0.5, 0},{0.5, 0}

AnchorPoint 0.5,0.5
Position {0.5, 0},{0.5, 0}

[webturne (Nocturne)]

Yeah, anchor points are all 0.5.

[Eenat283 (Renatka)]

uhh, I think you should set the Anchor Point to 0, 0.5 if your UI is on the left, not in the middle

[7eoeb (beoe7)]

Can you send us a copy (file) of the UI (if comfortable)

[LumoseerGaming (Lumoseer)]

UI is just pure pain to make it the same on all devices. You need to use a combo of scaling, UIAspectRatios, and positioning.

[webturne (Nocturne)]

overrunUI.rbxm (18.6 KB)
yeah sure, there you go.
i dont really care enough if anyone decides to snatch it up. it’s just UI and i dont really care to worry for UI.

[7eoeb (beoe7)]

Okay here is what I noticed:

1. The fading black background has an incorrect anchor point. I suggest you switch it to (0,0) or (0,.5) and set the position to (0,0,0,0) or (0,0,0.5,0)
2. The AspectRatio under the main menu frame is preventing the frame’s y size from taking up the entire screen:
   
   
3. I suggest you use pixels for the main menu instead. Even though you may think there is an issue with scaling, there really wont because the sizes are so small.

Additional tips:

1. Add UISizeConstraint: allows you to set the max (and min) size of the GuiObject in pixels. this is useful for preventing gui looking too large on bigger screens (e.g. you don’t expect a minimap to take up the entire screen of a 32" monitor

[webturne (Nocturne)]

Pixels? you mean offset? (characters)

[7eoeb (beoe7)]

Sorry for the delayed response.

Yes, offset is pixels and that is what I meant!

Also to get around the character cound you can do <put anything here it will count towards the character count but will be invisible> (just don’t use ``)

Example:

[webturne (Nocturne)]

Hmm okay, thanks.
i’ll be marking your post as a solution, since it helped me decently (i eventually overcame the issue)