Tag Archives: interface

Adding a UI to display the score in a 2D game with Unity

This tutorial continues on from the previous tutorial on adding collectables and scoring to a 2D Unity game. In the previous tutorial, we improved the points scoring system and added collectables (coins) of different values).

In this tutorial we will add a UI (user interface) which will display the number of coins collected to the user. The LevelManager script will be responsible for displaying and updating the score text on screen. Watch the video below and then scroll down for the sample code.

Sample code

Here is the sample C# code for the LevelManager script.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class LevelManager : MonoBehaviour {
  public float respawnDelay;
  public PlayerController gamePlayer;
  public int coins;
  public Text coinText;

  // Use this for initialization
  void Start () {
    gamePlayer = FindObjectOfType<PlayerController> ();
    coinText.text = "Coins: " + coins;
  }
  
  // Update is called once per frame
  void Update () {
  
  }

  public void Respawn(){
    StartCoroutine ("RespawnCoroutine");
  }

  public IEnumerator RespawnCoroutine(){
    gamePlayer.gameObject.SetActive (false);
    yield return new WaitForSeconds (respawnDelay);
    gamePlayer.transform.position = gamePlayer.respawnPoint;
    gamePlayer.gameObject.SetActive (true);
  }

  public void AddCoins(int numberOfCoins){
    coins += numberOfCoins;
    coinText.text = "Coins: " + coins;
  }
}

Getting started with PlayCanvas

PlayCanvas is a 3D game development environment in the cloud. You can use PlayCanvas to make your own 3D games and code them in the JavaScript programming language using a web browser like Chrome or Firefox.

In this tutorial you will learn about the PlayCanvas features and tools and how to create, move, rotate, and resize 3D shapes. Watch the video below to get started with PlayCanvas.

Graphical User Interfaces (GUIs)

A Graphical User Interface (GUI) provides a way for the game to provide information to the user or to read information from the user. This can be in the form of labels, buttons, text boxes, sliders, menus, and so on. The GUI can sit on top of the actual game. It is always a good idea to design your GUI before making the game – draw up a storyboard or wireframe with the types of GUI controls you want in the game and where you want to place them.

GUIs are created using code and can be added to any object or script in your game. If you have different parts of the GUI on different objects or scripts, it can become confusing and hard to maintain. It is a good idea to have all the GUI parts in one spot on one object.

In order to add a GUI to your scene, you need to add a special method to the script you have created for your GUI which is attached to an object in your scene eg. the camera. The special method that is used to create a GUI is called OnGUI(). This method takes no parameters and returns no data to whatever called it. The method will draw your GUI components on the screen and is called every single frame, just like the Update() method. Different GUI controls (eg. labels, buttons) will have code that goes inside the OnGUI() method.

Labels

Let’s start making a basic GUI that will draw a label with a short message on the screen. Labels display text on the screen that can be a simple string value, a variable value or a concatenated (joined) string and variable value eg. “Score: ” + scoreVariable.

A label displaying the score.
A label displaying the score.

Watch the video on Labels below or scroll down to read the instructions and sample code.

Create a new scene in your project and a new script called myGUI. Attach this script to the Main Camera. Add the following code to your script inside the class but outside of all other methods (i.e. do not place it inside the Start() or Update() methods).

void OnGUI(){
 GUI.Label (new Rect(0,0,80,20), "Hello");
}

Run the scene and you should see ‘Hello’ displayed on the screen in the top left corner. You have just created a basic GUI with a label that draws in the top left corner of your screen (at position 0 on x axis and position 0 on y axis of screen). The label has a width of 80 and a height of 20. The parameters inside Rect() are x position, y position, width, height. The label can display a string value or variable (or concatenated strings/variables).

Boxes

The box is similar to a label except that a box has a dark border around the label. An example of a box is shown below.

An example of a box.
An example of a box.

Watch the video on Boxes below or scroll down to read the instructions and sample code.

The syntax for creating a box is also similar to creating a label. new Rect() takes the parameters of x position, y position, width, and height). An example of a box containing a “Hello” string message is shown below. This code would be placed inside the OnGUI() method:

GUI.Box(new Rect(0,0,80,20), "Hello");

If you want a box at the middle-top area of the screen, you can use code like this. This code would be placed inside the OnGUI() method:

GUI.Box(new Rect(Screen.width / 2 - 20, 0, 80, 20), "Hello");

Buttons

Buttons can be in one of two states. A button can be either pressed down or not pressed down. An if statement can be used to determine whether a button is being pressed (a boolean value of true or false). If you keep the button pressed down with the mouse, it will not behave differently to just clicking once. The image below shows an example of a button.

An example of a button that reloads/resets the current level in a game.
An example of a button that reloads/resets the current level in a game.

Watch the video on Buttons below or scroll down to read the instructions and sample code.

