How to build a Unity game for Windows 10–Part 2
In part 1 of this series I showed you how to set up Unity, creating a prefab for the tiles and added the first script for generating a grid of tiles. In this second part I’d like to make the grid interactive and enable the change of colors for the rows and columns in the grid.
Tile behavior
Lets start by adding a new C# script to the scripts folder. I named this script TileComponent and opened it in Visual Studio. In the script we’re going to add some properties to the tile. First we need an array that will contain the various colors of the tile. We also need to keep track of the current color. This integer contains the current index of the the tile. To make things a little easier when changing the colors in a row and column, I also added two integers that are going to contain these.
By making these properties public we can change them from the Unity inspector. I don’t want the row and column properties to be edited in Unity, but I need them to be public to be able to access them from another class. The HideInInspector attribute marks fields hidden from the inspector.
Let’s switch back to Unity to add a few thing there.
To get the the script attached to the tile, first select the tile in the project explorer. Than, in the inspector, click “Add Component” and go to scripts. Alternatively you can search for it.
I added 4 colors to the array by setting the size to 4 and selecting the 4 colors I like to use for the tiles.
To get the tile to show the color, we need a material. Let’s add a new material to the materials folder by right-clicking on the materials folder and selecting “Create”->”Material”. I named my material “TileMaterial”.
Instead of using the default shader I want to use the “Unlit”->”Color” shader. This shader doesn’t have any other properties than the color.
To add the material to the prefab we need to drag the tile prefab to the scene hierarchy, open the “Tile” GameObject and drag the “TileMaterial” onto the “TileGraphic”.
Make sure the change is applied to the prefab by clicking on the “Apply” button in the inspector.
You can safely delete the “Tile” prefab from the scene hierarchy now.
Before we do another test run, let’s switch to Visual Studio and add some more code.
I added a new private method called UpdateColor. This method looks in the children of the GameObject where the script is attached to, the “Tile”, and finds a component of type MeshRenderer. The MeshRenderer contains the material. The color property of this material is set to the current color of the tile.
The Start method is executed when the Tile is activated and sets the color to its initial color.
I also added another method, NextColor. This method increases the CurrentColor index, but makes sure it’s reset to 0 when it exceeds the number of colors. After this change the color of the material is updated too.
Interaction
The game won’t be any fun until there’s some interaction. I’d like to handle the click on the tile in the LevelController we created in part 1 of the tutorial. The LevelController has access to all tiles. I’m adding a callback from the tile that the LevelController is going to subscribe to. The field is called “Clicked” and is an Action with two integer parameters which will hold the Row and Column of the clicked Tile.
To handle the actual click on the tile we can add the OnMouseDown method. Unity will automatically call this method when a mouse down event occurs.
Just in case there’s nothing that handles the click I added a null check. If something is handling the Clicked action it is called with the row and column.
To get the Tile to register click events we need to add a collider in Unity. Select the prefab and click the “Add Component” button. Search for the “Box Collider 2D” component and add that.
To get the color of the tiles to change, we need to keep track of the created tiles from within the LevelController. Let’s have a look at the code and go over the changes.
I changed the type of the “Tile” field to TileComponent. I also added a list of TileComponents to keep track of the ones created. In the Start method the list is constructed. I added a variable to hold the result of the Instantiate method in line 20. Because we added the Row, Column and Clicked fields to the TileComponent earlier we can set them here.
The TileClicked method contains some code that might look a little complex. I used the linq Where method to filter the list of TileComponents. I want all items where the row is equal to the row of tile that was clicked or where the column is equal to the column of that tile. I than convert the result back to a list to be able to use the ForEach method to go over the selected tiles. For every tile in the result I change the color the the next by executing the NextColor method.
One last thing before we can run the game. Because I changed the type of the “Tile” GameObject to TileComponent, we need to drag the prefab from the folder to property in the inspector in Unity.
You should be able to run the game now. Click around and the colors should change.
In part 3 we’re going to add some UI to show our current number of moves.