Button appearing in different positions?

I am trying to make a button next to the chat button but the position changes in studio and the actual game:
-In studio
image
-In the roblox player
image
here are the properties:


does anyone know how to fix this?

2 Likes

Part of the placement of the Roblox UI is likely in offset (pixels) and not scale (percentage). The GUI is being placed where you’re telling it to be, but visually, it’s not placing how you think it will. Try making part of its position in Offset, until you find the balance for it

Are you keeping aspect ratios? Since the Roblox studio screen is smaller I’d recommend using AutoScale Lite - Roblox to convert the part’s position to offset.

I tried making it even between offset and scale but now it is still in the wrong place.

yes, it is scaled and yes I tried it with offset

Okay so this is what i do when making GUI’s in my game:

First insert something in a ScreenGui (Text Button, Image or whatever it is)

Then I enable the emulator, Which is this thing
2022-04-18 (2)

And then i set the Device Size to the lowest (IPhone 4S)

From there I configure the position of the textButton or whatever you want to configure:

  1. Just drag it around, resize it using mouse then put it in your desired place

  2. Now since you know about the AutoScale plugin use that to convert the Size to Scale using Unit Conversion (Make sure you’re selecting the text button)

  3. Now set the Position to offset

  4. And then finally, Hover on the TextButton and click the Plus, and Add a UISizeConstraint
    2022-04-18 (7)

  5. Change the device size to your screen size, In my case 1280 x 720 (HD 720)

  6. Dont worry it’ll look weird at first since you need to change the UISizeContraint MaxSize until it looks right
    2022-04-18 (11)

So this is what it looks like in Mobile, And PC


If you do want it to appear in Top Bar just go to the text Buttons ScreenGui and enable the IgnoreGuiInSet, and just reposition it until it looks right.

If you’re planning to add Multiple Buttons then I do recomment making a Frame and do the same steps, But fit it to the entire Top Bar and insert a UIListLayout/ UIGridLayout, and parent your buttons there, Configure the UIListLayot/ UIGridLayout until you get the desired looks

Thats all hopefully it works.

4 Likes

It does work lol

UISizeConstraint MaxSize = 120, 33
TextButton Position (In Offset) = {0, 100}, {0, 4}


1 Like

Use a UIAspectRatio! It’s appearing off because the viewport in studio (size of the viewable screen) is smaller than the player. An aspect ratio keeps everything consistent in my experience.

2 Likes