I’m trying to fix my UI so that it doesn’t move around on different resolution screens, but the anchors are breaking it and making it worse.
How can I stop the UI from being affected by the screen size and just stay where I want it to be?
In the pictures you can see where it’s supposed to be. What happens when you resize the screen in images 2 and 3 (granted that’s extreme, but it shows you the problem). Then the widget and the UI elements.
I don’t want it to do anything fancy, just not be affected by resizing and stay exactly where I put them. The anchors are the problem I’m finding.
Looks to me like the anchor for your number is at the top right. So wherever the top right of the screen is, your number will stay at a fixed distance to that. What is the anchor point for the rest of the UI that remains locked in place? You would just set the same anchor point. Probably the center point.
I tried using the center anchor and it just made it weird. When the screen is the right size, it’s fine. If it’s slightly longer or wide screen, it starts to look bad with the UI. Moving all the way to the right, it’s ok because it’s a mobile game. I’ll block screen rotation on it as well.
Just wish there was a way to make the UI lock to the top of the game screen and not stretch into the black bars you sometimes get.
Instead of canvas, try using overlay, maybe within a size box. Use justification and padding to position elements so they move appropriately when resolution changes.
