CS304: Game Programming

Lecture : GUIs, Menus

Outline

1 The Unity UI System

2 Menus and Loading Scenes

4
The Graphical User Interface

The Graphical User Interface (or simply GUI) in games is in charge of pre-
senting the player the appropriate amount of relevant information to facilitate
taking decisions. This could be presented in the form of menus or as a Heads-
Up Display (or HUD).
A good design of the GUI system is essential for the success and playability of
a game. The game could be unplayable if the information provided is too little,
as the player might not know what to do, but also if it is too much, as this
could confuse the player. The HUD is frequently used to simultaneously display
several pieces of information including the main character’s health, items, and
an indication of game progression.
Both the GUI (and especially the HUD) can influence importantly in the im-
mersion the player experiences when playing the game. In this lecture, we’ll
examine Unity’s GUI, including HUD possibilities, menus, windows, panes and
a few effects.
The Graphical User Interface
The Canvas (1/2)
The Canvas is the area that holds all UI elements. In Unity, it is included
into the scene as a game object, with a Canvas component on it. All the UI
elements are children game objects of this canvas. The Canvas area is shown
as a rectangle in the Scene View, and it’s a good idea to switch it to 2D view
to operate with UI elements..
Draw order of elements: UI elements in the Canvas are drawn in the same
order they appear in the Hierarchy. If two UI elements overlap, the later one
will appear on top of the earlier one..
An important parameter of the canvas is the render mode, that can be set to:
Screen Space - Overlay: UI elements are rendered on top of the screen.
The canvas will fill the screen automatically, and it will resize if the
screen dimensions change.
Screen Space - Camera: UI elements are rendered at a certain distance
from the camera, and camera settings (field of view, projection, etc.)
affect how the elements are rendered.
World Space: the Canvas behaves as any other object in the scene
(useful for UIs that are meant to be a part of the world).
The Canvas (2/2)

Other parameters of the Canvas component are:.

Pixel Perfect: UI elements are adjusted to the nearest pixel.

Render Camera: Camera that renders the UI elements in Screen Space -

Camera render mode.
Plane Distance: Distance between Canvas and camera in Screen Space -
Camera render mode.
Event Camera: Determines which camera should receive the event of the
player clicking in UI elements in World Space render mode.
Sorting Layer and Order in Layer: control the render order of the canvas
when compared to other renderers on the scene.
The UI Rect Transform (1/3)

The UI Rect Transform is a specific

transform component for UI elements.
It is used to specify the size, position
and rotation of all UI elements.
Canvas have their own Rect
Transform, although it is editable only
in the World Space render mode.

Scaling vs. Resizing: It is recommended not to scale UI elements, but resizing

them instead, as this does not affect font sizes, border on sliced images, etc.
However, scaling can be useful for animated effect or other special effects. A
negative size turns an UI element invisible, while a negative scale flips it.
An UI element can be anchored to its parent if the parent has also a Rect
Transform. This allows the element to re-position and re-size based on the
parent’s Rect Transform.
The UI Rect Transform (2/3)

Pos (X, Y, Z): Position of the rectangles pivot point relative to the anchors.
Width/Height: Width and height of the rectangle (to resize).
Anchors Min: The anchor point for the lower left corner of the rectangle
defined as a fraction of the size of the parent rectangle. 0,0 corresponds
to anchoring to the lower left corner of the parent, while 1,1 corresponds to
anchoring to the upper right corner of the parent.
Anchors Max: The anchor point for the upper right corner of the rectangle
defined as a fraction of the size of the parent rectangle. 0,0 anchors to the
lower left corner of the parent, while 1,1 anchors to the upper right corner.
Pivot: Location of the pivot point around which the rectangle rotates, defined
as a fraction of the size of the rectangle itself.
Rotation: Angle of rotation (in degrees) of the object around its pivot point
along the X, Y and Z axis.
Scale: Scale factor applied to the object in the X, Y and Z dimensions.
The UI Rect Transform (3/3) *

There are a few anchor presets

available that correspond to
the most used settings. These
can be accessed by clicking on
the button highlighted in the
image in this slide.

By pressing Shift and Alt keys,

you will be able to set pivot
point and the position of the
UI element, respectively.
UI Events and Triggers (1/2)

The interactivity of a UI element placed on the screen is driven by Events.

Whenever a Canvas is created on a scene, an EventSystem game object is
automatically added to the scene. This game object has several components,
including a Event System script and one or more input systems.

The First Selected property allows to

