Game Programming with Unity and C#

Setup the Project

Let's start by opening up the Bouncy Box project that you created before.

You can do this by opening Unity Hub, and in the Projects section click on your Bouncy Box project.

Cannot load image

If you do not see your project in the Projects list, you can add it by clicking ADD in the top right.

In the file explorer, you can go to the directory where you saved your project, click on the project folder, then click select folder.

Menu Scene

At the moment we only have a game scene which we called Scene01. Let's create another scene called MainMenu.

To do this, go to the Scenes folder in the Project window. Then right click > Create > Scene.

Rename the scene to MainMenu then double click to open the scene.

Create the Background

Now that you have a menu scene, let's add the UI so that we can interact with it.

First we will create a Panel that will be the background for our main menu. A Panel is just a 2D Rectangle and is a good starting point for grouping UI elements together.

To create the Panel, right click in the Heirarchy and select UI then Panel.

As you can see, when we created the Panel, it was automatically made a child to a Canvas object. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.

The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.

You might be too zoomed in to see the whole Canvas at the moment. To zoom out and have the whole Canvas in view, double click on the Canvas object to focus it. Then zoom and pan to get the best view.

Now let's change the color of the Panel so it is not just a boring grey color.

To change the color, click on the Panel object in the heirarchy. Then in the inspector window, under Image, click on the color selector box and select a color.

In computers, colors are made up of R,G,B and A values which mean Red, Green, Blue and Alpha respectively. Mixing Red, Green and Blue creates the actual color and the Alpha change determines the transparency.

By default, the Alpha channel is set to 100 which means the panel will appear semi-transparent. We want the panel to be fully visible so make sure to set the alpha channel to 255 (full visibility).

Let's rename the Panel to Background so it is easier to identify.

Adding Text

Let's add some text to display the title of our game.

To add text, right click on the Background Panel in the heirarchy, and select UI then Text - TextMeshPro.

TextMeshPro (TMP) allows us to add high quality UI text that can easily be styled and edited.

When you add TextMeshPro, a window will appear prompting you to Import TMP Essentials. This is necessary for TextMeshPro to work so select this option and wait for the resources to finish importing.

You do not need to import TMP Examples and Extras.

Now let's edit the text. Click on the Text (TMP) object in the heirarchy to see its components in the inspector window.

Start by changing increasing the font size so the text is larger. You can do this by going under Main Settings and changing the Font Size attribute to something like 70.

Then scale the text box so the text can fit inside. You can do this by clicking and dragging on one of the blue corners of the text box.

Hint: Hold ALT while dragging the corner to scale from the center.

Let's also center the text in the text box by aligning it both horizontally and vertically.

You can do this by clicking the icons next to the Alignment attribute.

The text font is quite mundane right now. This can easily be changed by creating a Font Asset.

First download the free zorque font file which we will use as the font for our UI. (You can also use another font file of your choosing. Just make sure that the file format is ttf. )

Now in the Unity Project window, in Assets, create a new folder called Fonts.

Then in a file explorer, locate the downloaded font file and drag it into the Fonts folder in your Unity project.

Now that we have the font in Unity, we can use it to create a Font Asset. To do this, right click on the font, the click Create > TextMeshPro > Font Asset.

You can then select this Font Asset from the Font Asset attribute of the TextMeshPro object.

Now let's change the contents of the text so that it says BOUNCY BOX. You may want to edit the font size so that the text is bigger and also change the size of the text box so it fits all the text.

Finally, move the text up so that it is at the top of the Panel.

Adding Buttons

Let's add some buttons to the main menu.

The first button we will add will be the start button. To create a button, right click on the Background Panel then click UI > Button - TextMeshPro.

Increase the size of the Button by clicking and dragging on any of the blue corners.

Remember you can hold ALT while dragging to scale from the center.

As this is a TextMeshPro Button, the Button object will automatically get a TextMeshPro object as a child object. Therefore we can edit the Button text in the same way as with the title.

