An example of a ScreenGui.
Hello everyone, Madrak here with the first blog post in our series on building your own GUIs using Lua. This is a post for advanced script writers only, so don't worry if some of this goes over your head.
In this lesson, I'll be explaining the first steps to set up a 2D GUI, and some basics about our coordinate system.
ScreenGui[]
A ScreenGui (GUI can either be spelled out or pronounced "gooey") is a sort of 2D interface that appears on your screen.
The first step to creating your GUI is to create a ScreenGui and insert it into the StarterGui service in the Explorer window.
So now that we’ve created out ScreenGui object, we can start adding frames to it. A Frame is a container object, that can hold other objects, like buttons, text labels and images. By default, a frame will look like a blank rectangle. You can change its BackgroundColor3 property to change its color. It also will fire events when the mouse either enters and leaves, allowing you to script all kinds of cool stuff. Lastly, it contains a Visible property which can be set to false if you want it to not do anything. This is useful if you want to hide a Frame temporarily.
UDim2[]
Hold up. What are all these UDim2 objects? Well, they are new. UDim stands for Universal Dimension, and is a compact way to specify the Size and Position of a GUI. When laying out a GUI, it is often necessary to have some positions/sizes change when a parent container's size changes. Other times, you might want to have a fixed offset that is a specific number of pixels. A UDim lets you do both at the same time.
A UDim object consists of a Scale and an Offset. Scale is specified as a number between 0.0 and 1.0 that represents the percentage of your parent's size. So if the Size Scale is 0.5, it will occupy half of its parent in terms of size.
Offset is the number of additional pixels away from its original position, either positive or negative. However, Offset should only be reserved for when the GUI should be located offscreen. Otherwise, always use Scale. This is because different screen sizes can distort the position and size of the GUI. You don't have to worry about Position, because by default it is written in Scale. However, Size is automatically written in Offset, so you need to rewrite the Size of every ScreenGui in Scale.
But wait, there's four UDim2 values! That's because a ScreenGui is a two-dimensional object. The X-coordinate has its Scale and Offset, and the Y-coordinate has its own Scale and Offset, making four values in total.
Now I'll run through a few examples of using UDim2's to make Gui objects stick to various parts of the screen. Remember, Position is defined as the top left corner of the Frame.
Last tips[]
- If you'd like to try playing around with Positions and Sizes, open up a level in edit mode and drop a ScreenGui (and some Frames) into the StarterGui. Start playing with the numbers to get a feel for how it changes, and try resizing Roblox to see how using Scales changes your GUI.
- Note that StarterGui has a ShowDevelopmentGui property. So, if you want to work on the other parts of the game and don't want to see the GUIs, turn on the checkbox and it will hide all GUIs.
- If you are making a ScreenGui near the top of the screen, turn off its IgnoreGuiInset property. If the property is left on, the game will automatically push down the Gui to make room for the leaderboard and chat.
If you'd like to discuss this blog post, please visit .
Next time: Buttons.
–Madrak