1. GUIs and Events
CSE 3541/5541
Matt Boggus

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

3. Graphical user interfaces

4. GUI – graphical user interface
Screenshot from video:

5. Affordances Actions an object is obviously suited for Image sources:

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

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

8. Unity specific GUI component reference materials
For more info these types, refer to:

9. Design reference
By: Donald A. Norman

10. 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

11. Event-Driven Programming

12. 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

13. 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

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

15. 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 }

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

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

18. Delegates

19. 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);

20. 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;

21. events

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

23. 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;

24. 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;

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

26. Additional slides

27. Image source in image

28. Common GUI object types