How to make a gui fill the whole screen roblox

I had the same problem a couple of days ago.

What you want to do is to set "IgnoreGuiInset" on your Gui Element to true. You can either do it in the Explorer or via code with:

script.Parent.IgnoreGuiInset = true

given the script is a child of the GUI.

And you need the size {1,0},{1,0} of the frame, but you already did that.

Log in to vote

0

so I'm making a loading gui and I have everything sorted out. Besides the size of the gui. I want it to cover the whole screen on every screen size. How I do dis?

4 answers

Log in to vote

0

Answered by

4 years ago

Edited 4 years ago

Change the size to (1,0,1,36) and the position to (0,0,0,-36). That should make it cover the whole screen. If it doesn't, let me know.

Log in to vote

0

Log in to vote

0

Instead of having to put in the position as (0,<Number> 0, <Number>) that will make it so the position can't cover everything but if you do: (<Number>,0, <Number>, 0) it will cover the entire screen

UDim2.new(1,0,1,0)

Log in to vote

0

You can get the screen size with ViewportSize property from the Camera:

local plr = game.Players.LocalPlayer
local screenGui = Instance.new("ScreenGui")
local Frame = Instance.new("Frame")
wait (0.2)
screenGui.Parent = plr.PlayerGui
Frame.Position = UDim2.new(0,0,0,-36)
Frame.Size = UDim2.new(0,game.Workspace.Camera.ViewportSize.X,0,game.Workspace.Camera.ViewportSize.Y)
Frame.Parent = screenGui

I positioned the Frame 36 pixels higher to make it go under the bar on the top of the screen, feel free to completely remove the positioning.

Answer this question

How to make a gui fill the whole screen roblox

Joined Jul 22, 2021

·

103 Posts

Discussion Starter · #1 · 6 mo ago

How do I make it so whenever I join my Roblox game the GUI will fit the whole screen because when I am in the studio and I fit the GUI to fit the STUDIO'S screen it does not fit for normal Roblox.

How to make a gui fill the whole screen roblox

Joined Feb 25, 2018

·

1,940 Posts

How do I make it so whenever I join my Roblox game the GUI will fit the whole screen because when I am in the studio and I fit the GUI to fit the STUDIO'S screen it does not fit for normal Roblox.

You can use scale instead of offset, a size of {1, 0, 1, 0} takes up the entire screen. The top bar reserves 36 pixels, but you can ignore it if you enable ScreenGui.IgnoreGuiInset.

Tutorial page

This article is an intermediate tutorial.

A GUI, which stands for Graphical User Interface, is used to display information about the game to the player. GUIs can be used to show the player what their character's level, health, and gold are, and also to create in-game buttons for menus and inventory systems. E

How GUIs Get Into a Game

The most common type of GUI is a screen GUI which behaves like a 2D place to put stickers on the player's screen. When the player moves the camera or explores the game world, a screen GUI stays in the same place (on the screen).

When you make a new Roblox game, this screen GUI space doesn't exist — it's your job to add it. The easiest way is to add it to the StarterGui service so that it gets copied to a player's local game session when they join the game.

  • In the Explorer window, find the
    How to make a gui fill the whole screen roblox
    StarterGui object.

How to make a gui fill the whole screen roblox

  • Hover over it and click on the circle ⊕ button

How to make a gui fill the whole screen roblox

  • Locate
    How to make a gui fill the whole screen roblox
    ScreenGui in the popup menu and select it. This will create a new 2D screen space in front of your 3D game world.

How to make a gui fill the whole screen roblox

Adding Items to a Screen GUI

Currently the new screen GUI is empty — it's just a blank canvas that spans the entire width and height of the player's screen.

Add a Text Label

All sorts of things can be added to the screen GUI. Let's start with a basic text label.

  • In the Explorer window, hover over the new ScreenGui object, a child of StarterGui, and click on its circle ⊕ button.

How to make a gui fill the whole screen roblox

  • Find
    How to make a gui fill the whole screen roblox
    TextLabel in the popup menu and select it. Note that an object can be found more easily by typing the first few letters of its name into the “Search object” input field.

How to make a gui fill the whole screen roblox

This will add a very basic text label to the top-left corner of the game view.

How to make a gui fill the whole screen roblox

💡

These steps created the new text label as a child of ScreenGui which is a child of StarterGui. None of these objects exist in the 3D workspace, so you can't select them using the Select tool like you can with normal parts. To select any of these GUI-related objects, you must select them from the Explorer window tree where you created them.

