Gui Is scaled different In Mobile

Help and Feedback Art Design Support
#21

PC:

iPhone X:
image

Not sure if this is what you wanted.
GUI.rbxm (7.7 KB)

#22

The game isn’t loading in roblox studio

#23

it’s not a game, drag the file in your workspace

#24

The Ui Grid layout in the first frame also changes the frames in the buttons and makes them weird. Though I appreciate your help.

#25

This would just place the GUI in the middle of the screen on the Y-axis. Having anchor points with 0.5 is usually used to center things around an axis.

As for the OP. Assuming each frame is parented to the white frame, you can lock it on the bottom of the screen by using an anchor point of 0.5, 1. You’d also want to set the position of the frame to 0.5, 0, 1, 0.

Quick Explanation

An anchor point of 0.5, 1 has the anchor centred at the bottom of the frame:

image

You also want to place it at the bottom of the screen. So that’s why we have the position as 0.5, 0, 1, 0:

image

Now the anchor point and the position will come together:

image

#26

I tried that,
It had the same result from Judgy_Oreos Solution.

#27

No solutions so far hasn’t worked, so instead I just revamped the whole thing and put the gui on the side.

If no solutions work, this has to be on Roblox Studio’s fault.

If any of you want to try a new solution tho, feel free to try it.
Ill just mark this as a glitch for the meanwhile.

#28

Put a UiAspectRatioConstraint in. thats it

#29

This is not a glitch. It’s not positioned and scaled properly.

As other people have stated, you should use a UIAsectRatioConstraint and adjust the AspectRatio property until it looks right. Then, position it using the method I provided in my previous post.

#30

…Therefore making the position’s Y component 0.5 and the AnchorPoint’s Y component 0.5 would put it in the middle of the white frame along the Y axis??

#31

GOD
Ive said this a MILLION TIMES,
The gui IS SCALED
And its using a UiAspectRatioConstraint

Dont people read the main posts anymore???

IT LITERALLY SAYS IT ON THE POST

image
image1589×1197 91.9 KB

#32

That is exactly what I did which then again ended up with almost the same result of @Judgy_Oreo’s solution.
image

#33

UIAspectRatioConstraint is exactly what you need. Its not possible that it is not working on such a simple gui.

#34

I assumed that the problem with positioning came from the outer white frame, the inner frames. Even so, having the anchor point in the center won’t fix anything if everything else is using scale.

I guess the only way to fix this problem is to show an example.

I wanted the solution to be as simple as possible, so I tried my best to dumb it down as much as I can. But, that didn’t fix the problem.

This solution will be complex, but the solution works. You’d have to use AutomaticSize.

  1. Create a Frame, and scale it on the Y-axis only. Leave the X-axis empty. Turn on AutomaticSize on the X-axis, as the Y-axis is already scaled and the X-axis is going to be scaled. This Frame would also be positioned with the steps of my first reply
  2. Create a UIGridLayout and edit the CellPadding and CellSize properties until they look right. Make sure FillDirection is set to Vertical and HorizontalAlignement is set to Center
  3. Parent a UIAspectRatioConstraint under the UIGridLayout to ensure everything stays a square
  4. Create 4 ImageButtons and parent them all to the Frame
  5. Add design if necessary

There’s also another way, without the use of UIGridLayout. Using a UIListLayout and substituting the Size property of the UIGridLayout and inserting UIAspectRatioConstraints within each button also works. This removed the unnecessary borders around the GUI.

The higher one uses a UIListLayout, the lower one uses a UIGridLayout:


Scaled.rbxm (6.2 KB)

Side note. Using scale for everything is less than optimal. Try practicing using offset values as well. I used only scale for the solution but offset would’ve looked nicer (it’s more accurate and consistent).