Why does this happen:
https://gyazo.com/10c614197f1a19c43182f8e62959b48f
If the window is scaled smaller, the UIAspectRatioConstraint causes the UI to go to middle
Could you show more of your screen? Itâs hard to confirm where the middle is. Also, what are the properties of your frame and UIAspectRatioConstraint?
If youâre talking about how itâs a little delayed when going to the correct spot, thatâs just how UI works when the screen size changes. Itâs probably some sort of internal optimization or because of a limitation.
UIAspectRatio holds the ratio of the given axis no matter what size the other axis is. The ratio is defined by the âAspectRatioâ property. Currently you have it set to have an aspect ratio of 1 which will force your parent frame to be a square. You also have the dominant axis set to width so your height will be forced to match your width.
What I do before giving my UI an AspectRatioUI is to first calculate the aspect ratio. There are many plugins that can do this for you if you prefer but you can also just divide the AbsoluteSize of the frames width by height (x / y) and what properties I found to work the best (especially for mobile devices) is to change the DominantAxis to height and the AspectType to ScaleWithParentSize.
Iâm not exactly sure what you mean by your frame moving to the center but it doesnât look like your frame isnât doing anything wrong, seems like the aspect ratio is right at work!
1 Like
what i mean is, if you look at the ui on the right which has the aspectratio compared to the ui at the bottom which donât have aspectratio, when I resize my screen, see how ui at bottom stay in that position finely, but the ui on right with aspectratio looks as if it gets smaller and pushed towards centre
Can you show me a screenshot of your frames properties? I will have a better understanding of what is going on. What I need is the AnchorPoint, the Position and the Size of your frame.
I just realized that your cooldown bars are not contained within its parent frame. I was confused why your frames position was set to 0 on the X axis.
But visually what looks like is happening is that the cooldown bars are being pushed upwards and not towards the center. Unless the cooldown bars being glued to the right edge of you screen is an unintended effect (which I donât see why).
Iâm still a bit unclear on what result you are looking for but for starters maybe try putting your cooldown bars within its parent frame and then position the parent frame to the right side of your viewport?
Best way to do this is to set the Anchor Point on the X axis to 1, then position the frame on the X axis scale to 1 as well which will basically perfectly put your frame on the right side of you screen. You can offset the frame by a few pixels back if needed then convert it back to scale.
Additionally if you want to keep your frame to be centered on the Y Axis, then set the Anchor Point on the Y Axis to 0.5 (basically the center point, or 50% point of your frame on the Y Axis), and then also set your Y Scale position to 0.5 to perfectly center it which will stay centered no matter how you resize your viewport.
by putting cooldown bars into parent frame do you mean like this
lets say the black square is the frame, i put the cooldown bars into that area?
or to follow the steps you stated?
Yes, generally you want your UI to be within the bounding box of your frame instead of offsetting it across the screen since that causes unintended results.
hi, i did what you said and set anchor point X to 1 and position scale X to 1 on frame, and also put the cooldown UI within the frame box, but when i resize my screen the cooldown ui goes upwards, but if you look at the bottom UI notice how that doesnt go upwards, it seems when i add UIAspectRatio then resize it causes the cooldown UI to go upwards https://gyazo.com/d3c8e4f13da50c565460cc622a76f6c4
Reason why i have a problem with this is because, if someone is on ipad for example, their cooldowns would be half way on top of the screen which is very awkward.
Compared with what I want it to be like on here: (AKA not halfway on top of screen)
Additionally, can you explain to me what anchor point is useful for and why i set it X to 1
Anchor point is the origin point of your UI, basically the frames positioned is represented by the position of the anchor point. So a (0.5, 0.5) anchor point would be the very center of your frame, meaning that if you positioned your frame at (0.5, 0, 0.5, 0) it would be perfectly centered.
That being said, I donât think UIAspectRatio causes your UI to shift like that. You can test that by removing it and see if it still does it.
I donât exactly understand the hierarchy of your UI system but I have a sneaky suspicion that the parent frame might have a heavy influence on how this frame is behaving because normaly UI should not shift up like that. At least I never had this type of issue before so its a bit hard to figure out the issue.
1 Like
thank you for your response, i appreciate the help you have given
regarding the issue, the parent of the frame is the screengui, would you suggest its that?