I’m working on the main menu for my game, and as I was doing this I was of course learning new things and what not. At first I had the problem of the screen; when made larger made my menu stretch. By reading through the Wiki I discovered UIAspectRatioConstraint, which seemed to fix the menu-stretching issue.
But now two things are happening:
The menu doesn’t resize to scale to the screen, I have made all of the elements scaleable and not offset using percents, but it won’t scale?
The menu doesn’t stay in the centre of the screen, it stays relative to the left side, and does not move.
I realize I’m probably making some dumb development mistakes, I’m rather new to the UI development world…
Check out my UI Design Starter Guide for a general tutorial on UI design. Sounds like it might be helpful.
All you need to do to make something scale at the size of the screen is set the size to {1,0},{1,0}.
If the menu is being affected by a UIAspectRatioConstraint, the constrain will almost certainly be the thing affecting the size. For example, a 1:1 (square) ratio probably won’t fit into your average 1080p monitor.
Other constraints may be affecting it also; a UIPaddingConstraint could actually decrease how large {1,0},{1,0} is, a UISizeConstraint could be setting a maximum/minimum size, etc.
In my tutorial I cover AnchorPoints. This should be what you use.
Are you trying to get something to cover the whole screen, or just cover a certain portion of the screen across different sized screens?
I’ve attached screenshots to better display what my objective is.
I would like this menu to be centered, and become larger/smaller depending on the screen size, but maintaining proper ratio so that the images do not become distorted.
I’m going to review your guide and hopefully try your suggestion of AnchorPoints.
I made the AnchorPoint the Center, and my position is {0.747, 0},{0.5, 0}, which is centered in the UI Editor in Studio. But once I press test, and if I close my ToolBox, Explorer, etc. the UI doesn’t stay centered.
I have probably made a silly mistake, any thoughts?
I assume all the menu elements are in the same container/frame. If so, to properly center it you actually want to set AnchorPoint to (0.5, 0.5) and Position to {0.5, 0, 0.5, 0} (the actual center of the screen regardless of resoultion).
However, keep in mind that as long as you use Scale it will inherit the parent’s position, so if the frame containing the menu elements is not a direct child of the ScreenGui or a Frame which [covers the entire screen OR is centered], your menu frame will also be offset by the same amount the parent frame is offset.
Firstly, you’d want to get the ratios right. I assume you have done that correctly.
Set the scale of their parent frame to size in scale you want it; set its AnchorPoint and the rest.
Make sure to set the scale of the buttons/frames/whatever they are to their portion based on the parent frame NOT the full screen.
And the frame is a direct child of ScreenGui? Or does it have a parent frame? How is the parent frame set up, in that case? Show us your Explorer, that’s usually helpful.
What is the AbsolutePosition if you set Position to {0,0,0,0}?
And what is the AbsolutePosition if you also remove the UIAspectRatioConstraint? That might be
Okay, this seems to be an issue with UIAspectRatioConstraint. Remember that all constraints modify the size of the parent. It apparently also modifies AbsoluteSize of a ScreenGui (I didn’t even know this was possible?! Most likely unexpected behavior). So when you had the constraint as a direct child of the ScreenGui, the ScreenGui actually no longer covered the entire screen.
That’s why the Position {0.5, 0, 0.5, 0} was no longer in the middle but actually like 1/3rd of the screen.
I fixed the issue by moving the constraint inside the GUIMain, but then you probably want to adjust the properties of the constraint a little.
The ScreenGui also does not automatically update when you move the constraint out of it, so you have to duplicate the ScreenGui for it to get it’s original AbsoluteSize back.
