How to position gui offset based on screen sides?

i have a serious problem that has been driving me nuts because i cannot figure how this works.

so the default icons in the roblox gui show the roblox icon and the chat bubble icon on the top left side of the screen and the leaderboard on the top right of the screen. whenever I resize the screen these guis always stay in place and keep their same size which is good.

https://gyazo.com/471fc934b6496f999a9f1e135d109ad9

https://gyazo.com/ea19969265706e999bf3e67e0cd32f42

you can see me resizing the window and it just stays at the same spot. (which is good and is what i want and i don’t know how you would do this)

I wanted to add my stamina gui on the bottom left of my screen and my fps gui on the bottom right of the screen. I’m wondering how does roblox keep the leaderboard gui in the same top right spot of the screen despite changing the dimensions of the screen. you can’t do this using scale because its a percentage of the way of your screen, and you cant do this using offset because offset its based off of the left side and topside of the screen and im not sure how you would change what screenside its based on.

so how does roblox do it with their guis? im completely lost and theres no tutorials i can find that explains this or anything. please help i am dying inside because of this and its giving so much stress.

can you like change the screen sides that offset is based off of? by default offset uses the top and left side of your screen. if i could somehow make it use bottom and left side of my screen i could put my stamina bar gui perfectly in place. and i could make the fps gui based from the bottom and right side of the screen. in this case it seems like the roblox leaderboard gui uses the top and right side of the screen which keeps the offset perfectly in place. how do I achieve this?

2 Likes

You should be using AnchorPoint.

TopLeft = {0,0}
TopRight = {1,0}
BottomLeft = {0,1}
BottomRight = {1,1}

The first number is the X value and the second is the Y. If X is 0, it’ll be at the left. If it is 1, it’ll be on the right. If it is 0.5, it’ll be in the middle. If the Y value is 0, it will be at the top. If it is 1, it’ll be at the bottom, etc etc.

3 Likes

so if i wanted to position my stamina bar gui on the bottom left of my screen i would use anchor point {0,1} and then this would base my offset position value off of the bottom and left side of my screen?

image

1 Like

Theoretically yes, if your properties are correct.

As a side note, this is simple enough to test on your own. When you have trivial questions, it’s best to see if you can answer it yourself while saving the hassle of others on the forum :slight_smile:

anchor point is set to bottom left and i positioned it bottom left of my screen in studio

i go in game and it doesn’t appear bottom left of my screen and i dont see it? am i doing something wrong? it seems like its still using the top and left side of my screen as a base still

https://gyazo.com/a6a9d286e5c8641a72492fc06f7a5d5d

1 Like

If you want it to stick directly to the corner, you’ll have to use Scale. For example, if I had the AnchorPoint {0,1}, I’ll want to have the position {0,0,1,0} plus the offset.

1 Like

im not trying to make it stick directly to the corner. i have a stamina bar and i want to place it like for example 5 pixels above from the bottom of the screen and 5 right from the left side of the screen. i cant do that using scale because its a percentage of your screen dimension and when i use scale and change the screen dimension it messes up the gui and doesn’t stay in place cause of that

That’s not how AnchorPoint works — if you use the AnchorPoint and position that I suggested, it should stay at the bottom right of the screen regardless of size. Offset also follows this rule. If you add a 5 pixel offset to both X and Y (to get {0,5,1,5}), it’ll stay at the bottom left of your screen with the added offset.

4 Likes

ohh i think i understand what you mean now. but now there’s a new problem. when i set the value of the scale to bottom left {0,offset} {1,offset} and try to drag it around in studio it just changes the scale. how do you lock the scale to 0 and 1?

https://gyazo.com/7b9b42795dff8b429d68fd1d9ada5f29

Can’t do that unfortunately. I’ve just stopped using Roblox’s UI editor altogether because of how unreliable it is. Setting the properties manually gives me peace of mind though, knowing it’s (mostly) pixel-perfect

1 Like

yeah i was wondering do i have to keep manually setting that? that is so painful. wow then thats really unfortunate. is there some kind of editor you can use instead?

thank you so much you just set me free from my immense pain and suffering over this issue. i feel like i have rare treasured knowledge now thanks to you. although i cant use the editor anymore i can use the values and set them which in the end works for this problem so its a win.