Making a Tile Game with UI in Unity 2021 URP
In this article we’ll use our UI skills to create a Tile Match game!
The basic concept will be that there are three types of tiles.
One will give health (add score), one will take health (deduct score), and one will trigger game over.
First, we’ll need some images to work with.
We can take advantage of the above free download of 50 icons for books for our prototype project.
You’ll need to either login through your social media or create a free account though.
Once you’ve downloaded and extracted the zip file, move the desired images to the Assets folder of your project.
Import Settings
Select each image file in the Unity Editor’s Project window and adjust the Import Settings in the Inspector window.
Set the “Texture Type” to “Sprite” and the “Sprite Mode” to “Single”.
Click “Apply”.
Notice that each image now has an arrow next to it with a child sprite now.
Initial Scene Setup
There’s quite a few elements here so let’s briefly go over them.
First of all, we have our Canvas of course.
We’ll then add an overall background image to our Canvas.
We’ll want a title element with a background image and text positioned at the top of our background.
Add a text field to display the current Score.
On an Empty element, name it “Grid” and add 15 temporary image elements to it.
This will make it so that we can get our layout how we like it in advance.
When done, disable or delete the temporary child image elements of the Grid element.
Now create a template element for each type of tile including Health, Damage, and Game Over.
Give each a child text element and two child image elements.
Use one of the image elements (last / bottom of the hierarchy) to hide the other image and text.
Then set your other image and text as desired to represent what it does.
Do the same for the other two types of tiles.
Tile Prefabs
Once you know what the Cell Size of your Grid Layout Group will be, you can properly setup your tile prefabs.
Move your Tile elements (future prefabs) to be children of the Grid element.
This breaks the existing TMP Text fields on the Tile elements.
Delete the text fields for each Tile prefab element and recreate them.
The end result should look similar to the above.
Make sure each text field is higher up in the hierarchy than the “imgHide” element.
Now enable each “imgHide” element and then prefab each Tile by dragging them into a Prefabs folder in the Project window.
For each image element “imgHide” on our Tile prefabs, add the button component.
The GameManager Class/Script
Now let’s create an empty game object outside of our Canvas called “GameManager”, create a new C# script called “GameManager” and assign the script to the game object.
The Tile Class/Script
Each of our tiles will hold some basic information that will be communicated to the GameManager class during gameplay.
Create a new script named “Tile” and assign it to the parent element of each Tile prefab as shown above.
We’ll create a few class variables to hold information relevant to each instance of a tile prefab.
This will include what position in the grid the tile is, the tile type, and a random value for score keeping.
Now set the Tile Type on each prefab Game Object to match those our script is checking for.
Add a new tag, “GameManager” to the GameManager game object.
The Tile Class/Script
Let’s add a class variable to store a reference to the image that hides the other image and text for each tile.
We also need to add a class variable for reference to our GameManager script.
I don’t think I’ll need to use the grid position getters and setters but it doesn’t hurt to have the functionality.
In Start(), we’ll find the GameManager using its tag.
OnTileClick() Method
This method will hook up to the button on the imgHide element as a Unity Event.
When the button is clicked, this fires off by sending data to the GameManager script.
Now assign the child “imgHide” element for each prefab and make sure to apply the overrides.
When done, you can delete all tile prefabs from the Hierarchy as shown above.
For each tile prefab, select the imgHide child element and hook up the OnClick() section to the parent element and the appropriate method as shown above.
The GameManager Class/Script
We’ll add using statements for Unity’s UI and TextMeshPro first of all.
Then we’ll add some class variables, mainly to reference instances of elements we’ll need to interact with.
We’ll also need a Game Object array to hold our instantiated tiles though.
RegisterTileClick() Method
As this is the only public method, it sits above the rest.
This will be called when a tile is clicked.
It will then use the passed in data to modify score or end the game.
We know that when the game starts we’ll need to generate a random grid of tiles so we set that to run in Start().
The rest should be fairly self-explanatory.
Assign the fields on the GameManager script component as shown above.
If we run the game, we should see everything working as desired!
Now, if we wanted to pursue this further, we’d add a button on game over to display and allow restarting the game.
See you in the next article!
