Unity UI: Grid Layout

Intro

In this article we are going to cover how to utilize the Grid Layout Group UI component in creating a bonus game. This game will spawn 10 items that will randomly pick 5 different gem values and populate them into the grid. The user has 3 clicks to pick cards to get the most points.

Setup

In the Canvas, create an empty game object (Grid) and add a Grid Layout Group.

For these items or cards to turn over we are going to create an empty game object. There will be two image child game objects with one being the gem image (front side of the card) and the other is the cover (back side of the card).

On the Cover Image, we want to also add a Button element to it too.

When the cover button is click are will disable the cover to expose the gem image or card face. You will do this for all of your different items or cards.

When objects are child to the Grid, the Grid Group Layout will take over and layout the objects to the Grid’s settings.

The Grid’s Constraint allows you to force the objects to find into fixed columns or rows

When objects are added to the grid they no longer can have their own individual size or native size. They all need to be the same size for the Grid system to be able to automatically position them. You can adjust the Cell Size, but this will be applied to all of the objects.

The Spacing Size determines the how space there will be between the objects in the Grid going left/right (X) and up/down (Y).

For the rest of the UI layout there is a Title Image with Text, Score Image with label text & score text, Clicks Image with label text & click text and an Overlay Image.

The Overlay Image is on top of the reset of the Canvas objects and stretch across the entire Canvas. This Image will be transparent, so set in the Alpha to 0 in the Color field and make sure Raycast Target is enabled. This will allow this to be clicked on and since it is on top of the rest of the UI objects it will act as a shield and prevent the user from click on anything else.

Item Script

This script will be attach to each individual item/cards. We are using the UI library and we are going to declare a few variables:

1. Int variable that will determine the value or amount of points the item is worth,
2. Game manger variable which will allow us to send that amount to the script that will add to the total score and
3. Image variable that will hold the Cover component so we can turn it on and off.

On each of the items/cards assign the Cover Image of the item/card and give it a value amount. Don’t worry about assigning the Game Manager

Since these items will be created when the program starts and they will need to find the Game Manager by passing in the object name that has the GameManager script and get the component.

Create a public method, so we can communicate to the Game Manager script and send the value of the item/card to be added to the total and displayed on the UI.

We do this by calling the method on the Game Manager, ScoreTotal, (haven’t created it yet) and this method will take in an int parameter. We will pass in the _value of the item/card into this parameter.

Next, we deactivate the Cover Image of item/card to display the image beneath it.

On the Image Cover, which has the Button component, when the Button is clicked we will call this method we just created.

Game Manager Script

The Game Manager script will be charge of keeping track of the score, how many clicks are left and disabling clicks when they are out, and displaying this information.

We are using either/both of the UI and Text Mesh Pro libraries. Create some of the following variables:

1. Text types that will hold the score and clicks remaining text
2. Int types that will hold the total current score and how many clicks the user currently has.
3. Image type which give us access to the Overlay, so we can enable it when the user is out of clicks to prevent the user from clicking on anything else.

On the game object that has the Game Manager script, assign the Score text, Clicks text, and Overlay to the script in the inspector.

On start, set the score to 0 and set to the score text to the score. Do the same for the clicks and disable the Overlay Image, so the user can click on the items/cards.

Now, lets create that public method we were calling from the item script. Again, this will take in an int paramenter.

If the user has more than 1 click left, we add the value of the gem/item/card to the score, subtract 1 from the clicks remaining and update both of the text fields. Since the Button is clicked first this method isn’t called until after the Image Cover is turned off, so if we check to see if the clicks are greater than 0 the user will actually have 4 items to be selected.

Once the user has used their 3 clicks, we activate the Overlay Image that prevents the user from clicking on anything else. Since the clicks amount stops subtracting when it reaches 1, in order for it to display 0 we are simply going to subtract 1 from the clicks amount to get to 0. This is messy, but it works.

Randomize Items

Each time the Bonus Game starts, we want to randomly pick which items/gems/card will be placed into the grid.

Make prefabs of each of the items.

Make sure they are all updated and delete the prefabs from the screne.

In the Game Manager script, we are going to declare a GameObject type variable and a GameObject array.

Assign the Grid game object to the script and populate the Item array with the item prefabs.

On Start, using a For Loop that will iterate 10 times we are going to create a temp variable (item) that will spawn a random item prefab. Now that the item has be spawned, we can now child it the Grip using that temp variable.

My initial Grid settings did not carry over, so when the items were instantiated into the grid I had to update the spacing and size values.

You can see how each time the program starts the grid is now populated with a new set of random items.