CODEWITHSUNDEEP
unity-game-engineunity-editor
soleil
soleil

Reputation: 13135

Grid with auto-sizing cells in Unity

In Unity I want to achieve the following in a UI/Canvas Scene:

Header text - use 10% of the available screen height, so the font should size accordingly.

In the remaining 90%, add two rows, each with three Cat gameObjects. The height of each object should be (H - 3s)/2, where H is 90% of the screen height, and s is the spacing between each object. This grid should be centered horizontally and vertically on the screen.

Is this possible in Unity? I have messed around with the Grid Layout Group component but it seems very limited - there's apparently no option for automatic cell size. If I have to do this with a script that's fine too.

Upvotes: 0

Views: 601

Answers (1)

hijinxbassist
hijinxbassist

Reputation: 4711

First set the canvas scaler component to scale with screen size. Enter your reference resolution, set to the same size as your edit window resolution. Now the canvas has a reference it can use when scaling the ui.

canvas scaler edit resolution

For the structure of your ui, create an empty object in the canvas to act as a wrapper. Set its size to the total size you want this part of the ui to occupy.

Next add another empty object to the wrapper called header. Anchor it to the top of the window and set its height to 10% the total height of the window. Add a child TextMeshPro text element and set its anchor to stretch all and set the 4 sides to 0. Configure the text to your liking, and check the "Auto Size" checkbox.

Next create another empty object inside of the wrapper for the body. Set it to stretch all and set the "top" to the height of your header and the rest to zero. To this body wrapper, add the "vertical layout group" component.

Now add a new empty object to the body called row. This object will be controlled by the vertical layout group on the body. When you add more rows, they will automatically stack. You can control how the rows are scaled and positioned from the vertical layout group component.

Now in the row add child objects. If you want those children to be equally spaced, add the "horizontal layout group" component to the row. You can control the child layout and scale from this layout component.

ui hierarchy

For adding spacing, the "spacing" field controls space between elements. To have space before and after, use the "padding".

ui

These 2 layout group components are extremely useful, and can be nested for fine control over specific portions of your ui.

Upvotes: 0

Related Questions