Make games with Unity [Part 1: Project setup and scenes navigation]

Unity is a powerful game engine that help developers build simple-to-AAA games for multiple platforms such as iOS, Android, PlayStation, Xbox and many others.

This tutorial is the first in a series with the goal to help you master Unity. After completing this first tutorial, you’ll be able to run the small project composed of two scenes and navigate between them 🙂

No worries, no previous knowledge of Unity is required to complete this tutorial.

So without further ado, let’s dive in Unity!

1- Install and configuration of a Unity project

Let’s start by installing Unity, download the latest version here (v4.6.1 while I am writing this tutorial), once the download in completed, double click on the downloaded file to run the setup wizard.

Setup completed ? open up Unity 🙂

After Unity finish loading, you’ll see the following screen:

Those are some useful links to get you started (videos, forum, etc).

Close the window, and select ‘File/New Project’ in the menu. Another window shows up to give a name and save the project.

1/ In ‘Project Directory’, clic on the ‘Set…’ button to browse a directory where to put the project, give it a name something like ‘UnityBasics’.

2/ Select it and choose ‘2D’. So far, you will be working on the 2D aspect of Unity, but later on, we’ll be playing with the Unity 3D aspects 🙂

3/ Done! clic ‘Create Project’. You may notice Unity has closed and open up again automatically with a fresh copy of your project.

Below is your new workspace, you will get used of this soon by the end of this tutorial.

At first glance, it looks distracting, but this is just the first impression, after exploring its corners, you’ll change your mind 🙂

1/ Hierarchy View: This is where all your game objects reside. Specifically, all objects who are going to be shown on the game are listed in the ‘Hierarchy’ view.

2/ Scene View and Game View: The ‘Scene’ view allows you to visualise all scene objects in order to be able to move them around easily.

For the ‘Game’ view, it’s where you can take a look at your game running like it will be after distribution. Whenever you work on the game and want to see what it looks like, the ‘Game’ view will do that for you.

3/ Inspector View: The ‘Inspector’ view is one of the most used views in Unity because all game objects configurations work is done right there. This view list all the selected game object features (known as ‘components’) and allows you to change its properties easily. All components and properties related to a game object (lights, gravity, transition, camera, position, etc) are listed in the ‘Inspector’ view, which make it a typical game object controller.

4/ Project View and Console View: The ‘Project’ view contains all used and unused resources in your Unity project. Typically, all images (sprites), sound files, textures, prefabs, etc, will be saved in the ‘Project’ view.

In the other side, the ‘Console’ view is where we do the debugging work which come in a handy way to easily keep track of game objects life cycles in your game and identify errors root causes.

The views explained above are the most used in Unity, however, there is another view named ‘Animation’ which is very important for sprites animations. We will discover it in the next tutorials, so stay tuned!

Now, you are going to add two simple scenes and implement the transition between both of them.

First, you’ll add a button to the current scene, then you add a new scene with a button in its canvas. And later on, you will implement the action methods in order to navigate between the two scenes.

Start by saving the first scene that was created by default by Unity. Select ‘File’\’Save Scene’ in the menu, or simply click on the cmd + S combination (Mac OS) or Ctrl + S (Windows).

A new window shows up, enter a name for the scene and make sure the scene is under the ‘Assets’ folder.

Note: You may wonder why you didn’t make a new scene explicitly. The answer is simple, when you have created a new project, Unity has made a new scene automatically for you.

From now on, you can see the saved scene in the ‘Assets’ folder.

The scene is saved, now, you will add a button to move to the next scene. For that, select ‘GameObject’>’UI’>’Button’ in the menu. You may notice the button is added in the ‘Scene’ view and the ‘Hierarchy’ view as well since both are responsible of displaying the same objects in the current scene. Another more practical way to add the button in the scene is from the ‘Create’ menu in the ‘Hierarchy’ view, as shown below:

Few additional notes are worth mentioning:

1/ The button is embedded into a new object called ‘Canvas’. The ‘Canvas’ is the container of all UI elements (panel, text field, button, slider, scrollbar, etc).

2/ The button has a ‘Text’ property (select the left arrow of the button in the ‘Hierarchy’ view to see the ‘Text’ property). This is the property which manage the displayed text in the button, you can change it manually from the ‘Inspector’ view.

3 / A new object called ‘EventSystem’ is added to the ‘Hierarchy’ view. ‘EventSystem’ will be responsible for managing all the events which take place in the scene, it is also the handler for the button click which will move you to the next scene 🙂

The next step is to center the button in the scene, the goal is to make the button adapts to the screen dimensions and stay on the center of its container.