Customize the Label

We have a text label on the screen, but a white box with the word Label isn't very useful. Let's customize it to look like a “version number” GUI, a display element usually found on the menu/intro screen which shows the current version of the game.

  • In the Explorer window, select the new TextLabel object.

How to make a gui fill the whole screen roblox

  • Open the Properties window by selecting the View tab and clicking the Properties button.

How to make a gui fill the whole screen roblox

  • For the Font property (within the Text section), click to the right of the font name and select Highway from the drop-down menu.

How to make a gui fill the whole screen roblox

  • In the Text property field, type in a new name like Version 1.0.

How to make a gui fill the whole screen roblox

  • In the TextSize property field, type 35.

How to make a gui fill the whole screen roblox

  • Now expand the Data section (if it's not already expanded).

How to make a gui fill the whole screen roblox

  • For the BorderSizePixel value, enter a new value like 8.

How to make a gui fill the whole screen roblox

Great! The GUI object looks much better now! If you want to get even more creative, try changing properties like TextColor3, BackgroundColor3, BackgroundTransparency, and others.

Positioning Items in a Screen GUI

Now that we have a basic text object on the screen, let's move it to a new position. Every 2D object in Roblox has a Position property which determines where it will be drawn in relation to its parent object. This position is set by X and Y coordinates where X is the horizontal position and Y is the vertical position.[1]

How to make a gui fill the whole screen roblox

When first created, all 2D objects start with an X and Y position of 0 which is the top-left corner of the screen, but what if you want to move it? Let's look at the Position property of the text label and learn how!

  • If the TextLabel object isn't selected, click on it within the Explorer window.

How to make a gui fill the whole screen roblox

  • Find the Position property and click on the small arrow to expand it.

How to make a gui fill the whole screen roblox

  • Now expand the X and Y branches directly under it. Notice that each has unique Scale and Offset properties — these are the values you can use to position the text label within the screen GUI.

How to make a gui fill the whole screen roblox

Scale Property

The Scale property represents a percentage of the parent object's width or height. Remember that the screen GUI “canvas” spans the full width and height of the 3D game view — that means the Scale property can be used to position an object directly at the center of the view, against the left or right edge, or anywhere between based on a percentage of the screen's full width or height.

Although Scale indicates a percentage, the range of values that you enter should usually be between 0 and 1, where 0 equals 0% and 1 equals 100%. For example:

How to make a gui fill the whole screen roblox

95% of full width or height

How to make a gui fill the whole screen roblox

50% of full width or height

How to make a gui fill the whole screen roblox

10% of full width or height

Now let's move the text label to the horizontal center of the screen. Simply enter 0.5 for the Scale value of X and press the Enter/Return key to confirm.

How to make a gui fill the whole screen roblox

The text label should now be positioned more toward the center of the game view.

How to make a gui fill the whole screen roblox

💡

Remember that your game will be played on screens which vary in width versus height. For example, a phone screen may be slightly wider (and less tall) than a PC or console screen. Scale is the best choice for positioning an object in the center of the view because it will remain in the center on many different screens.

Offset Property

The second property in each set is called Offset. Instead of moving the element by a percentage of the parent's size, it moves it by a specific number of pixels. This can be useful if you want to place a GUI element slightly inside any edge of the game view.

Let's move the text label just slightly inside the top edge of the screen. Enter 50 for the Offset value of Y and press the Enter/Return key to confirm.

How to make a gui fill the whole screen roblox

Now the text label should be inset just slightly from the top edge of the screen.

How to make a gui fill the whole screen roblox

💡

Offset is the best choice for positioning an object near any edge of the view. Using this option will make sure it remains in the same basic screen position on PC, console, tablet, and phone.

Anchor Point

If you look carefully at the current position of the GUI object, you'll notice that it's not perfectly centered left-to-right, even though we set Position → X → Scale to 0.5 (50%).

How to make a gui fill the whole screen roblox

This is because of the object's default anchor point. An anchor point is a specific point on the object to align with the screen position you set. Imagine the anchor point like a pin stuck through a piece of paper — the pin can be put through any place on the paper, and Roblox will align that pin point with the Position value(s) you set for the object.

In the game editor window, the anchor point is shown by the small square outline on the object (when it's selected). When you create a new GUI object, the anchor point is set to the top-left corner — this is why that exact point on the object is aligned to the X and Y position values set earlier.

How to make a gui fill the whole screen roblox

The anchor point is based on an X and Y value which is a percentage of the object's size: 0 equals 0% and 1 equals 100%.

How to make a gui fill the whole screen roblox

You can use this concept to center the GUI object in the exact middle of the screen.

  • If the TextLabel object isn't selected, click on it within the Explorer window.
  • Find the AnchorPoint property and click on the small arrow to expand it.

How to make a gui fill the whole screen roblox

  • Set the X value to 0.5 and press the Enter/Return key to confirm.

How to make a gui fill the whole screen roblox

The text label should now be positioned exactly in the center of the game view.

How to make a gui fill the whole screen roblox

💡

Anchor point values are not restricted to 0, 0.5, or 1 — you can enter any value between like 0.25 or 0.8, but you cannot set an anchor point less than 0 or greater than 1.

Resizing Items in a Screen GUI

As you can see, the Position and AnchorPoint properties let us put elements anywhere we need to within a screen GUI. We can also change the size of any element using its Size properties.

  • If the TextLabel object isn't selected, click on it within the Explorer window.
  • Find the Size property and click on the small arrow to expand it.

How to make a gui fill the whole screen roblox

  • Now expand the X and Y branches directly under it. Similar to Position, each has unique Scale and Offset properties.

How to make a gui fill the whole screen roblox

Scale Property

For setting the size of a GUI object, the Scale property works the same as it does for positioning, representing a percentage of the parent object's width or height. If you set Size → X → Scale to 0.5 (50%), the object will be exactly half of the screen width.

Let's experiment and see what happens!

  • Enter 0.75 for the Scale value of X and press the Enter/Return key to confirm.

How to make a gui fill the whole screen roblox

  • Enter 0 for the Offset value of X and press the Enter/Return key.

How to make a gui fill the whole screen roblox

The text label should now take up exactly 75% of the screen width.

How to make a gui fill the whole screen roblox

Offset Property

As you noticed above, Size also has a property called Offset. For sizing, Offset is useful if you want to create buttons, labels, or other objects which stay the same number of pixels (width or height) no matter what screen they're being viewed on.

To increase the height of the text label, simply enter 150 for the Offset value of Y and press the Enter/Return key to confirm.

How to make a gui fill the whole screen roblox

Now the text label should be quite a bit taller than before!

How to make a gui fill the whole screen roblox

Using Negative Offsets

Some GUI layouts are only possible with creative combinations of Scale and Offset values. You can explore this by making the TextLabel object fill the entire screen with a small margin of 20 pixels around all four edges.

  • Set Position → Y → Offset to 20. This should bump the object upward just slightly.

How to make a gui fill the whole screen roblox

  • Set Size → X → Scale to 1 (100% of the screen width).
  • Set Size → X → Offset to -40 — this makes the object 40 pixels less than the entire screen width, resulting in the desired 20 pixel margin on both sides.

How to make a gui fill the whole screen roblox

  • Set Size → Y → Scale to 1 (100% of the screen height).
  • Set Size → Y → Offset to -40. Just like above, this makes the object 40 pixels less than the full screen height and creates a 20 pixel margin on both the top and bottom.

How to make a gui fill the whole screen roblox

Delving Further into GUI

This section was not imported from the Developer Hub article.

If you are interested in learning more about GUI objects, we recommend you view the following pages and reference sites:

Still interested in GUIs? We encourage you to learn more about Studio if you are new and experiment with different property values. Practice makes perfect, and trying it out yourself will allow you to understand it better.

References

  1. Vector2

How do you make your GUI fit on Roblox screen?

Simplest Way To Make Your GUI Fit To All Devices.
Create a screen gui and a frame (or textlabel, textbutton,imagelabel,…) ... .
Open your plugin, we will need to use these buttons , click the blue one, select the UI which you want to scale then click Scale (both Position and Size).
STEP 3 [OPTIONAL].

How do I fix my Roblox GUI size?

Go onto properties for the frame that you want to scale..
Go onto size then click the arrow for the x and y axis..
Set the offset for both axis to 0..
Now you can scale the frame however you like (using the properties tab or just by drawing it around like usual).

How do you make Roblox fullscreen?

On any device (this will be harder on Xbox, but still work), press Esc or click on the Roblox button in the top left corner. Then, click on the Settings tab. Look down a bit and you'll see Fullscreen. If it says off, turn it on.

Why does Roblox not fit my screen?

You need to go the properties of the UI, remove the offset completely, and use the x and y scale to fit it to your screen. Then, it will fit all screens.