Positioning GUI in bottom right corner

Template GUI:

I’ve been looking for a while on how to get this position to stay there. When I join ROBLOX (game) it’s not in the correct position and moves over. I’ve looked around and no methods have worked so far, for my needs.

Position: {0.864, 0},{0.743, 0}

Size: {0, 187},{0, 116}

4 Likes

Position should be:

{1, -187}, {1, -116}

They work hand in hand and should be used this way. Basically this scale moves it out of screen 100% and then offsets it back in by its size.

15 Likes

So what you have now means:

  • Put the top-left corner of this frame at 86.4% of the width to the right, and 74.3% of the height downwards.
  • The frame should be 187 pixels wide and 116 pixels high regardless of my screen size.

This means that what you see when you open this on different screen sizes, the frame will look different. The size will always be fixed in an amount of pixels, so at small screen sizes the frame might go partially off-screen, and in the example screenshot here there is space underneath the frame.

The easiest way to solve this is to put the AnchorPoint of the frame as (1,1), this will make the engine position the UI element from the bottom-right corner. Then, put the Position as {1,0},{1,0}, so that the bottom right corner of the frame will be placed in the bottom right corner of the screen. You can adjust Size freely to whatever you want it to be then, without needing to adjust Position.

14 Likes

Another tip to add on what everyone else has already said:

There’s a property called AnchorPoint, and you can use that to determine the positioning of the actual box based on the position. You could set the Position property to {1,0}{1,0} and then set the AnchorPoint to 1,1 and that would accomplish the same thing.

6 Likes

What if I wanted to tween it? currently it’s at {1, -187}, {1, -116} but I want to have it slide in from the left so I tried
{2, -187}, {1, -116}
it’s not working though (the tween animation)

how I set it to
start position : {2, -187}, {1, -116}
tweens to : {1, -187}, {1, -116}
goes back to : {2, -187}, {1, -116}
(loops)

1 Like

0 = left side of screen
1 = right side of screen

You would tween it from {1, -187} to {0, 0}, for example.

it seems to only allow (),(),()

when I try anything else it doesn’t work… do I need to rewrite the script?

works (not right position nor does it stay there in use) :
09

doesn’t work, right position :
02

Here’s the format:

UDim2.new(X.Scale,X.Offset,Y.Scale,Y.Offset)

If you want to move it from the right side of the screen to the left side, this is the proper technique

Assumptions:
The position is {1, -187}, {1, -116}

v:TweenPosition(UDim2.new(0,0,1,-116),"Out",v.Name,3,true)

This will tween the object to the new position of {0,0}, {1,-116}

1 Like

it goes to the top left…
could you write out the script? I think I put it in the wrong place and I did not know where to put the UDim2.new ect…

I wrote the values wrong, try the edit above.

The reaosn why it went to the top left is because the Y.Scale was 0 and the Y.Offset was 116.

it went to the bottom left…

Wasn’t that the intended value?

Regardless, with my explanation from above, you should be able to determine where you want it to go yourself.

1 Like

my idea was it to go from off screen, to the bottom right… so you like a friend request notification?

Take a look at this wiki reference on UDim2 uses. As the previous posters have mentioned, 0 represents the left side of the screen while 1 represents the right side of the screen (as for X Scale). Similarly, 0 would represent the top of the screen and 1 being the bottom (as for Y Scale).

A negative offset value would move the item to the left (or top) and a positive offset value would move to the right (or bottom).

With the format I gave you, UDim2.new(X.Scale,X.Offset,Y.Scale,Y.Offset) you should be able to get what you want to get.
In your case, you want it to appear from the right unappeared to the right appearing.
The position would start from UDim2.new(1,0,1,-116) and go to UDim2.new(1,-187,1,-116) via the TweenPosition function.

If you want the GUI to be positioned in the EXACT same place on every sized screen, Set your GUIs anchor point to X = 1, Y = 1 (More about anchor point here). Then set the GUIs position to X = 1, Y = 1 and it should put it in the bottom right corner!

3 Likes