select (not to click!) a UI element
when the scene starts. This is useful
for non-pointer based UI Systems
(game pads).
You can add an Event Trigger
component to any game object to
trigger an event when the user
interacts with it. Most UI components
respond to at least one event by
default.
UI Events & Triggers (2/2) *
To catch a specific event, a list of event handlers can be associated to each UI
element:

For each function you can specify:

Execution mode: Off (disabled), Runtime Only (no events while in
editor) or Editor and Runtime.
Object: Object to manipulate.
Function: Function to call when the event is triggered, on the object
selected. The functions needs to be a publicvoid with 0 or 1 parameters.
You will be able to choose between available Unity functions or from your
scripts.
Parameters: An optional parameter that can be an int, float, string, bool
or Object.
The Visual Components - UI Text

The Text control displays a non-interactive piece of text to the user. This
can be used to provide captions or labels for other GUI controls or to display
instructions or other text.

You can specify setting of the text such as font, colour, size, alignment, etc.
The Visual Components - UI Image
The Image control displays a non-interactive image to the user. This can be
used for decoration, icons, etc, and the image can also be changed from a script
to reflect changes in other controls. The image to display must be imported
as a Sprite to work with the Image control.

The image type can be set to:

Simple: The image scales to fit the control rectangle, unless Preserve
Active is enabled.
Sliced: The image is treated as a“nine-slice” sprite with borders.
Tiled: The image is kept at its original size but is repeated as many times
as necessary to fill the control rectangle.
Filled: The image is displayed as with the Simple method but can also be
made to grow gradually from an empty image to a completely filled one.
The Interaction Components - UI Button
The Button control responds to a click from
the user and is used to initiate or confirm an
action. The UI Button game object comes
with an Image and a Button components,
which allow to establish different settings such
as different colours, sprites, image and fade
duration.
Interactable: Check if this buttons should
accept user input.
Transition: Determines if the button
should be provided with different colours,
sprites or animations when it is clicked, re-
leased, or the mouse is over it.
Navigation: Allows to specify how to
move between UI elements using the
arrow keys. OnClick(): list of functions
that will be called when the button is
clicked.
The Interaction Components - UI Slider
The Slider control allows the user to
select a numeric value from a
predetermined range by dragging the
mouse. The UI Slider game object
comes with a Slider component. It
comes with setting such as
Interactable, Transition, Navigation
and list of functions as in the button
case, plus:

Direction: Left to Right, Right To

Left, Up to Bottom, Bottom to
Up.
Min and Max Values for the slider.
Whole numbers: avoid decimal Additionally, it’s possible to specify a
point values. background and several properties for
Value: current and default value the bar and the handle of the slider.
for the slider. The Slider game object comes with 3
children objects for this.
Example: A health bar display (1/3)
This example consists of an UI Image (Heart) and a UI Slider (Health Slider),
which contains a background and a fill area:

HealthSlider (Slider
Script):
Example: A health bar display (2/3)

Background Image:

Fill Image:
Example: A health bar display (3/3)
Changing the health value and the slider from a script is simple:

1 publicclass PlayerHealth : MonoBehaviour

2 {
3 publicint startingHealth = 100;
4 publicint currentHealth ;
5 publicSlider healthSlider ;
6
7 voidAw ake () {
8 currentHealth = startingHealth ;
9 }
10
11 //...
12
13 pu bl icvoid Ta ke D am ag e ( int am ou nt ) {
14 c u r r e n t H e a l t h -= a m ou nt ;
15 h e a l t h S l i d e r .val ue = c u r r e n t H e a l t h
16 ;
17 }
}
Outline

1 The Unity UI System

2 Menus and Loading Scenes

4
Creating a Simple Menu (1/3)
A menu to select levels (scenes) to play can be placed in an independent
scene. This is an example of a menu with two levels to load, and the Hierarchy
View of the scene:

The Canvas object has a script (LoadOnClick.cs ) component, with the follow-
ing code:
1 usingUnityEngine ;
2 usingSystem . Collections ;
3
4 pu bl icclas s L o a d O n C l i c k : M o n o B e h a v i o u r {
5
6 pu bl icvoid L o ad S ce ne ( int le ve lI dx )
7 {
8 SceneManager . LoadScene ( levelIdx );
9 }
Creating a Simple Menu (2/3)
Each one of the buttons has a Button (Script) component, that holds the list
of functions to call when this button is clicked. As LoadOnClick has a public
void function with one parameter (LoadScene ), this function appears in the
available methods to call when the object to hold the trigger is the canvas.
Each button passes a different value for the parameter, depending on the level
to load:
Creating a Simple Menu (3/3)

The parameter passed to the function corresponds to the order in which the
scenes are loaded in the build settings (File → Build Settings ).

To add a loading screen, we can add an image with a black background colour
and a text that indicates that the scene is loading. Set as a public variable of
the same script, we can just set it to active when the event is captured:
1 publicGameObject loadingImage ;
2
3 pu bl icvoid L o ad S ce ne ( int le ve lI dx )
4 {
5 loadingImage . SetActive (true);
6 SceneManager . LoadScene ( levelIdx );
7 }
Loading Scene
Before you can load a scene you have to add it to the list of scenes used in the
game. Use File → Build Settings in Unity and add the scenes you need to the
scene list there.
publicstaticvoid LoadScene( intindex) and publicstaticvoid LoadScene( stringname)
load a scene by its name or index.
Calling Application.LoadScene will update:
SceneManager.GetActiveScene().buildIndex (scene index loaded).
SceneManager.GetActiveScene().name (the name of the level that was last loaded).

S c e n e M a n a g e r . Lo a dS ce ne ( S c e n e M a n a g e r . G e t A c t i v e S c e n e () . b ui ld In d ex +1) ;

When a new scene is loaded, all game objects from the current scene are
destroyed.
Loading Additively
It is possible to add all the objects from a scene into the current scene by
using a different loading mode: SceneManagement.LoadSceneMode mode =
LoadSceneMode.Additive :
SceneManager.LoadScene (sceneIndex,
LoadSceneMode.Additive);
SceneManager.LoadScene (sceneName,
LoadSceneMode.Additive);
This call loads a level additively. Unlike LoadSceneMode.Single (default), it
does not destroy objects in the current level. Objects from the new level
are added to the current scene. This is useful for creating continuous virtual
worlds, where more content is loaded in as you walk through the environment.
The following script can be added to an object in the scene where the objects
from another scene are going to be loaded in:
1 usingUnityEngine ;
2 usingSystem . Collections ;
3
4 pu bl icclas s L o a d A d d i t i v e : M o n o B e h a v i o u r {
5
6 pu bl icvoid L o a d A d d O n C l i c k ( int l ev el I dx )
7 {
8 SceneManager . LoadScene ( levelIdx , LoadSceneMode . Additive );
9 }
10 }
sceneLoaded and delegates

It is possible to add a delegate to the event SceneManager.sceneLoaded to detect

when a scene has been loaded. A delegate is just a function that captures an
event triggered by Unity.

1 usingUnityEngine ;
2 usingSystem . Collections ;
3
4 pu bl icclas s C h a n g e M u s i c : M o n o B e h a v i o u r {
5 pu bl icA ud i oC li p l e v e l 2 M u s i c ;
6 pr iv a teA u d i o S o u r c e s o ur ce ;
7
8 voidAw ake () {
9 source = GetComponent < AudioSource >() ;
10 SceneManager . sceneLoaded = mySceneLoaded ;
11 }
12
13 voidm y S c e n e L o a d e d () {
14 intlevel = SceneManager . GetActiveScene (). buildIndex ;
15 if( level == 2){
16 source . clip = level2Music ;
17 source . Play ();
18 }
19 }
20 }
TimeScale - Pausing the game
A way to pause a game in Unity is via modifying the floatTime.timeScale variable.
timeScale is the scale at which the time is passing. It can also be used for slow
motion effects.
When timeScale is:
1.0 the time is passing as fast as real-time.
0.5 the time is passing 2× slower than real-time.
0 the game is basically paused (if all your functions are frame rate inde-
pendent).
Also:
FixedUpdate functions will not be called when timeScale is set to 0.
If you lower timeScale it is recommended to also lower
Time.fixedDeltaTime
(physics timer) by the same amount.
1 voidUpdate ()
2 {
3 if( Input . GetKeyDown ( KeyCode . Escape ))
4 {
5 //SwitchesTime.timeScalebetween0&1ifEscapeispressed.
6 Time . timeScale = 0
7 }
8 }
Reading List
Chapter 14: User Interface, Sams Teach Yourself Unity Game Development in
24 Hours
by Ben Tristem and Mike Geig.
Start menu in unity, Brackeys Tutorial
https://www.youtube.com/watch?v=zc8ac_qUXQY

Unity UI Components:
https://unity3d.com/learn/tutorials/topics/user-interface-ui/ui-
canvas
Unity User Interface:
https://unity3d.com/learn/tutorials/modules/beginner/live-training-
archive/the-new-ui