Any tips on how to place your anchors and pivots so the UI element can scale multiple resolutions?

Do you have UI elements that scaled nicely across multiple screen resolution sizes? If yes, how do you place your anchors, pivots, and your boundaries of your UI element?

Placing, as in, how would you position them using anchors, pivots, and boundaries, so that when the screen resolution is changed, your UI element is similarly placed just as intended?

Thanks in advance.

 

If you only care about positioning you can just center all four anchors and use an absolute size (offset).
If you also want the element itself to scale along 1:1 you would place the anchors at the corners of your element.

(In case you need the latter, perhaps this script might be a bit of a timesaver; it adds an "Anchors to Corners" and "Corners to Anchors" menu item and hotkey.)

 

What about this one where I want to place a button after an input text, and I want them to fill up the screen, but don't want the input text or button to overlap each other?

From this set of pictures, the lower the picture, the game screen resolution increases.

 

Putting the anchors at the corners of each element should give you the desired result. When you do that, the element will always take up the same percentual size of its parent RectTransform. Because of that "rule", the spaces between these elements will also stay the same relative size.

 

When you mean "each" one, do you mean all anchors, anchors of children and parents, all in one corner, at a spot somewhere in/on the Canvas? Or do you mean all anchors should be placed in the corner, like shown below?



Each blue circled anchors are anchors of the UI element. Left anchor is the Input Field, Right anchor is the Button.

 

Ah, apologies! You can actually split the anchors! Try clicking and dragging just one of the anchors' triangle markers, and you'll see what I mean. Like I said in the other thread though, please take a look at the official video tutorials for this, as it's all really well explained there. =)

Thanks for the screenshots though, those are a great help with "debugging" these kind of things!

 

The tutorial videos shows what the capabilities of the anchors and pivots can be used with the UI element systems. However, they do not specifically tell the developers on what useful placements of the anchors can be used, or how developers would go about it for multiple screen resolutions. More or less, they just skipped over multiple screen resolutions in its entirely.

This is why I created a thread asking for tips on how to go about all the placements, because the tutorial videos never tells more about the subject.

 

Mucking around with the UI on RedBull made me realized I don't need to put the anchors attached either in one corner or have it touch another anchor in a straight line. I could've just put the anchors near a spot not on the edge of the parent UI element, with having all of them not touching each other, the UI element would be scaled accordingly with the parent / Canvas. Somewhat solved though.

 

Same problem -_-