koobas.hobune.stream
Attach UI elements to screen corners
I have a few UI elements that need to be set to specific screen areas. I've tried a variety of layout objects and content fitters, but none are doing this very simple thing that I'm hoping can be done without adding more code.
I have a button that should always be in the corner of the screen, regardless of screen size. Whatever the lower right screen coordinate happens to be re-sized to, should be this button's lower right screen coordinate. I have another button that goes above that one.
I have similar for the lower left and lower middle, but I'm sure if I can get one working, I can get the others working.
First attempt:
Canvas (Scale with screen size; match width or height; 0.5)
Lower Right Panel (Vertical layout group: Lower right, No force expand)
Lower Left Panel (Similar)
Dynamic Panel (Similar for center; Has a horizontal layout group instead of a vertical one; Buttons are generated in code at runtime and appear centered along the bottom)
Content is childed to those panels.
This works only in one aspect ratio. If I resize the window by a few pixels, the buttons begin to slide off screen sideways & up or down and towards the center.
I've tried the content fitter, and it just moves everything to the screen's center.
I've tried adding a content fitter to the lower right panel. This keeps the buttons in the screen, but they still slide up or left away from the lower right corner when the screen is resized. Settings: Fit in parent; 2.
I've tried doing both in separate panels, one in the other, both having vertical layout groups.
The fact that Aspect Ratio Fitters have an aspect ratio field already told me that it wasn't what I need, since I need aspect ratio to be fluid, not specified. Whatever the window's size is, I need the distance to the corner not to change at all, not even by a pixel. I know I can code this, but I really want to be able to use the UI elements and this is such a simple and standard thing that there must be some easy way to do it that I'm overlooking.
So, what am I overlooking?
If all you need is to place two buttons in a corner, then the solution is pretty simple, you only need to set your buttons' anchors right.
The lower right corner is X = 1, Y = 0, so you have to set the anchors like so :
First button (bottom right) : Anchor Min : (1, 0) Anchor Max : (1, 0)
Now your button is anchored to the lower right corner, whatever the aspect ratio of the screen is.
Then to display it right, set the Pivot to (1, 0) : that way the whole button will be displayed on the screen. You can now change its width and height.
For the second button, do the same thing (Anchors and Pivot to (1, 0), set width and height as you like) and put it above the first one by changing its Pos Y (for example, set Pos Y to your first buton's height + 10). That way, your two buttons will always be displayed in the same position.
Check the Manual page for multi-resolution UI for further information.
So basically, it's the canvas resizer that's messing me up, and I need to take everything out of the canvas, then anchor everything properly. I will try this today, thanks.
This does technically fix the problem that I've stated. I've even been able to continue to use the panels with the layout groups to keep them automatically arranged by giving these settings and a content size fitter to the panel.
They're completely invisible now, so I've got that to debug... But I can see they're in the right spot. Thanks for your help!
I fixed my invisibility problem by putting them back in the canvas, but adding a layout element with "ignore layout" checked, so it ignores what the canvas changes & acts like it's outside the canvas, but is in the canvas, so it draws on the screen.
