Create a Fast Paced Math Game in Unity – Part 2

Create a Fast Paced Math Game in Unity – Part 2

Check out the other parts to this series:

In the previous blog we created our obstacles, so let’s begin spawning them.  If you haven’t read Part 1 yet, it’s highly recommended. Many of the features in this blog will require what we learned in Part 1.

You can download the project files here.

Spawning the Obstacles

First, create an empty GameObject called “GameManager”. This will hold our obstacle spawner as well as other scripts. Then, create a new C# script called “ObstacleSpawner” and attach it to the game manager.

GameManger object added to Unity

This is how it’s going to work. When we spawn an obstacle, we’re first going to decide if it’s going to come from the left or right hand side of the screen. Then with that side decided, we pick a random Y axis value from a pre-defined min and max. The the object is spawned and thrown across the screen.

The “obstacles” array will hold all of the obstacle prefabs. “minSpawnY” and “maxSpawnY” is the vertical range to spawn objects along. “leftSpawnX” and “rightSpawnX” are the X positions of the left/right side of the screen.

We’re also going to be pooling our obstacles. This helps with performance as we Instantiate all of them at the start of the game.

Now in the “Start” function we need to calculate the left and right spawn X variables. To do this, we first need to get the width of the camera. Unfortunately that’s not something we can just get, so we just need to do a bit of math. Since the middle of the camera is X=0, we can determine that left spawn X will be -camWidth / 2, with right spawn being the same but positive.

Let’s also call the function to create our pool, which we’ll be creating next.

“CreateInitialPool” instantiates a set number of obstacles, deactivates them and adds them to the “pooledObstacles” list. We’ll then get objects from that list later on to ‘spawn’ them.

“GetPooledObstacle” returns an inactive object from the “pooledObstacles” list. We’ll be calling this function instead of “Instantiate”.

Now it’s time for the “SpawnObstacle” function, which will spawn a random obstacle.

First, we get an available obstacle from the “GetPooledObstacle” function and set a position for it from the “GetSpawnPosition” function. We’ll get to that soon. Then with the spawned object, we set the move direction to be horizontally across the screen.

The “GetSpawnPosition” returns a Vector3, which is the random position for the object to spawn at. Inside the function, we first determine the X position. This is a 50/50 chance of being on the left or right. Then the Y position is a random value between the min and max Y spawn range.

To spawn these overtime, we check each frame in the “Update” function if the time between now and the last time we spawned is more than the spawn rate. If so, we reset the last spawn time and spawn an obstacle.

Now back in the editor we can fill out the script variables. Add all of your obstacle prefabs into the obstacles array. I set the Min Spawn Y to be -3.5 and max to be 2. This spawns them just of the ground to just below the ship. For the spawn rate I set it to 0.75, but you can test and tweak this value.

GameManager object in the Unity Inspector window

Here’s how it should look like when you play the game! Make sure that you get stunned when you collide with the obstacles.

Player jetpacking and avoiding enemies in Unity game

Creating the Base Problem Class

The game manager is going to be a script which holds all of our math problems and runs the game’s loop.

So first up, create a new C# script called “Problem”. This is going to be the base class for our math problems.

Under the pre-made class, create a new enumerator called “MathsOperation”. For our game the format is going to be: [number] [operation] [number]. The way the two numbers are going to be calculated together is determined by the operator. Addition, subtraction, multiplication and division are the ones we’re going to be using.

We then need to change the pre-made “Problem” class. First, remove the “MonoBehaviour” text at the end of the class definition and add “[System.Serializable]” just above.

We remove mono behavior because we don’t need any of Unity’s pre-made functions and for the fact that this script isn’t going to be attached to any script. The System.Serializable property makes it so that this class can be displayed in the Inspector with all it’s values laid out to edit.

With our variables, we have our two numbers and our operator. “answers” is a float array which will hold all the possible answers, including the correct one. “correctTube” is the index number of the correct answer in the “answers” array.

Scripting the Game Manager

Now that we have our problem class, let’s make the game manager. Create a new C# script called “GameManager” and attach it to the “GameManager” object.

Here’s our variables. “problems” is an array holding all of our math problems. “curProblem” is the index number of the “problems” array, pointing to the current problem the player is on.

We also want to create an instance of this script (or singleton). This means we can easily access the script by just going GameManager.instance.[…] without needing to reference it. The only downside, is that you can only have one instance of the script.

Let’s start with the “Win” and “Lose” functions. Right now they’ll just set the time scale to o (pausing the game). Later on we’ll call a UI function to show text saying “You Win!” or “Game Over”.

