Scaling UI For All Devices

Resources Community Tutorials
#1

Scaling UI for all your player’s devices is essential to a smooth game experience. Misscaling UI can lead to an unprofessional look, and worse, unplayability. Unfortunately, most new developers faced with this issue hear the ill-advised, “just use the scale property.” This advice inevitably leads them to only using scale for everything, thinking it works for a while, then confusion after it sort of, but not really, works.

So what’s the secret?

Use UILayouts!

UILayouts are built-in instances that you can use to control your UI. They are incredibly useful and easily customizable.

There are many helpful UILayouts, and I invite you to play with all of them, but for the sake of this tutorial, I’ll be focusing on three that massively help scaling.

UIAspectRatioConstraint

UIAspectRatioConstraint allows you to enforce a ratio for a specific UI. Be rest assured that your square is indeed a square. Divide your UI’s AbsoluteSize.X by its AbsoluteSize.Y to calculate a ratio.

UIGridLayout

UIGridLayout allows you to easily create equally sized, evenly spaced, and nicely formatted grids and lists of UI elements. UIListLayout and UITableLayout are similar but have slightly different properties.

UISizeConstraint

UISizeConstraint allows you to control the minimum or maximum size of a UI. Ever set a UI’s scale to 0.1, only to find out it results in a 3 pixel UI while on mobile? No longer! UITextSizeConstraint is the same, but for text.

In the end, scaling your UI for all devices and understanding all of Studio’s UILayouts is a hassle for anyone new to Studio UI creation. (I’ve been doing it for a year and it’s still a pain…) But as you make more and more UI, you’ll find it becomes second nature to design your UI around scalability. Until then, practice, practice, practice!

Use AnchorPoint

So you’ve scaled your UI nicely, but it won’t stay where you want it to. Let me introduce you to AnchorPoint. This wonderful property allows you to definitively set the position of a UI object relative to its parent UI object/viewport based on its Position.X/Y.Scale. Want something perfectly centered? Set AnchorPoint to (0.5, 0.5) and the scale position to (0.5, 0.5). Want it in the bottom right? AnchorPoint (1, 1) and position (1, 1).

17 Likes
How can I get GUI's to be resize on different sized screens, but still keep their shape?
#3

also you can even use scripts to do the same things like you want

2 Likes
#4

It’s nice to hear you already have a wealth of scaling knowledge! I intended for this tutorial to be targeted more towards newer developers who may be having trouble getting their UI to look right on every device.

4 Likes
#5

I never even knew how to get the ratio for use until this post told me

1 Like
#6

Why couldn’t you directly use scale? On size

It does that too

1 Like
#7

It does but it doesnt do perfectly on images i basicly use plugin for scaling them for all devices

1 Like
#8

Unless you set the images position to offset but size scale, it worked for me

1 Like
#9

or u can just use the images image settings ya know

1 Like
#10

listen this is my opinion alright?

1 Like
#11

This would be very helpful for people getting into the UI aspect of Roblox Development. You should probably note that there are free plugins such as AutoScale Lite that can help automize the process of UI’s being scaled correctly on all devices.

1 Like
#12

Did I say something rude about your opinion?

2 Likes
#13

oh no no no not at all i am just making sure that you know its an opinion and not something other

3 Likes
#14

Scale isnt this magical thing that fixes all problems for you. sometimes it causes elements to be small on tiny screens or giant on big screens. both are things that you don’t want in your game.

2 Likes
#15

Yeah, it seems like a few people are missing the point of this tutorial. The scale property is great, but it is not a be-all and end-all method. Only when combined with UILayouts can it be used to its full potential.

1 Like
#16

The UI aspect ratio constant isn’t working. I did the X / Y and it didn’t do anything. Maybe I’m doing something wrong?? Sorry to bother you.

1 Like