Unity UI: Creating A Grid
INTRO
This article will cover how to populate a grid using Unity’s UI Grid Group Layout and check to see if the correct tile was click depending on the Coordinates given.
UI SETUP
GRID
Create a Canvas UI component and add an empty game object named “Grid”. You will add a Grid Layout Group component, you might need to search for it.
Read a previous article of mine to learn more about Grid Layout Group and I will cover some of the properties in this article.
I am making a coordinate grid, so I want my grid to start in the Lower Left and will align the tiles when they are created in the Middle Center of the group. I do want my grid to fixed, but I will be modifying the Fixed Column Count via script. This will ensure the grid will not go outside of the screen.
TILE
Create a UI button called “Tile” and this will have a child text component. This text will hold the coordinate position of the tile in the grid. Turn this into a Prefab.
COORDINATE TEXT
Lastly, add a Text element to the Canvas. This will display the Coordinate tile the player will need to click on.
CREATING THE CHECKBOARD GRID
GRID MANAGER SCRIPT
Create a script for the Grid game object and name it “GridManager”. This will need access to the UI and TextMeshPro libraries.
Declare the following variables:
- GridLayoutGroup _grid = this will give us access to Grid Layout Group component, so we can modify its properties and transform.
- Tile _tilePrefab = this will hold the Tile prefab we create, so we can instantiate it to create the grid.
- Int _width & _height = these integers will determine the dimensions of the grid when it is created.
- TMP_Text _coordinatePairText = this will allow us to display the coordinates of the tile that the player will need to click.
- Int _randomX & _randomY = these integers will hold the randomly select coordinate values for their axis.
Assign the following components to the scrip in the inspector.
GridManager Singleton
We are going to turn the GridManager script into a Singleton. This will allow us to access it from other scripts without each game object knowing about one another.
This will come in handy when it is time to check if the player has selected the correct tile and it is time to pick a new coordinate.
Setting Width
In start, we are going to access the Grid Layout Group constraint I mentioned earlier and set it to the Fixed Column Count then assign count amount to the _width value.
When the width value is assigned in the inspector this will set the amount of tiles that can fit in each row of the grid.
NESTED LOOPS
Lets create a method that will handle creating the grid called “GenerateGrid”. First, we will use a For Loop that will iterated through the _height value.
We will nest another For Loop with this one iterating through the _width value.
INSTANTIATE TILE PREFAB
Each time through the Loops we are going to create a Tile and place it on the grid’s transform. We don’t have to worry about give each Tile an exact X & Y because the Grid Group Layout will handle the placement of these tiles.
Caching the Tile Prefab will allow us to give it a name. We want to name it the current X and Y index values of the Loops.
Just to make sure the naming of the Tiles match with their placement in the grid we will cache the Text element of each Tile Prefab and grab the text component. From here, we can set Tile text to the name of the Tile that was just instantiated.
At this point, when you call the method in the Start, the grid will be created but it will be a giant white square.
ALTERNATING TILES
Lets create a checkerboard pattern that will alternate the color of the tile as they are created.
We will need to create a bool variable that will check if the current X index is even and Y index is odd OR the current X index is odd and the Y index is even. If one of these conditions are true then the bool will be true.
We can pass this bool value to a public method will create in the Tile script with that bool as a parameter
TILE SCRIPT
We will need the Unity Engine UI library and declared the following variables.
- Color _baseColor & _offsetColor = this will allow you to assign the two colors you want your tiles for the checkerboard.
- Image _image = the button has an image component that we will need to assign the color to so it will change.
- String _currentCoordinateName = this will hold the current coordinate that the player will need to click on.
Pick your colors in the inspector and assign the Tile (which has the Image component).
SET THE COLORS
In the method we declared in the GridManager script with the bool parameter.
We set the image color to the offset color if isOffset is false and if its true it will be the base color. Now we should have the checkerboard look when we run it!
SELECTING & CHECKING
GRID MANAGER SCRIPT
For picking the coordinate, we will create a public method and assign a random number from 0 to the _width value to the _randomX variable and a random number from 0 to the _height value to the _randomY variable.
Now that the X & Y coordinates have been selected we will display them by setting the Coordinate Text on the Canvas to those same values.
Call this method in the Start after the Grid is generated.
When the Tile is clicked, we will need to know the coordinate pair that was selected. After those values have been selected, we can created a public method that will return a string value.
The string value it will return is the coordinate pair text that was previously created.
TILE SCRIPT
In the Tile script, we will create a public method that will be called when the UI button is pressed. This will take in a Button parameter, so we can get the name of the button that was clicked.
We will grab the Coodinate Name string from the GridManager script using the Singleton and assign it to the _currentCoordinateName variable.
If the button name that was clicked is the same as the current coordinate name we can then call the PickCoordinate method by using the GridManager Singleton.
If it is not correct, welp try again.
