Hello, I’m looking to make my UI flexible for horizontal and vertical monitor layouts specifically, but I can’t seem to get the behavior I’m looking for with existing features.
The problem:
My UI element is a dial in the bottom of the screen with a fixed aspect ratio (can’t stretch the sprite). In Horizontal monitor(16:9) mode it takes up 2/3 of the screen width, and as the resolution width shrinks to a vertical monitor(9:16) I want in to take up a higher percentage of the width until it reaches 100%, then stop.
The simplest way I can think of it is that I want the element to have a “max width” attribute that keeps it from getting out of bounds. But this doesn’t seem to be an option!
Horizontal Layout:
Vertical Layout:
What I’ve tried:
- Making the panel a Layout Element in a Horizontal Layout Group. I can put in filler elements to simulate a max width, but they still overflow the canvas bounds when squashed to vertical monitor size
- Using anchors, but this just creates a consistent border with the left and right bounds. I need this border to shrink until it reaches zero.
Has anyone had this type of problem before? It seems like I could write some custom scripting to make this work like I want, but I’m interested if the UI system supports it as is.