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:
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.
Editors Note
Haha, forgot to say that one big image GUI paired up with text UI’s may not scale correctly for all devices, so try to make more layers of images and text so it will be possible to scale on all devices.