To do this, first select the button from the ‘Hierarchy’ view, then:

1/ Select the fifth option in the ‘Transform’ tools from the toolbar.

2/ Move the button in the ‘Scene’ view so it’s vertically and horizontally centered in the ‘Canvas’.

3/ Select ‘Anchor Presets’ from the ‘Inspector’ view, a list will show up, choose the ‘stretch’-‘middle’ anchor.

Good job! What you have done above is recalculate the dimensions of the button according to its container dimensions so it remains always in the screen center 🙂

Try to resize the screen manually in the ‘Scene’ view and ‘Game’ view, you will notice that the button is resized automatically to remain always in the center.

Your are almost done with this scene (you will get back to it later to implement the code).

Now, you are going to make a new scene with a ‘back’ button which trigger the relevant code to move back to the previous scene.

Save you work on this scene, select ‘File’>’Save Scene’ from the menu. Create a new scene by selecting ‘File’>’New Scene’ from the menu.

You may notice all objects which used to be in the ‘Hierarchy’ view are no longer there, same thing for the ‘Scene’ view. This is because Unity prepared a new empty scene to work in 🙂

Before you start working on the new scene, let’s save it first. Select ‘File’>’Save Scene’ from the menu, a new window shows up like the one you got for the first scene at the beginning of this tutorial. Name it ‘Main_Scene’ and make sure the scene is under the ‘Assets’ folder.

Both scenes are now under the ‘Assets’ folder, you can open scenes easily by selecting the scene from the Assets folder, then click on the ‘Open’ button in the Inspector (or simply double click the scene).

Ok, make sure the scene called ‘Main_Scene’ is opened, now you will reproduce the same work you did in the previous scene.

Here is the steps you need to follow (although you can do this without help this time) 😉

1/ Add a button: Select ‘GameObject’>’UI’>’Button’ from the menu.

2/ Make sure the button is centered vertically and horizontally, first with the ‘Transform’ tools then with the ‘stretch’ and ‘middle’ combination from the ‘Anchor Presets’ menu.

Change the button text to ‘Back’. To do this, Select ‘Canvas’>’Button’>’Text’ in the ‘Hierarchy’ view, then change the ‘Text’ property content from the ‘Inspector’ view.

Feel free to change the font, text color, etc.

Both scenes are ready, now time to implement the relevant code to navigate between the scenes.

Save the scene (‘File’>’Save Scene’ from the menu) and open up the scene ‘Welcome_Scene’ from the ‘Assets’ folder.

When the ‘EventSystem’ object was added in the ‘Hierarchy’ view – while ‘Canvas’ object was made – all events which will occur in the scene (touch, swipe, etc) will be captured. Now you are going to add some methods to control and react to theses events (ie: On button click, move to the next scene).

To do this, create a new ‘GameObject’ and attach the script which you will be implementing to it.

Select ‘GameObject’>’Create Empty’, a new GameObject is made and added to the ‘Hierarchy’ view.

Double click on the GameObject and rename it to ‘UIController’. Now, select ‘Add Component’>’New Script’ from the ‘Inspector’ view, rename the script to ‘UIControllerScript’ and make sure the chosen language is C#, then click on the ‘Create and Add’ button.

In Unity, a GameObject features and capabilities are extended with ‘components’.

Imagine a fighter in the scene, we can think of some components to extend this fighter features, like:

• ‘Rigidbody2D’ to make him respond to gravity and be controlled with forces.
• ‘Audio Source’ to make him able to speak, cry, etc.

Note: All game objects in Unity share the ‘Transform’ composant, it’s actually added implicitly for each new ‘GameObject’. The ‘Transform’ component allows you to control ‘GameObject’ position, rotation and scale.

Now, you are going to implement the relavant code to move to the next scene on button click. To do this, double click ‘UIControllerScript’ in the ‘Assets’ folder located in the ‘Project’ view, or from the ‘Inspector’ view (after you select the ‘UIController’ game object in the ‘Hierarchy’ view).

The script is loaded with ‘MonoDevelop’, the editor which comes with Unity setup.

Two fundamental methods, ‘Start’ and ‘Update’ are added implicitly in each new script. ‘Start’ is used for all type of initialisation (initialise enemies, prepare the fighter, etc), while ‘Update’ method is useful for all tasks which should be done continuously (check object collision, increment score on coins earnings, etc).

For this tutorial, you are going to implement another method which will be fired on button click to move to the next scene.

The method is simple, the API responsible of changing scenes in Unity is called ‘LoadLevel’, implement the following code in the ‘UIControllerScript’ class:

public void presentGameScene(){
    Application.LoadLevel("Main_Scene");
}

Save the file (cmd+S on Mac OS ou ctrl+S on Windows), move back to Unity and click on the ‘run’ button.

Select the ‘Game’ view, then click the button to move to the next scene.

hmm, that seems not moving me to the next scene 🙁 !!!

Do not panic, it’s all Ok, but it looks like some adjustment is missing in order to attach the button in the scene to the method you wrote above (presentGameScene).

To do this, select the button from the ‘Hierarchy’ view, then move to the ‘Inspector’ view where the ‘Button (Script)’ component is located. In the bottom you can see the click manager (On Click). This manager allows to bind action methods to the button to fire them on ‘click’ event.

Follow the following screencasting to bind the button correctly to its animation.

What you did above can be summarised in the following two steps:

1/ Select the method ‘presentGameScene’ from the script ‘UIControllerScript’ attached to ‘UIController’.

2/ Attach it (presentGameScene) to the ‘On Click’ button event.

Now run the project again (the arrow button) and click on the button to move to the next scene.

When the project is in ‘play’ mode, the toolbar buttons become highlighted in blue like below:

When you click on the button, the game stopped and the following error is thrown in the console:

Level 'Main_Scene' (-1) couldn't be loaded because it has not been added to the build settings.
To add a level to the build settings use the menu File->Build Settings...

The error should tell us the half of the story. Actually, Unity adds all scenes in order by giving each scene an index counting from 0 (0, 1, 2, etc). The problem is that the scene ‘Main_Scene’ wasn’t added to the build settings in Unity, which results in attributing a -1 index to the scene which means the scene wasn’t found, hence Unity has stopped the game.

So, let’s take advantage of this error and add both scenes in order.

Select ‘File’>’Build Settings’ from the menu, you will get the following screen:

Clic on the ‘Add Current’, you may notice the current scene (Welcome_Scene) is now added with index 0, it’s like asking Unity to load this scene first once the game start running.

Now, double clic on ‘Main_Scene’ from the ‘Assets’ folder to open it. Then retrace the same steps (select ‘File’>’Build Settings’ from the menu then click on ‘Add Current’ button), ‘Main_Scene’ is now added to the build settings with index 1.

You did it! Now double click on ‘Welcome_Scene’ located in the ‘Assets’ folder, then run the game, move to ‘Game’ view and select the button. The transition to the ‘Main_Scene’ scene is now done correctly 🙂

The last part consists on implementing the relevant code to move from the ‘Main_Scene’ back to the ‘Welcome_Scene’, this code will be attached to the click event on the ‘Back’ button located in ‘Main_Scene’.

Double click on the ‘UIControllerScript’ file located in the ‘Assets’ folder, MonoDevelop will open up, add the following method to the class:

public void backToWelcomeScene(){
	Application.LoadLevel ("Welcome_Scene");
}

Save the work on MonoDevelop.

Now you are going to attach the method you implemented above to the button click event. To do this, retrace the same work you did for the first button:

1/ Double clic on ‘Main_Scene’ located in the ‘Assets’ folder.
2/ Select ‘GameObject’>’Create Empty’ from the menu.
3/ A new GameObject is added to the ‘Scene’ and ‘Hierarchy’ view, double clic on the GameObject to rename it to ‘UIController’.
4/ Make sure that ‘UIController’ is selected in the ‘Hierarchy’ view, then, from the ‘Inspector’
view, select the ‘Add Component’ button.
5/ A search bar shows up, type in ‘script’ then select ‘UIControllerScript’
6/ A new component of type script is attached to the ‘UIController’ game object, you can notice it in the ‘Inspector’ view.
7/ Select the button from the ‘Hierarchy’ view.
8/ From the ‘Inspector’ view, inside the ‘On Click ()’ controller, clic on the ‘+’ button to add a new trigger.
9/ Drag and drop the ‘UIController’ game object from the ‘Hierarchy’ view to the new trigger you added in step 8.
10/ From the list ‘No function’, select ‘UIControllerScript’, then ‘backToWelcomeScene ()’.

Here is an animation to understand the steps from 7 to 10 described above:

You are done! This is all what you need to do! Save the scene by selecting ‘File’>’Save Scene’ from the menu, then run the game 🙂

As usual, you can download the project here.

The first part of this series is completed. In the next part, you are going to customise the scenes you just implemented here and deploy the project to iOS and Android. Also, you will master a bench of tips brought to you by Unity.

Stay tuned, feel free to leave me a comment below or tweet me, I am @_tmalek 🙂