Edit the Button text so that it looks how you want and has the text PLAY.

Now rename the Button to PlayButton so it is easier to identify.

Changing Scene

At the moment, you can play the game and click the Play Button, but nothing will happen. We need to create a script that will start the game when the Play Button is clicked.

Go into the scripts folder and create a new script called MainMenuController

Then attach the MainMenuController script to the Canvas, as this Canvas holds all of the main menu UI.

Now open the MainMenuController script. The first thing we need to do is include the namespace for the Unity Engine's Scene Management.

Namespaces are used to organize code by separating the code into different parts with their own set of classes and functions. You can include a namespace by typing the using keyword, followed by the namespace and classes to import. By default, Unity scripts already include some namespaces, such as UnityEngine.

The SceneManagement namespace includes many classes that allow us to manipulate scenes. In our case, we need to be able to move to the next Scene. Let's include the SceneManagement namespace in our script.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenuController : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

Now we can use the classes and functions from the namespace.

Start by removing the Start() and Update() functions as we will not need these. Instead we will create a new function that will be called whenever the Start button is clicked.

Create a public function called PlayGame that returns void (meaning it returns nothing).

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenuController : MonoBehaviour
{
    public void PlayGame()
    {

    }
}

Inside this function we will load the Scene which has our game. Here we will use the SceneManager class from the SceneManagement namespace. We will call the LoadScene() function of the SceneManager class and pass in the Scene to be loaded, as an argument.

There are several ways to pass in the Scene to be loaded. Such as by passing in a string with the name of the Scene, or by passing in the build index of the scene. (The build index is just the number of the Scene based on the order of all the Scenes in the game. E.g. The first Scene will have a build index of 0, the second Scene will have a build index of 1 and so on...)

However if we ever change the name of the Scene or add in other Scenes then we will also have to change our script every time. Instead, we can get the current Scene's build index and add one which will always get the build index of the next Scene.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenuController : MonoBehaviour
{
    public void PlayGame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }
}

As you can see, we call the LoadScene() method and the argument passed in is the current active scene's build index. We then add 1 which will be the build index of the next Scene.

Now we have to actually add our Scenes to the build so the SceneManager can recognize them and give them a build index.

Go back into the Unity Editor and click File > Build Settings...

This will open up the Build Settings window where we can add in the Scenes of our game.

To add Scenes, open the Scenes folder and drag in the MainMenu Scene and then Scene01 in that order. They must be in the correct order so the build indexes are correct.

Now we just need to hook up the play button to the function we just created.

To do this, click on the play button in the heirarchy to view its components in the inspector. Then find where it says On Click () which is where you can list any methods that you want when the button is clicked.

We can add an action (method) to the On Click event by clicking the + button and selecting an object that has script with the method we want to run. Since the Canvas has the MainMenuController script which contains our PlayGame method, we will select the canvas as the object. This can be done by dragging the Canvas object from the heirarchy into the selection box where it currently says None (Object).

You can then select a function (where is says No Function) by first selecting the script and then the function from that script that you wan to run.

Now that the function is attached to the Button's click event, when you play the game and click the button, you will go to Scene01 and be able to play the game.

Quit Button challenge

Challenge yourself by adding a quit button to the main menu.

Update the Main Menu to allow the option to quit the game with a button click.

The completed menu should look like this:

The following steps should help you complete this challenge.

Create a new Button that will be the quit button and style it how you like.
In the MainMenuController script, create a new function called QuitGame(). Quiting the game is very simple as you can just call Application.Quit().

However you cannot quit the game in Unity Editor, only when you actually build it. Therefore to make sure the function works, we will also add a print statement.

Here is what your function should look like:
```
public void QuitGame()
{
    print("Quit Game!");
    Application.Quit();
}
          
```
Finally you should hook up the new QuitGame() function to the Quit button's On Click() event in the same way as the Play button.

Make a Start Menu