1 of 39

Additional Topics

on Unity

2 of 39

User Interfaces

2

3 of 39

Questions to Consider

  • What are user interfaces? What components do they consist of? (Think about your experiences with websites, mobile apps, etc.)
  • Why are UIs important in the context of Unity programs?

3

4 of 39

About User Interfaces

  • UIs typically provide the user with info and interactions with controls, like buttons
  • In Unity, UIs are on a flat 2D space, either drawn on the screen over the 3D world or as a flat surface in the world itself

Image Sources: APKPure & Pinterest

4

5 of 39

The UI Canvas

5

6 of 39

Canvas

  • Defines the area where all UI elements should be contained within
  • Shown as white box in Scene View
  • All other UI elements MUST be descendants of a Canvas
  • UI elements are drawn in the same order they appear in the Hierarchy
    • If two elements overlap, the later one will appear on top of the earlier one.

​

Image Source: Unity

6

7 of 39

Render Modes

Image Source: Unity

  • Screen Space - Overlay
    • Default option
    • Places Canvas on the screen over the 3D objects in world
    • Size automatically set and adjusted based on screen size
  • Screen Space - Camera
    • Places Canvas at specified distance away from Camera
    • Can be at a perspective/angle
    • Size also automatically set and adjusted based on screen size
  • World Space
    • Places Canvas into fixed position in world by setting position and rotation on transform, just like any other GameObject in 3D space
    • Better to have very large canvas and then scale down significantly (like 0.01 or 0.001) than set to scale so UI elements render properly
      • Do math to determine actual size (e.g. 1000 meter width * 0.001 scale = 1 meter wide Canvas in world)

7

8 of 39

Canvas Scaler

  • Defines whether and how Canvases should scale on different screen resolutions
  • For screen space UI, use scale with screen size
  • Can test different screen sizes and resolutions in Game View

8

9 of 39

Graphic Raycaster

  • Allows user to raycast onto canvases and the UI elements it contains via Input devices (i.e. mouse, joystick, etc.)
  • Essential for allowing interactivity with UI (e.g. clicking buttons, moving slider)
  • Third-party device SDKs often provide a custom graphic raycaster so that UI Canvases work with Input from their devices
    • OVR Raycaster for Oculus controllers
    • Gvr Pointer Graphic Raycaster for Google VR

devices

9

10 of 39

UI Elements

10

11 of 39

UI Elements

  • Just a regular GameObject in your scene with specific UI element component(s) attached to it
  • Serve as the building blocks for your UI
  • Each is easily customizable through component properties

11

12 of 39

Canvas Renderer

  • Required component on all UI elements
  • Renders the element onto the nearest parent Canvas

12

13 of 39

Rect Transforms

13

14 of 39

Rect Transforms

  • A component that derives from the Transform class
  • Automatically added to all descendant GameObjects of a Canvas (i.e. UI elements)
  • Defines with 2D position and size within Canvas
    • Has width and height
    • You shouldn’t modify Z-values

14

15 of 39

Rect Transform Properties

  • Anchors
    • A specified spot on the parent GameObject’s Rect Transform
    • Can set UI element to automatically stretch across part or all of the parent’s Rect Transform
  • Pivots
    • Rotations, resizing, and scaling occur around the pivot
  • Position
    • X & Y coordinates defined relative to the anchor’s position

15

16 of 39

Anchor Examples

Images Source: Unity

16

17 of 39

Event Systems

17

18 of 39

Event System

  • A way of sending events to objects in the application based on input (i.e. keyboard, mouse, etc.)
  • Main purposes:
    • Manage which GameObject is considered selected
    • Manage which Input Module is in use
    • Manage Raycasting (if required)
    • Updating all Input Modules as required
  • Only one Event System should ever be in a scene
  • Required to use UI Canvas, automatically added to scene (if not already present) when you add Canvas

18

19 of 39

Input Modules

  • On same GameObject as Event System
  • Main purposes:
    • Handling Input
    • Managing event state
    • Sending events to scene objects
  • Only one input module can ever be active at a time
  • Third-party device SDKs often provide a custom input modules for their devices
    • OVR Input Module - Oculus devices
    • Gvr Pointer Input Module - Google VR devices

