GUIs and Events CSE 3541/5541 Matt Boggus

Outline GUIs and GUI components GUI design Event-driven programming paradigm Control flow in an event loop Code samples using delegates and events

Graphical user interfaces

GUI – graphical user interface Screenshot from video: https://unity3d.com/learn/tutorials/topics/user-interface-ui/ui-canvas?playlist=17111

Affordances Actions an object is obviously suited for Image sources: https://doctordisruption.com/principles-of-design-51-affordance/ https://paaralan.blogspot.com/2010/09/affordance-and-educational-games.html

Image source: http://www3. ntu. edu

Image (third party) source: http://slideplayer.com/slide/7337676/

Unity specific GUI component reference materials For more info these types, refer to: https://unity3d.com/learn/tutorials/s/user-interface-ui https://docs.unity3d.com/ScriptReference/

Design reference By: Donald A. Norman

Seven principles for design Use knowledge in the world and knowledge in the head Make things visible Get the mappings right Simplify the structure of tasks Exploit the power of constraints Design for error When all else fails, standardize

Event-Driven Programming

Some programming paradigms Event-driven programming Control flow determined by events Input (mouse click, key press, sensors) Timers or other object update logic Messages from other programs or threads For comparison, study Imperative programming Structured programming Procedural programming

Event-driven programming Control flow or program state changes driven based on responding to events rather than a strict ordering of statements Implementation details can vary Software I topic: polling vs. callbacks Software I topic: model-view-controllers

Game/Animation loop main(){ Initialize(); while(true){ DrawScene(); HandleEvents(); UpdateObjects(); }

Unity example script using UnityEngine; using System.Collections; public class SomeScript : MonoBehaviour { // fields void Start() { // code to run when start is pressed } void Update () { // code to run on repeat during execution } // other methods }

Note about class definition public class SomeScript : MonoBehaviour vs. public class SomeOtherClass

Unity example script – event polling public class SomeExampleScript : MonoBehaviour { void Update () { if ( Input.GetKeyDown(“r”) ) { Reset(); } if (Input.GetKeyDown(“a”) || Input.GetKeyDown(“left”) { MoveLeft(); // …

Delegates

public class DelegateScript : MonoBehaviour { delegate void MyDelegate(int num); MyDelegate myDelegate; void Start () { myDelegate = PrintNum; myDelegate(50); myDelegate = DoubleNum; } void PrintNum(int num) print ("Print Num: " + num); void DoubleNum(int num) print ("Double Num: " + num * 2);

public class MulticastScript : MonoBehaviour { delegate void MultiDelegate(); MultiDelegate myMultiDelegate; void Start () { myMultiDelegate += PowerUp; myMultiDelegate += TurnRed; if(myMultiDelegate != null) myMultiDelegate(); } void PowerUp(){ print ("Orb is powering up!"); void TurnRed(){ renderer.material.color = Color.red;

events

public class EventManager : MonoBehaviour { public delegate void ClickAction(); public static event ClickAction OnClicked; void OnGUI() if(GUI.Button( new Rect(Screen.width / 2 - 50, 5, 100, 30), "Click")) if(OnClicked != null) OnClicked(); }

public class TeleportScript : MonoBehaviour { void OnEnable() EventManager.OnClicked += Teleport; } void OnDisable() EventManager.OnClicked -= Teleport; void Teleport() Vector3 pos = transform.position; pos.y = Random.Range(1.0f, 3.0f); transform.position = pos;

public class TurnColorScript : MonoBehaviour { void OnEnable() EventManager.OnClicked += TurnColor; } void OnDisable() EventManager.OnClicked -= TurnColor; void TurnColor() Color col = new Color(Random.value, Random.value, Random.value); renderer.material.color = col;

Summary GUIs and GUI components GUI design Event-driven programming paradigm Control flow in an event loop Code samples using delegates and events

Additional slides

Image source in image

Common GUI object types http://www.sttheresaotcj.org/File_Uploads/Technology/common_gui_objects_2.pdf

http://slideplayer.com/slide/7337676/