Hi, to describe my issue easier, I am making a GUI like the spectate GUI. The problem is I want the text button to be in square shape on all devices. When I tried looking the text button on an emulator, it is not a square shape. I think it’s because of anchor point, but it didn’t fixed the problem.
On PC:
On Emulator:
Send help!
this is a very annoying issue to deal with, but the problem is the Udim2.
A Udim2 has a {XScale,XOffset},{YScale,YOffset}.
The scale is relative to the size of the screen, but the offsets are the pixels.
this means that if your offset = 560 on a 1080p screen, it should be at half the screen on only the 1080p screen. but moving it to a smaller or bigger resolution will result in it not being in the middle anymore.
if your scale = 0.5 however, it will always stay in the middle, because it’s position will be .5*screensizeY in this case. this also applies to the Xaxis.
It works the same way for scaling the UI. it the frame’s size = {1,0},{1,0} it will always fill the entire screen. but if the frame’s size = {0,10},{0,10} it will always be 10 by 10 pixels.
So, to keep it a square, you need to edit the Offset and not the Scale.
To quickly transfer from Scale to Offset, you can do Scale times Screensize or if it’s parented to a frame, you can do Scale times Frame.AbsoluteSize.
To quickly transfer from Offset to Scale, you can do Offset devided by Screenzise or if it’s parented to a frame, you can do Offset devided by Frame.AbsoluteSize.
After that, the only issue will be that a 100 by 100 square will take up almost nothing of the player’s screen when playing in 4k, but it will take up a bit over 29% of a vga screen. so you might need to make a script that makes the UI scaled correctly on either the X or Y axis, and then convert the other axis to Offset Using your chosen axis.
So, I multiply the current sacel with absolute size? Will that affect the anchor point since I’ve changed it?
It’s dependant on the size of the space you’re working in. if it’s with a frame it will be different.
But yes, in this case, YOffset = XScale*ScreensizeX.
you’ll also see, that when you convert YOffset to YScale, it should be different from XScale.
What does Screensize X mean? Also for more info, here are some other pics.
How it looks like:
Next button property:
is your positioning scale and also is your text like object a text label or text button?
That image with the properties is a button
I think it’s because that’s how it actually works if it were in a 100x100 pixels it would overlap the main frame and it would cause some problems of UI for you
Are you referring the scale or the offset?
by the scale of the size that’s how large it is x scale * y scale
With screensize X i mean the X size of the screen, with can be obtained with game.Workspace.CurrentCamera.ViewSize.X. but in that case, you’re using it inside of a Frame. so your “Screensize” will be the size of the parent frame.
As i expected, you’re using the scale, and not the offset. if the size frame would be the size of the screen, then you’ll need to do YOffset = 0.187*1920 (ScreensizeX of a 1080p screen). this should make it a square. Though only on a 1080p screen. this is why you need a script for it.
But that would stress the UI maker out and practically makes no sense
Ferb, it has nothing to do with overlapping. if clipsdescendants is off, then it would cause no problems at all. you also wouldn’t sress it out at all. i’m making a full 2d game, and i haven’t had a lot of issues with scaling so far. the only thing you need to know, is how Udim2s work.
The help is: set AnchorPoint on both things to 0.5,0.5 and on the GUI set IgnoreGuiInset to true. It should look the same on all devices.
changing the anchorpoint won’t help in this case. nor will IgnoreGuiInset help. the issue is that he’s changing the scale of the UI, and not the offset. if he wants it to stay a square at all times, despite the size of the screen, then he can just edit the offsets to be constant. otherwise he’ll need to do YOffset = XScale*the parent frame’s absoluteXSize
then the formula would be
UDim2.new(XScale, 0, XScale * Frame.AbosluteSize.X, 0)
but why need to do this stressful formula when he can just find another way to scale as an square
IgnoreGuiInset property is only for GUI to look better. Changing AnchorPoint should work in this case (I change AnhorPoint to 0.5,0.5 on all of my games and it looks the same everywhere).
Nope, I already changed the anchor point to {0.5,0.5} before I made this topic. Didn’t work.
yes, exactly!
No, changing the anchorpoint only changes where it will take it’s position from, and where it will scale from. if you’re making UI for in the bottom left, then your anchorpoint should be 1,1. otherwise it will scale and position itselve outside of the screen on different resolutions.
Yes, turning IgnoreGuiInset off makes it look nicer, but it doesn’t fix the issue
Try using a UIAspectRationConstraint object inside the frame/button you want to be square, the default value is 1 which means for every 1 pixel in the x axis, there is 1 pixel in the y axis.