Like labels and boxes, buttons require an x position, y position, a width and a height value. The sample code below shows how to create a button at an x position of 3, a y position of 3, with a width of 80 and height of 20. When the button is clicked it will reload the level (scene) using Application.LoadLevel. In this example the scene is called ‘myScene’. This code would be placed inside the OnGUI() method:

if (GUI.Button (new Rect (3, 3, 80, 20), "Reset")) {
 Application.LoadLevel ("myScene");
 }

Repeat button

A repeat button is like a normal button except that it can be pressed and held down with the mouse click. It can be used to increase the value of a variable while the button is being held down.

repeat_button

The example below increases a variable’s value while the button is being held down. This code would be placed inside the OnGUI() method:

if (GUI.RepeatButton (new Rect (0, 0, 80, 20), "Increase")) {
 myVariable += 1;
 print (myVariable);
 }

Toggle

A toggle button (also known as a ‘stated’ button because it can be in different states) is like a switch – it can be on or off. It can be used to set something in one state or another. It takes a boolean parameter (whether the button is clicked or not) and returns a boolean value (tells the user if the button is clicked).

The two images below show a toggle in two different states (off and on).

Screen Shot 2015-11-15 at 8.45.02 PM Screen Shot 2015-11-15 at 8.45.14 PM

An example of the code is shown below with a boolean variable called ‘mySwitch’.

bool mySwitch = false;
 
void OnGUI(){
 mySwitch = GUI.Toggle(new Rect(290,20,80,20), mySwitch, "My switch");
 }

Toolbar

A toolbar is a row of several buttons. You can have however many buttons you like on a toolbar, but only one button can be selected at any one time. An integer variable is used to keep track of which button is selected and an array of strings is used for the different buttons.

toolbar

The number of items in the array determines how many buttons there are. For example, if there are three items in the array then there will be three buttons. If the first button is selected, the integer value will be 0. If the second button is selected, the integer value will be 1. If the third button is selected, the integer value will be 2, and so on.

The sample code below shows the integer value variable, the array of strings, and the Toolbar GUI control.

int difficulty = 0;
string[] list = {"Easy", "Medium", "Hard"};
 
void OnGUI(){
 difficulty = GUI.Toolbar(new Rect (0,0,200,30), difficulty, list);
 }

 Textfield

A textfield allows the user to input text. The textfield can display text and also accepts text from the user as they click in the box and type in it. A string variable can be used to store text that is displayed inside the textfield, and then store the text that the user types in.

textfield
The code below shows how a textfield can be added to a scene.

string textInput = "Enter your text here";
void OnGUI(){
 textInput = GUI.TextField(new Rect(600,20,130,30), textInput);
 }

Textarea

A textarea is just like a textfield except that it can store multiple lines of text.

textarea

 

The sample code below shows how to add a textarea control to your scene.

string textInput = "Enter your text here";
void OnGUI(){
 textInput = GUI.TextArea(new Rect(600,20,130,120), textInput);
 }

Sliders

Sliders allow the user to select a value between a range of different values by clicking and dragging a slider with the mouse. You can add horizontal and vertical sliders to your scenes in Unity. The slider takes a float value that is used for the default position of the slider, and returns a float value that contains the value the user changed the slider to. It also takes a minimum and maximum slider value.

sliders

 

The sample code below shows how to add both horizontal and vertical sliders to a scene. In the two examples, there are float variables that are initially set to a value of 0 (inside the main class). Each slider takes a float value and then returns a float value. The x and y positions as well as the width and heigh are specified. Parameters for minimum and maximum values for the sliders are also added at the end of the statement – in this example, the minimum value is 0 and the maximum value is 100.

float horizontalValue = 0;
float verticalValue = 0;
 
void OnGUI(){
 horizontalValue = GUI.HorizontalSlider (new Rect (30, 20, 150, 20), horizontalValue, 0, 100);
 verticalValue = GUI.VerticalSlider (new Rect (5, 5, 20, 150), verticalValue, 0, 100);
 }

In the next tutorial we will look at how to customise and style GUI controls.

Getting started with Unity

Welcome to the Unity 3D Game Development tutorial series! Unity is a game engine for building 2D and 3D games that can be played on a range of different platforms including Mac, Windows, iOS, Android, and more.

Unity allows you to create game objects and environments and then program your games using the C# (C Sharp) and JavaScript programming languages (you can also code in Boo but it is no longer documented by Unity 5). You can choose which language you would like to use but in these tutorials we will work with C#.

To get started with Unity, watch the video below. Make sure you also check out the Unity FAQ & Tips page to get the most out of Unity. Make sure you also get used to using Unity keyboard shortcuts so that you can work faster in Unity.

You can download the Unity game engine for Mac or Windows here. The Personal Edition is free to use and that is what will be used in these tutorials. When you install Unity, make sure you also include any standard assets, demo projects and files, and MonoDevelop in the installation.