Now we need a way to present / set a problem. The “SetProblem” function will carry over an index number for the problem array and set that as the current problem.

When the player gets the correct answer, “CorrectAnswer” will be called. “IncorrectAnswer” will be called if it’s the wrong answer. If they get it wrong, we’ll just stun them.

When the player enters a tube, the “OnPlayerEnterTube” function will be called, carrying over the id of the tube, which correlates back to the “answers” array in the “Problem” class.

Since we’re having a timer for each problem, we need to check if it’s ran out. If so, then the player will lose.

Finally, we need to set the initial problem when the game starts.

Back in the editor we can begin to create our problems. Here, I have 3 problems, one addition, multiplication and division. Make sure that your “answers” array is as many tubes as you have and set the “correctTube” slider to be the element number with the correct answer.

Game Manager Script component with problems array

Creating the UI Elements

It’s going to be pretty hard to play the game at the moment without some UI, so let’s get into that.

What we want to do is have a world space canvas which can hold our text elements. Setting up a world space canvas can be a bit finicky though, so first, let’s create a Canvas.

Then change the “Render Mode” to Screen Space – Camera. Drag the main camera into the “Render Camera” property and you should see that the canvas becomes the same size as the camera.

Unity UI Canvas object in the Inspector

Now we can change the “Render Mode” to World Space and sorting layer to “UI”. This prevents us from needing to manually scale the canvas down to the camera size.

Unity UI Canvas object moved to UI Sorting Layer

Create a new Text element as a child of the Canvas (right click Canvas > UI > Text). Then position it in the middle of the large white rectangle and change the boundaries so it fits.

For the text properties, set it to bold, with a size of 30 and center it horizontally and vertically.

Text object labeled 'Problem Text' added to Unity math game

Then create another Text element for the answer. This is going to be similar to the problem one, but smaller of course.

Number text object added above tube object in Unity

Now just duplicate it for each problem tube.

Unity UI with various math problem templates

To show the player how much time they have left, we’ll add in a dial that will retract over time. Create a new Image element (right click Canvas > UI > Image). Then set the “Source Image” to be the UIDial and resize the width and height to be 50. Now to make the image actually be able to reduce like a clock, we need to change the “Image Type” to Filled and then set the “Fill Origin” to Top. Now position it to the right of the problem text.

Circle image with Image script component in Unity

When the game ends, we need text to display if they won or not. Create a new Text and place it in the middle of the screen. I added an Outline component since we’ll be changing the text color later on in script. Also disable it, so it doesn’t appear when we start playing.

Text object with 'end text' in Unity Scene view

Scripting the UI

Create a new C# script called “UI” and attach it to the “GameManager” object.

We first need to reference the UnityEngine.UI library, since of course we’re going to be modifying UI elements.

For our variables, we have the problem text, answers text as an array. The remaining time dial, end text and remaining time dial rate. I’ll explain that shortly.

We’re also going to create an instance with the UI script, like the GameManager.

With our time dial, we’re using an Image that is “filled”. This means we can choose what percentage of the image is visible. In our case, we have it radial so it fills up like how a hand goes around a clock.

The “fill amount” is 0.0 to 1.0. Since our remaining time will be around 15 seconds, we need a way of converting 15 to 1 to use in the fill amount value.

In the “Update” function, we’re going to be constantly updating the time dial.

Now we need to setup the function “SetProblemText” which gets a problem and displays it on the UI.

Also when the game ends (either win or lose) we need to set the on screen text. “SetEndText” will send over a bool (win = true, lose = false). If it’s a win, the end text will be “You Win!” and the color will be green. If it’s a loss, the end text will be “Game Over!” and the color will be red.

Now we need to go back to the “GameManager” script and connect the two scripts. In the “SetProblem” function add…

In the “Win” function add….

In the “Lose” function add…

Now that we’re done with that, go back to the editor and add the objects to the UI script.

Finishing off the Problem Tubes

The last thing we need to do is add functionality to the problem tubes. Create a new C# script called “ProblemTube” and attach it to all of the 4 problem tube objects we made.

This is all we need to code. We check for a trigger enter with the player and if that happens, call the “OnPlayerEnterTube” function in “GameManager” and send over the tube id.

Now go back to the editor and enter in the tube id for each tube. 0, 1, 2 and 3.

Conclusion

Congratulations! You’ve now finished your math game!  Try it out for yourself, or share it with your friends.  Either way, you’ve learned to not only set up timers, enemies, and move a character, but how to provide a logic challenge as well.

Fast paced Unity math game gameplay