I need help with GUIs

Hello fellow members of the developer forums!

I’m a bit new to UI designing for I am usually a builder…

I am trying to script a top bar for a timer so that I can script it in later on, however I seem to be hitting a dead end here.

In game, on my computer it shows this

which is what I want, however in roblox studio, It shows this

which is NOT what I want.

In the following screen gui, it contains a frame, and within the frame is an image label.
these are the properties of the frame:

hmmmm

Note that I removed the top bar, thus i needed to make up for lost space. Is there any way to create a bar that fits on everyone’s screen evenly? If there is a link to a video, it would be greatly appreciated! Thank you for your time!

~Revelted

1 Like

In studio any UI will be scooted down by 36 pixels to make room for the topbar when you play the game which I believe is what may be happening to you.
If you made the position something like {0, 0, 0, -36} I believe you wouldn’t see your bar in studio but if you play-test or play in-game it’ll be right at the top of your screen.

1 Like

As EndorsedModel says, the topbar “adds” an extra 36 pixels of screen space that you don’t see in studio. 0,0 on the screen ingame starts below the topbar, so you want to use offset to place the topbar at {0,0}, {0,-36}, and make your replacement topbar at least 36 pixels tall so everything lines up correctly.

Avoid using scale when precise pixels are concerned. It is relative to screen size, which varies dramatically between devices.

2 Likes

I believe the main problem is the use of the scale rather than offset while trying to cover the topbar. If I’m not mistaken the topbar is always going to be 36 pixels, so using offset to move and size is better than trying to use scale.

1 Like

I reccomend setting the y-offset component of the position of the root UI to zero, then using

game:GetService("GuiService"):GetGuiInset()

to get the topbar inset and use the result from that to change the offset for the root of the UI.

This API is avaliable so that games can adapt to any changes made to the topbar in the future so it should be used here. Read more about this function here:

1 Like