Good evening.
I am currently working on programming some mechanics that correspond with Unity UI elements. As I have never worked thoroughly with UI before, I am still in the process of learning. This question is in regard to the placement of UI elements relative to different screen resolutions and aspect ratios. Does Unity have native support and function for this or does the placement o UI relative to resolution/aspect ratio need to be manually programmed. If the manual route is what I need to take, would linear inequalities be an efficient way to handle this situation?
This is what first came to mind when I was brainstorming on how to address this, but I am not completely certain. I believe it would be possible with two simple linear equations but I haven’t actually attempted to work out anything yet, as I am still working on the actual UI elements themselves.
Check out the Canvas Scaler component: Canvas Scaler | Unity UI | 1.0.0
It has different options for how to deal with this. The other part of this is how you set up the anchors and positions of your UI elements.
1 Like
I typically design for one resolution while implementing UI anchors thinking about when changing aspect ratio, and then add the CanvasScaler as already mentioned. 9 times out of 10 you’re good. This works well when you have several independent UI windows/elements. If you have a single image of a specific aspect ratio which encompasses the entire UI, you may need to lock the game’s aspect ratio, but I haven’t really played with that.
One of the biggest wins I have found for smoothly handling a wide range of aspect ratios is to make three square boxes, one anchored to each “long end” of the screen, and one anchored to the center.
You use the AspectRatioFitter to force each box to aspect ratio 1.0, “Fit In Parent,” and max size and max anchors to corners.
Then put everything you want either left-justified in the left box, centered in the center box, or right-justified in the right box.
Here’s what it would look like on various aspect ratios. Red is left box, right is center box, blue is right box.
Same goes in portrait: topbox, middle box, bottom box.
And for the safe area, I keep all “important stuff” inside 16:9 or 9:16 box inside which these 3 boxes were put. The actual graphic background can go all the way to the corner.
Really cuts down on the fiddle-work with UI.
ipad:
iphone 16:9
iphoneX :
2 Likes
