Monthly Tutorials for Beginners
Welcome to my second tutorial for beginners! This is going to be a simplified version of the game, Whack-a-Mole. We'll have buttons that appear and disappear and the user must tap them while they are visible in order to score. In this tutorial we will cover a lot of the concepts from the previous tutorial, but this time taking them a step further. If you are just starting out in Unity3D and C#, I would suggest going through my first tutorial as it will guide you through getting your IDE set up and familiarizing yourself with the Unity interface.
In this tutorial we will be covering these coding concepts:
We will cover these Unity basics:
By the end of the tutorial, hopefully you'll better understand what each of these mean and how to get creative with them in your own projects. As always, you can find the complete project here on my GitHub. Now let's dive in!
Starting the Project
First let's create the project, just as we did before. You can save it where you want and name it what you want, just make sure you select "2D".
Every project should be clean and organized to help you and your contributors easily navigate. Let's create these four folders under Assets, where everything will be added later.
Right click 'Assets' and "Add Folder" for each of the following:
Now let's create each of the scripts that we will write for this project. Under your 'Scripts' folder, right click and 'Create' a 'C# Script'. Do this for each of the five scripts below:
This is going to be a timed game, so we need to count down and display the time remaining to the user. Our first script will handle the count down, displaying the time and what happens when time is up. Take a look:
In this script, we want to increment the score each time a user whacks a button in time and also keep count of how many they miss. The script will be called from our ButtonManager. Let's break it down:
We will be creating two Scenes in this project to swap between so instead of writing their names out in code, we can create their names as enumerators and reference the enums instead as strings. Where possible, I avoid writing out repetitive strings in my code, so I either declare them as vars first or in the case of Scene names, I use enums.
Now that we have the scripts that we will need to access into, let's create our primary script. This script will link to each of our buttons so that it can handle the press events and it will show and hide the buttons when the player starts the game.
Finally, when the game is over we want to show the user their scores and give them the option to restart the game.
Hooking Up the GameScene
The moment you create a project in Unity, it creates your first scene for you. This will be our 'GameScene'. Go to File->Save and when the dialogue pops up make sure to save this scene as 'GameScene' and in our 'Scenes' folder.
First we need to hook up our scripts to a game object. So create an "Empty" game object and name it 'GameManager'.
Now let's add our scripts to the new game object:
We will hook up each var in the next section, but for now make sure you have these 3 scripts added to the GameManager.
All of our UI elements need a Canvas, so first go to the Hierarchy and click Create->UI->Canvas.
We will be adding 10 background images and 10 buttons, so in order to keep this clean let's create two 'Empty' objects under our Canvas. Name one 'Placeholders' and one 'Buttons'.
Now we create our Time and Score labels under our Canvas and change their names and text like this:
Under our Canvas->Placeholders empty object we need to create 10 place holder images that will mark the areas to the user where the buttons will pop up.
You can make them any size and color you want, just space them evenly apart. Here's how mine are set up:
Create the first button how you want it to look and make sure it overlaps the placeholder. Clear out the text in the Button's text object too, so that it is blank.
IMPORTANT: This time make sure you set the color of the button to green, exactly how I have it here and add the 'OnClick' event and link it to our 'GameManger', linking it to the "PressedBtn" method. Now we need to copy and past this button 10 times and place them over each of your placeholder images.
Your Hierarchy should now look similar to this:
Finally add one last Text object to your Canvas. This will be the text that we display to the user when the game is over. Rename this object "GameOverTxt" and make it big and bold text, resizing the transform to fit.
Once you are done making the text how you want, make sure to check the box next to it's name. This sets it as inactive, so that the user will not see this when they enter the game. We activate it in code when the game is over.
Now that we have all of our elements in and our scripts attached to the GameManager, let's hook up everything.
Here we can drag and drop all 10 buttons to the ButtonManager in one step:
The first scene the user will see will have the previous scores and a 'Retry' button that will drop the player into a new game. Save the current scene, and then we need to create a new scene called 'ScoreScene'.
Add a canvas to this scene along with three Text Objects:
Place everything in the scene how you see fit and make sure the text boxes are long.
Add an 'empty' game object to the scene and call it "SceneManager". Attach our "SummaryManager" script to it.
Connect our three text boxes to the Summary Manager by dragging and dropping each one to their proper field. Save your scene changes.
Prepping the Build
We have our scripts written, our game objects placed and everything hooked up, but before we can play we must add the scenes to the build and drag them in order from first to last.
Go to File->BuildSettings and add both scenes, but make sure the ScoreScene is first.
Hit the 'Play' button at the top and you should be able to play a round of our take on Whack-A-Mole.
You finished your first game! This is the simplest game, but understanding these concepts will open new possibilities. I hope you enjoyed this and you can find the full project with fully commented code here.