How to Scale your UI For all Devices

This tutorial is for people who don’t know how to do this, if you already know, This post wont make you learn much.


Part 1 - Introduction, New Beginnings

Hello! most of you may or may not know me but my name Is StarJ3M, I Joined The Devforum on 24 Nov '20, I like to program In my free time and make games or play them, I want to master Roblox Scripting and Figure out all techniques for it. Anyway, now that you know me lets get Started!

Part 2 - What Is UI?

UI stands for User Interface, Its what the player can see or not see when their in a game, It can be used for things like Shops, Notifications, Kill Feeds, etc…

Oh, you say you wanna make UI? Ok lets get started to that now!

Part 3 - Lets Make UI!

So now, How do I make UI, Well Firstly you want to Open the Explorer, you can do this in View In your ROBLOX Studio. Next, you go to the explorer, Scroll down, and bam! StarterGUI, click the “+” sign on StarterGUI after you hover over it. Now click ScreenGui In the dropdown! You don’t need

this but it is useful for UI instead of having it all clumped up inside of the Starter Gui and also, ScreenGui Makes it available on the player Screen anyway, So If you just put a frame inside of StarterGui, the UI Would not show up at all and be invisible on the screen. ( This is mandatory if you want to have UI that the Player Can See and Interact With! )

Now, We can make a Frame if we want the UI to be inside of a box that will always be in their, If you move it outside of the frame it will be their still yes, but that would make the Frame useless wouldn’t it? So then we can just simply insert a TextLabel Inside of ScreenGui! and bada bang bada boom we have UI!

Part 4 - How to Position UI

Now, lets position the UI, if you want to do this you can simply drag it with your ROBLOX Studio Mouse and Hold it down. Elseif not then you can go to the properties of the TextLabel, Text Button, ImageLabel, ImageButton, TextBox, ViewPortFrame, and VideoFrame, scroll down and then you can simply click on position and set the position’s value from X to Y with curly brackets like this: `{10,10}.{20,20}. If you wanna be advanced, Click the Dropdown Button of Position for values for X and Y.

Part 5 - How to Size UI

Now we learned how to position it, but what if I wanted to make UI Big and small? Well its simple, just like how we position it, Go to the Properties of one of the listed UI Objects, then you can scroll down until you see Size and then you can give X and Y values like so!

Part 6 - The Real Deal, How To Size UI For All Devices

Oh their you are! Looks like your here to defeat the final boss He has the Star Of UI! This is the final path you will take to learn how to Size UI For All Devices!

Dididadudadu DOOOOOoooooooo…doooooooooo… Dooooooooooo… DOOOOoooooo… DOOOOOOOOO… DAUGuuuuuuu… .doooooooooo… Dooooooooooo… DOOOOoooooo… DOOOOOOOOO… doooooo… Dooo Diiii Doooo Da Doooo… Didooooo… Dadidooo… dunnnnnn…*

* Insert Final Boss Music Here *

If you have played SM64 you know what the Diddiddidadu da dOOOOOOOoooooo… is all about/If you got to the 10 Star Door gate or 15 I don’t remember ok >:(

Anyway, If you wanna scale it for all devices FIRST, you need to go to Size for the UI, then dropdown, and then you need to drop down for X and Y, Your screen should look like this:
Screenshot 2021-08-19 151339
Do you see the Offset value? well, set it to 0 for X and Y and then your UI may be super big or be 0,0 which is to be expected, Now you can freely scale your UI in Scale or the original Size Property!

IMPORTANT: Make sure that for all UI, you have the Offset == 0, else it wont work, this includes things inside of frames because if you change the Frames Offset to 0 then, It wont change for its Children.

Lets test!

https://catkin-bottlenose-fukuiraptor.glitch.me

click to view video

Perfect! Now, Some UI on tablet may be scaled up higher than most devices, how do I fix this you may say, Its simple actually, We can scale it more on the X axis Left or Right, and Make sure that it still looks perfect for devices other than tablets!

And that’s the End! You have Officially Learned How to Scale UI For All Devices, Nice!

Please consider liking this post and maybe sharing it to other who need it, It would make me happy considering I put lots of time and hard work into this!

Questions, Comments, Concerns

Question 1

Answer:


Other Tutorials Related:

Their is Currently No Other Tutorials Related to UI.

15 Likes

I personally prefer using plugins but nice tutorial.

It would be nice if someone could actually make a tutorial that depending on a devices size, the scale value of an item increases or decreases

1 Like

What do you mean by “value” of an item? Do you mean like the UI will stretch depending on the Device’s Real Time Screen Scale?

No, I meant like how games like Bloxburg have the UI Scale property set to large on mobile and small on desktop

1 Like

Whats the trouble with doing that? You just adjust the scale and maybe position a bit depending on what inputs are enabled. Ex. Touch or touch and gamepad enabled and no keyboard its prob a phone

1 Like

Nice, def gonna use this tip :slight_smile:

1 Like

Thanks! I also would like to ask if you can use some auto scale plugins! I haven’t used them and nor do I understand them myself, but they may work out for you!

Ok! I’ll check it out later, Do you have any good auto scale plugin names?

1 Like

I can’t recommend any because I don’t use any sorry.

When offset is set to 0 then the UI moves somewhere of-screen, is that normal?

Yes, the UI will shrink into 0,0 for X and Y, just move it back and or put the x and y scale property to something like 0.5!

Ah, that makes sense … this will help me a lot, thanks!

1 Like