Gui Isn’t Centered

Help and Feedback Art Design Support
#1

Hi there, I have a gui that won’t go to the center of the screen. I move it there but it won’t stay there when I play it on mobile. Does anyone have some advice?

Thanks.

1 Like
#2

  1. Make sure your UI is centered. This can be accomplished by setting the AnchorPoints to {0.5, 0.5} and Position {0.5, 0, 0.5, 0}

  2. If you are using an UIAspectRatioConstraint, remember that the aspect ratios of different devices are different. To consistently fill the background, you will need to have the background frame set to Size {1,0,1,0} without any constraint.

7 Likes
#3

You can do this:
Go to the Frame’s Properties
E4

1 Like
#4

yeah setting Size to {1,0,1,0} will make the X and Y sizes 100% of the parents size. (100% of the screen size if the parent is a ScreenGui)

1 Like
#5

This is a really useful plugin.

Edit: The directions are in the description of the plugin.

1 Like
#6

You are probably using offset for the size of your GUI. This is measured in pixels, and so will not be the same size on all screens. To have all GUI’s take up the same % of a screen, you’ll need to use the scale property for size instead, or you could use a GUI rescaling plugin.(I use one made by EchoReaper, but it is currently off sale and I do not know of any other alternatives.)

Roblox GUI sizes consist of 4 values, X Scale, X Offset, Y Scale and Y Offset. The Offset is any value, and is the number of pixels. Scale is a value from 0 to 1, representing how much of the screen it should take in a certain axis. To take up the full screen of all device, you will need to set both X and Y scale to 1(for 100%). It would be 1,0,1,0.

A good way to check how your GUI’s will look on different screens is to use this button and select a device to see how your GUI’s would look.

Screen Shot 2020-03-30 at 21.55.16

Screen Shot 2020-03-30 at 21.55.23
Screen Shot 2020-03-30 at 21.55.23321×641 60.5 KB

I hope this helps you slightly.

2 Likes
#7

Now its like this though. The images are in a frame is it something with the frame?

image
image2224×1668 491 KB

1 Like
#8

to change all sizes of images and image labels within a frame, they all must be in the “Scalar” component.

For example, since you made your frame {1,0},(1,0}, the “1” is the scalar component, so in each button/image label in the frame , change it so their offset (the “0” value) is 0, and the scalar is 0.1 or something, then adjust the size to how you want it using the scalar component.

EDIT: If you change the buttons to {0.1,0},{0.1,0}, you can then use the built in UI resize tool in studio and it will then resize it in the Scalar component.

3 Likes
#9

I have no clue what you mean charr

#10

Install this plugin,

Select your GuiObject (Frame, TextButton etc.)

Click “Offset > Scale” in “Plugins” tab:

E5

2 Likes