Join Kelley Hecker for an in-depth discussion in this video Set the color of a game piece, part of Build a Match 3 Game with Unity.
- [Voiceover] Next we'll add support for different colored game pieces, and this is where things get really flashy. Click on the scripts folder, right click, and create a new C# script called ColorPiece. Click on the prefabs folder, and click on our normal piece pre-fab. Go back to the scripts folder and add the ColorPiece script to our pre-fab. This is going to work just like our MovablePiece component, except it will set the color of the piece instead of moving it. Open up the ColorPiece script.
The first thing we need to know is all the different possible colors. I'm going to use an enum for that. Here I've added all the different possible colors, plus any because later, we'll have pieces that can match with any color. Next, we need an array, where we can assign a sprite for each color. I'm creating a struct called ColorSprite to hold our ColorType and our sprite, and I'm going to add the System.Serializable flag so that our custom struct can be displayed in the inspector.
Finally, I'll add a public array of ColorSprite objects, so that we can assign them in the inspector. Save and go back to the editor. Click on the normal piece pre-fab. In the inspector, expand the ColorSprite array, and set the size to six. In the texture sprites folder, you'll see sprites for each different color. Go ahead and assign the sprite for each color in the inspector. Yellow sprite for the yellow color, purple sprite for the purple color, etcetera.
Since our normal piece has to be one of these six colors, we won't worry about the any color type for now. Go back to the ColorPiece script. Just like we did with the piece type pre-fabs in the grid, we'll convert this array to a dictionary for faster look up. At the top of the file, add using System.Collections.Generic to give us access to the dictionary class. I'll then define a private dictionary, with types ColorType and Sprite.
In Awake, I'll loop through our ColorSprites array and add the keys and values to our dictionary. First I'll instantiate our colorSprite dictionary as a new dictionary with types ColorType and Sprite. I loop through all the structs in our ColorSprites array. I check if the dictionary already contains the current key, since dictionary should only have one value for each key. If it doesn't contain it, I'll go ahead and add the key-value pair. Now we have a dictionary mapping colors to sprites.
The last two properties we need are property for the color of the piece and a reference to the sprite. Knowing the color of the piece will allow us to easily compare it to other pieces for a color match, and having a reference to the sprite will allow us to change it. Here I've created a public property for our Color variable with a getter and a setter. The setter calls a function SetColor, which we'll define in a minute. I'm also going to add a variable to store the sprite renderer. I'll get a reference to the sprite renderer in Awake.
I use transform.Find to find the child game objected, named piece. If we drag our normal piece pre-fab into the scene, you can see that the sprite renderer is on this game object called piece. Go ahead and delete that. So once we've found the piece game object, we can get the sprite renderer component. Finally we just have to fill out the SetColor function. We set our color property to the new color, and then check if our ColorSprite dictionary contains a key for the new color.
If it does, we assign the sprite of the sprite renderer to the value stored in the dictionary for that color. This will change the sprite of our game piece depending on what color it is. We now just have to tell our grid to create different colored pieces. We'll add one more property to ColorPiece to get the number of possible colors. This just returns the length of our ColorSprites array that we set in the inspector. Open up the GamePiece script, and add a reference to our color component just like we did with the moveable piece component.
I'm going to copy and paste, and replace all the references to MovablePiece and movableComponent with ColorPiece and ColorComponent. In Awake, we'll get a reference to the ColorPiece component, just like we did with the MovablePiece component. And finally, so we can check if a piece is colored or not. We're going to add a function that returns a boolean, similar to what we did with IsMovable. We'll call it IsColored.
This will return true if the color component is not equal to null, meaning that it exists. The last step is to open up the grid piece, and after we initialize the piece, set the color of it. We check if the piece is colored, and if it is, we set the color of it to a new random color. Remember that our color type is an enum, meaning it can be converted to and from an integer. So we just need to get a random integer in the range from zero to the maximum number of colors.
Save everything, go back to the editor, and hit play. Now we have a board full of colorful fish. The next step will be filling the board and animating our pieces as they move.
Game developer Kelley Hecker covers topics like creating a grid-based game board, using inheritance to create different types of game pieces, adding obstacles and new levels, detecting matches and clearing pieces, and implementing a user interface complete with a score screen. By the end of the course, members will have a completed game and learned new techniques to apply to their next Unity project.
- Creating a game board grid
- Creating and scripting game pieces
- Filling the board
- Creating obstacles
- Swapping pieces
- Matching pieces
- Clearing obstacles and pieces
- Creating new levels
- Creating the user interface: HUD, game over screen, etc.