19

20 of 39

Events

  • UI elements may have associated events (e.g. when a button is clicked)
  • Can provide reference to methods from other components and GameObjects
  • When event occurs, all referenced methods are called

20

21 of 39

Scene Management

21

22 of 39

What is a Scene?

  • A scene is a 3D space that contains GameObjects

Image Source: Through the Interface

22

23 of 39

Why Have Multiple Scenes?

  • Scenes logically divide up our app for better organization and help with flow
    • Multiple levels of a game or parts of an app
    • Starting menus
  • Each scene should serve a specific purpose and only have objects related to that purpose

Image Sources: YouTube & Pinterest

23

24 of 39

Loading Scenes

  • All scenes must be added to the project build settings
  • Changing scenes is accomplished using the SceneManager class
  • Scenes can be loaded using build index or scene name
  • Scenes can be loaded synchronously (during next frame) or asynchronously (in background)
    • Async should be done using coroutine
    • Async useful for having loading screen while you wait for a large scene/environment to load

24

25 of 39

How might we persist data between scenes?

25

26 of 39

DOn’T Destroy On Load

  • When loading new scene, all the GameObjects and components from old scene are destroyed
  • GameObjects marked as DontDestroyOnLoad will never be destroyed when changing scenes
    • You will have to destroy these GameObjects manually, if necessary at a later time

​

26

27 of 39

Events

27

28 of 39

Events

  • Let you know when something of interest has occurred
    • OnCollisionEnter - You’ve come into contact with another physics-based GameObject
    • OnButtonDown - A button has been pressed
    • Update - Computations for the next frame are occurring
  • You can define your own Events as well.

Images Source: Icon Archive

28

29 of 39

Delegates

  • Holds reference to a method (or multiple methods)
  • Methods must have same return type and parameters as defined in delegate
  • All methods currently referenced by the delegate are executed when delegate is called

​

29

30 of 39

Delegate Examples

Images Source: Unity

30

31 of 39

C# Events

  • Just a special type of delegate
  • Allows other components on other GameObjects to “subscribe” and “unsubscribe” to events
  • Built-in security
    • Only original class can call or modify delegate, others can only subscribe and unsubscribe their own methods to the event
  • Allows for cleaner and more modular code
    • Don’t deal with bunch of random references
    • Separation between the event and the execution (GameObject functionality can be kept within its own components)

31

32 of 39

Example C# Event Code

public class SomeClass : MonoBehaviour

{

public delegate void SomeAction();

public static event SomeAction OnAction;

...

OnAction();

}

​

public class OtherClass : MonoBehaviour

{

...

SomeClass.OnAction += SomeMethodInOtherClass;

...

}

32

33 of 39

UnityEvents

  • Remember how buttons and UI events allowed you to set references to methods via the Inspector?
  • You can define events in this way too via UnityEvents!

33

34 of 39

Example UnityEvent Code

public class SomeClass : MonoBehaviour

{

public UnityEvent OnAction;

...

OnAction.Invoke();

}

​

public class OtherClass : MonoBehaviour

{

public void SomeMethodInOtherClass()

{ ... }

}

34

35 of 39

Coroutines

35

36 of 39

Coroutine

  • “A coroutine is like a function that has the ability to pause execution and return control to Unity but then to continue where it left off

on the following frame.”- Unity Docs

Images Source: Techtalks.lk

36

37 of 39

Why Use Coroutines?

  • Some tasks aren’t possible to do in just a single frame
    • E.g. Changing properties over time
  • Some tasks are computationally expensive
    • Don’t want to freeze the current frame, instead complete a little bit during each frame
  • You want to wait for something to finish before you execute a certain piece of code
    • Has data finished downloading before you access it?
    • Has scene finished loading?
    • Has sound finished playing?

​

37

38 of 39

Thanks!

Any questions?

You can find us at:

Office Hours

Piazza

38

39 of 39

Credits

Special thanks to all the people who made and released these awesome resources for free:

  • Presentation template by SlidesCarnival

39