Scaling GUI is something I have always had a problem with, but simply put I want to scale my GUI in the same way Roblox does it. I have noticed that Roblox’s CoreGUI, when the screen size is changed, it stays in the same position and keeps its size, but my GUI just maintains the same position, but not size or if I use UIAspectRatioConstraint it will maintain the size, but not the position.
This is kind of hard to explain so I made this example:
I copied Roblox’s More Options button and pasted it into StarterGui, it ran exactly the same as with all my other GUI, it kept its position and its size just decreased on the y-axis. So I added an UIAspectRatioConstraint and this is what it ended up looking like:
Normal Screen Size: (My copied More Options button is overlapping the Roblox More Options button)
As you can see the Roblox button just shifted, as for my button just shrank. This tells me that Roblox is using a script to change the size and position, so if anyone knows a formula to re-create Roblox’s scaling method or just a scaling method I overlooked, please share!
It actually doesn’t have a script to resize, you just need the right properties.
Make a Frame with this size and position, this will be the holder of the UI and is important.
Then you just put in any UI object like a Frame or ImageButton inside that holder Frame and set the size to these properties.
Changing the position in multiple of 50’s will move it 1 button across. I recommend making it an ImageButton with the image being a bit smaller, as the buttons have no space between them, the images just don’t fill it all the way.
Did you make a top bar frame with position 0, 0, 0, 2, size 1, 0, 0, 36, then a button inside that frame with position 0, 50, 0, 0, 0 and size 0, 50, 1, 0?
Yes, but if you put an offset, the UI won’t scale for all devices. If you want it to scale for all devices you’re going to have to use scale not offset.
We’re trying to replicate the Roblox CoreGui Buttons, which don’t scale 100%, they use half offset and half scale, like I showed in the screenshots which I grabbed from the CoreGui.
We can make our own top bar and buttons using the same properties as the CoreGui ones, they won’t be part of the CoreGui at all, but it’ll look like it.
Well as you saw, I created a frame and button, with properties you gave me, and it didn’t look right. So either I did something wrong or we’re missing something.
I think you can do this by using scale instead of offset for the size and position of the GuiObject. And if it is an ImageLabel or ImageButton, you can change the scaling type to “fit”.
