Unity 4.6 - How to scale GUI elements to the right size for every resolution

Question

The new Unity 4.6 comes with a new GUI, when I change de resolution on Unity the UI Button scales perfectly but when I test on the Nexus 7 device the Button looks too small. Any idea how to solve this?

Answer 1

Unity's new GUI system uses "anchors" to control how gui elements (like buttons) scale in relation to their parent container.

Unity has a tutorial video on how to use the new "Rect Transform" component (where the anchors are configured) here: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform.

The last half of the tutorial is all about anchors. That page has links to the entire tutorial series. It's not too long. You should watch the whole thing.

Specific to your question:

The anchors are visible in your first screen shot. They are those 4 little arrows at the top left of your button.

Right now, your button is only anchored by it's top left corner.

The two right anchors need to be dragged to the right so that the right edge of your button is anchored to a space inside its parent container.

Depending on your situation, the two bottom arrows may need to be dragged down so that the bottom edge of your button is anchored as well.

The video I linked above covers all this in detail.

Lastly, for the font size to scale nicely on different resolutions, you will need to add and configure a reference resolution component to the base canvas of your UI, as Ash-Bash32 wrote earlier.

Update: The best way to add a Reference Resolution component is through the inspector window for the base canvas in your UI.

1) click the "Add Component Button" at the bottom of the inspector.

2) type the word "Reference" in the search filter field.

3) select the "Reference Resolution" component in the search results.