 2D (not 3D) display or interface elements  GUI = Graphical User Interface  HUD = Heads Up Display  ex. player’s health, lives remaining, number of fuel cells, score, etc.  augmented reality  “Displaying the battery GUI,” p of Unity Game Development Essentials

Longitudinal cross-section of a German Revi C12/A, built in 1937 (above), as seen in a Spitfire cockpit (left).

(see Conventional laparoscopy requires the surgeon to view a 2-dimensional version of the procedure indirectly through a video monitor. Augmented-reality-guided laparoscopy allows the surgeon to view a 3- dimensional version of the procedure directly through a head-mounted display.

GUIHealthRing image healthPie5 image GUIFuelCell image

1. Traditional 2. Immediate mode GUI  Unity 2 and newer  Combines creation and response into one.  ex. function OnGUI ( ) { if (GUI.Button( Rect(50, 50, 100, 20), "Start Game" )) Application.LoadLevel( "FirstLevel" ); //load the level }

 /ScriptReference/GUI.html /ScriptReference/GUI.html  /Components/GUI%20Scripting%20Guide.html /Components/GUI%20Scripting%20Guide.html

//button that prints a message in response to a click function OnGUI ( ) { if (GUI.Button( Rect(10,10,150,100), "I am a button" )) { print( "You clicked the button!" ); }

//display a box w/ 2 buttons /* Example level loader */ function OnGUI ( ) { // Make a background box GUI.Box( Rect(10,10,100,90), "Loader Menu" ); // Make the first button. If it is pressed, Application.Loadlevel (1) will be executed if (GUI.Button( Rect(20,40,80,20), "Level 1" )) { Application.LoadLevel( 1 ); } // Make the second button. if (GUI.Button( Rect(20,70,80,20), "Level 2" )) { Application.LoadLevel( 2 ); }

/* flashing button example */ function OnGUI ( ) { //button only appears when the following is true if (Time.time % 2 < 1) { if (GUI.Button(Rect (10,10,200,20), "Meet the flashing button")) { print ( "You clicked me!" ); }

//adjusting to window size /* Screen.width & Screen.height example */ function OnGUI ( ) { GUI.Box( Rect(0,0,100,50),"Top-left" ); GUI.Box( Rect(Screen.width-100,0,100,50),"Top-right" ); GUI.Box( Rect(0,Screen.height-50,100,50),"Bottom-left" ); GUI.Box( Rect(Screen.width-100,Screen.height-50,100,50),"Bottom-right" ); }

//button w/ image & button w/ text /* Button Content examples */ var icon : Texture2D; function OnGUI ( ) { if (GUI.Button(Rect(10,10, 100, 50), icon)) { print("you clicked the icon"); } if (GUI.Button(Rect(10,70, 100, 20), "This is text")) { print("you clicked the text button"); }

1. Label 2. Button 3. RepeatButton 4. TextField 5. TextArea 6. Toggle 7. Toolbar 8. SelectionGrid 9. HorizontalSlider 10. VerticalSlider 11. HorizontalScrollbar 12. VerticalScrollbar 13. ScrollView 14. Window 15. GUI.changed

 All controls are part of the GUI runtime class (see I.html). I.html  GUI class variables  skin - The global skin to use.  color - Global tinting color for the GUI.  backgroundColor - Global tinting color for all background elements rendered by the GUI.  contentColor - Tinting color for all text rendered by the GUI.  changed - Returns true if any controls changed the value of the input data.  enabled - Is the GUI enabled?  matrix - The GUI transform matrix.  tooltip - The tooltip of the control the mouse is currently over, or which has keyboard focus. (Read Only).  depth - The sorting depth of the currently executing GUI behaviour.

GUI class functions  Label - Make a text or texture label on screen.  DrawTexture - Draw a texture within a rectangle.  Box - Make a graphical box.  Button - Make a single press button. The user clicks them and something happens immediately.  RepeatButton - Make a button that is active as long as the user holds it down.  TextField - Make a single-line text field where the user can edit a string.  PasswordField - Make a text field where the user can enter a password.  TextArea - Make a Multi-line text area where the user can edit a string.  SetNextControlName - Set the name of the next control.  GetNameOfFocusedControl - Get the name of named control that has focus.  FocusControl - Move keyboard focus to a named control.  Toggle - Make an on/off toggle button.  Toolbar - Make a toolbar  SelectionGrid - Make a grid of buttons.  HorizontalSlider - A horizontal slider the user can drag to change a value between a min and a max.  VerticalSlider - A vertical slider the user can drag to change a value between a min and a max.  HorizontalScrollbar - Make a horizontal scrollbar. Scrollbars are what you use to scroll through a document. Most likely, you want to use scrollViews instead.  VerticalScrollbar - Make a vertiical scrollbar. Scrollbars are what you use to scroll through a document. Most likely, you want to use scrollViews instead.  BeginGroup - Begin a group. Must be matched with a call to EndGroup.  EndGroup - End a group.  BeginScrollView - Begin a scrolling view inside your GUI.  EndScrollView - Ends a scrollview started with a call to BeginScrollView.  ScrollTo - Scrolls all enclosing scrollviews so they try to make position visible.  Window - Make a popup window.  DragWindow - Make a window draggable.  BringWindowToFront - Bring a specific window to front of the floating windows.  BringWindowToBack - Bring a specific window to back of the floating windows.  FocusWindow - Make a window become the active window.  UnfocusWindow - Remove focus from all windows.

 The Label is non-interactive. It is for display only. It cannot be clicked or otherwise moved. It is best for displaying information only.

//text example using UnityEngine; using System.Collections; public class example : MonoBehaviour { void OnGUI ( ) { GUI.Label( new Rect(10, 10, 100, 20), "Hello World!" ); }

//icon/image/texture example using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Texture2D textureToDisplay; void OnGUI ( ) { GUI.Label( new Rect(10, 40, textureToDisplay.width, textureToDisplay.height), textureToDisplay ); }

 The Button is a typical interactive button. It will respond a single time when clicked, no matter how long the mouse remains depressed. The response occurs as soon as the mouse button is released.  In UnityGUI, Buttons will return true when they are clicked. To execute some code when a Button is clicked, you wrap the GUI.Button function in an if statement. Inside the if statement is the code that will be executed when the Button is clicked.

/* GUI.Button example */ function OnGUI ( ) { if (GUI.Button(Rect(25, 25, 100, 30), "Button")) { // This code is executed when the Button is clicked }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Texture btnTexture; void OnGUI ( ) { if (!btnTexture) { Debug.LogError("Please assign a texture on the inspector"); return; } if (GUI.Button(new Rect(10, 10, 50, 50), btnTexture)) Debug.Log("Clicked the button with an image"); if (GUI.Button(new Rect(10, 70, 50, 30), "Click")) Debug.Log("Clicked the button with text"); }

 RepeatButton is a variation of the regular Button. The difference is, RepeatButton will respond every frame that the mouse button remains depressed. This allows you to create click-and-hold functionality.  In UnityGUI, RepeatButtons will return true for every frame that they are clicked. To execute some code while the Button is being clicked, you wrap the GUI.RepeatButton function in an if statement. Inside the if statement is the code that will be executed while the RepeatButton remains clicked.

/* GUI.RepeatButton example */ function OnGUI ( ) { if (GUI.RepeatButton(Rect (25, 25, 100, 30), "RepeatButton")) { // This code is executed every frame that the RepeatButton remains clicked }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Texture btnTexture; void OnGUI ( ) { if (!btnTexture) { Debug.LogError( "Please assign a texture on the inspector" ); return; } // This code is executed every frame that the RepeatButton remains clicked if (GUI.RepeatButton(new Rect(10, 10, 50, 50), btnTexture)) Debug.Log( "Clicked the button with an image" ); // This code is executed every frame that the RepeatButton remains clicked if (GUI.RepeatButton(new Rect(10, 70, 50, 30), "Click")) Debug.Log( "Clicked the button with text" ); }

 The TextField Control is an interactive, editable single-line field containing a text string.  The TextField will always display a string.  You must provide the string to be displayed in the TextField.  When edits are made to the string, the TextField function will return the edited string.

/* GUI.TextField example */ var textFieldString = "text field"; function OnGUI ( ) { textFieldString = GUI.TextField( Rect(25, 25, 100, 30), textFieldString ); } Somewhat reminiscent of i = i + 1;

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public string stringToEdit = "Hello World"; void OnGUI ( ) { stringToEdit = GUI.TextField( new Rect(10, 10, 200, 20), stringToEdit, 25 ); } (The maximum length of the string. If omitted, the user can type for ever and ever.)

 The TextArea Control is an interactive, editable multi-line area containing a text string.  The TextArea will always display a string.  You must provide the string to be displayed in the TextArea.  When edits are made to the string, the TextArea function will return the edited string.

/* GUI.TextArea example */ var textAreaString = "text area"; function OnGUI ( ) { textAreaString = GUI.TextArea( Rect(25, 25, 100, 30), textAreaString ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public string stringToEdit = "Hello World \n I've got 2 lines..."; void OnGUI ( ) { stringToEdit = GUI.TextArea( new Rect(10, 10, 200, 100), stringToEdit, 200 ); }

 The Toggle Control creates a checkbox with a persistent on/off state. The user can change the state by clicking on it.  The Toggle on/off state is represented by a true/false boolean.  You must provide the boolean as a parameter to make the Toggle represent the actual state.  The Toggle function will return a new boolean value if it is clicked.  In order to capture this interactivity, you must assign the boolean to accept the return value of the Toggle function.

/* GUI.Toggle example */ var toggleBool = true; function OnGUI ( ) { toggleBool = GUI.Toggle( Rect(25, 25, 100, 30), toggleBool, "Toggle" ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Texture aTexture; private bool toggleTxt = false; //one toggle private bool toggleImg = false; //another toggle void OnGUI ( ) { if (!aTexture) { Debug.LogError( "Please assign a texture in the inspector." ); return; } toggleTxt = GUI.Toggle( new Rect(10, 10, 100, 30), toggleTxt, "A Toggle text" ); toggleImg = GUI.Toggle( new Rect(10, 50, 50, 50), toggleImg, aTexture ); }

 The Toolbar Control is essentially a row of Buttons. Only one of the Buttons on the Toolbar can be active at a time, and it will remain active until a different Button is clicked. This behavior emulates the behavior of a typical Toolbar. You can define an arbitrary number of Buttons on the Toolbar.  The active Button in the Toolbar is tracked through an integer.  You must provide the integer as an argument in the function.  To make the Toolbar interactive, you must assign the integer to the return value of the function.  The number of elements in the content array that you provide will determine the number of Buttons that are shown in the Toolbar.

/* GUI.Toolbar example */ var toolbarInt = 0; var toolbarStrings : String[] = [ "Toolbar1", "Toolbar2", "Toolbar3" ]; function OnGUI () { toolbarInt = GUI.Toolbar( Rect (25, 25, 250, 30), toolbarInt, toolbarStrings ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public int toolbarInt = 0; public string[] toolbarStrings = new string[] { "Toolbar1", "Toolbar2", "Toolbar3" }; void OnGUI ( ) { toolbarInt = GUI.Toolbar( new Rect(25, 25, 250, 30), toolbarInt, toolbarStrings ); }

 The SelectionGrid Control is a multi-row Toolbar.  You can determine the number of columns and rows in the grid.  Only one Button can be active at time.  The active Button in the SelectionGrid is tracked through an integer.  You must provide the integer as an argument in the function.  To make the SelectionGrid interactive, you must assign the integer to the return value of the function.  The number of elements in the content array that you provide will determine the number of Buttons that are shown in the SelectionGrid.  You also can indictate the number of columns through the function arguments.

/* GUI.SelectionGrid example */ var selectionGridInt : int = 0; var selectionStrings : String[] = [ "Grid 1", "Grid 2", "Grid 3", "Grid 4" ]; function OnGUI ( ) { selectionGridInt = GUI.SelectionGrid( Rect (25, 25, 100, 30), selectionGridInt, selectionStrings, 2 ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public int selGridInt = 0; public string[] selStrings = new string[] { "Grid 1", "Grid 2", "Grid 3", "Grid 4" }; void OnGUI ( ) { selGridInt = GUI.SelectionGrid( new Rect(25, 25, 100, 30), selGridInt, selStrings, 2 ); }

 The HorizontalSlider Control is a typical horizontal sliding knob that can be dragged to change a value between predetermined min and max values.  The position of the Slider knob is stored as a float.  To display the position of the knob, you provide that float as one of the arguments in the function.  There are two additional values that determine the minimum and maximum values.  If you want the slider knob to be adjustable, assign the slider value float to be the return value of the Slider function.

/* Horizontal Slider example */ var hSliderValue : float = 0.0; function OnGUI ( ) { hSliderValue = GUI.HorizontalSlider( Rect (25, 25, 100, 30), hSliderValue, 0.0, 10.0 ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public float hSliderValue = 0.0F; void OnGUI ( ) { hSliderValue = GUI.HorizontalSlider( new Rect(25, 25, 100, 30), hSliderValue, 0.0F, 10.0F ); }

 The VerticalSlider Control is a typical vertical sliding knob that can be dragged to change a value between predetermined min and max values.  The position of the Slider knob is stored as a float.  To display the position of the knob, you provide that float as one of the arguments in the function.  There are two additional values that determine the minimum and maximum values.  If you want the slider knob to be adjustable, assign the slider value float to be the return value of the Slider function.

/* Vertical Slider example */ var vSliderValue : float = 0.0; function OnGUI ( ) { vSliderValue = GUI.VerticalSlider( Rect (25, 25, 100, 30), vSliderValue, 10.0, 0.0 ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public float vSliderValue = 0.0F; void OnGUI ( ) { vSliderValue = GUI.VerticalSlider( new Rect(25, 25, 100, 30), vSliderValue, 10.0F, 0.0F ); }

 The HorizontalScrollbar Control is similar to a Slider Control, but visually similar to Scrolling elements for web browsers or word processors. This control is used to navigate the ScrollView Control.  Horizontal Scrollbars are implemented identically to Horizontal Sliders with one exception: There is an additional argument which controls the width of the Scrollbar knob itself.

/* Horizontal Scrollbar example */ var hScrollbarValue : float; function OnGUI ( ) { hScrollbarValue = GUI.HorizontalScrollbar( Rect(25, 25, 100, 30), hScrollbarValue, 1.0, 0.0, 10.0 ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public float hSbarValue; void OnGUI ( ) { hSbarValue = GUI.HorizontalScrollbar( new Rect(25, 25, 100, 30), hSbarValue, 1.0F, 0.0F, 10.0F ); }

 The VerticalScrollbar Control is similar to a Slider Control, but visually similar to Scrolling elements for web browsers or word processors. This control is used to navigate the ScrollView Control.  Vertical Scrollbars are implemented identically to Vertical Sliders with one exception: There is an additional argument which controls the height of the Scrollbar knob itself.

/* Vertical Scrollbar example */ var vScrollbarValue : float; function OnGUI ( ) { vScrollbarValue = GUI. VerticalScrollbar( Rect(25, 25, 100, 30), vScrollbarValue, 1.0, 10.0, 0.0 ); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public float vSbarValue; void OnGUI ( ) { vSbarValue = GUI.VerticalScrollbar( new Rect(25, 25, 100, 30), vSbarValue, 1.0F, 10.0F, 0.0F ); }

 ScrollViews are Controls that display a viewable area of a much larger set of Controls.  ScrollViews require two Rects as arguments. The first Rect defines the location and size of the viewable ScrollView area on the screen. The second Rect defines the size of the space contained inside the viewable area.  If the space inside the viewable area is larger than the viewable area, Scrollbars will appear as appropriate. You must also assign and provide a 2D Vector which stores the position of the viewable area that is displayed.

/* ScrollView example */ var scrollViewVector : Vector2 = Vector2.zero; var innerText : String = "I am inside the ScrollView"; function OnGUI ( ) { // Begin the ScrollView scrollViewVector = GUI.BeginScrollView( Rect (25, 25, 100, 100), scrollViewVector, Rect(0, 0, 400, 400) ); // Put something inside the ScrollView innerText = GUI.TextArea( Rect (0, 0, 400, 400), innerText ); // End the ScrollView GUI.EndScrollView(); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Vector2 scrollPosition = Vector2.zero; void OnGUI ( ) { scrollPosition = GUI.BeginScrollView( new Rect(10, 300, 100, 100), scrollPosition, new Rect(0, 0, 220, 200) ); GUI.Button( new Rect(0, 0, 100, 20),"Top-left" ); GUI.Button( new Rect(120, 0, 100, 20),"Top-right" ); GUI.Button( new Rect(0, 180, 100, 20),"Bottom-left" ); GUI.Button( new Rect(120, 180, 100, 20),"Bottom-right" ); GUI.EndScrollView(); }

a little

 Windows are dragable containers of Controls. They can receive and lose focus when clicked. Because of this, they are implemented slightly differently from the other Controls. Each Window has an id number, and its contents are declared inside a separate function that is called when the Window has focus.  Windows are the only Control that require an additional function to work properly. You must provide an id number and a function name to be executed for the Window. Inside the Window function, you create your actual behaviors or contained Controls.

/* Window example */ var windowRect : Rect = Rect( 20, 20, 120, 50 ); function OnGUI ( ) { windowRect = GUI.Window( 0, windowRect, WindowFunction, "My Window" ); } function WindowFunction ( windowID : int ) { // Draw any Controls inside the window here } Function used as an argument. This does not directly/immediately call the function. (Note the missing ().)

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Rect windowRect = new Rect( 20, 20, 120, 50 ); void OnGUI ( ) { windowRect = GUI.Window( 0, windowRect, DoMyWindow, "My Window" ); } void DoMyWindow ( int windowID ) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")) print( "Got a click" ); } Function used as an argument. This does not directly/immediately call the function. (Note the missing ().)

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public bool showWindow = true; void OnGUI ( ) { showWindow = GUI.Toggle( new Rect(10, 10, 100, 20), showWindow, “show" ); if (showWindow) GUI.Window( 0, new Rect(110, 10, 200, 60), DoWindow0, "Basic Window" ); } void DoWindow0 ( int windowID ) { GUI.Button( new Rect(10, 30, 80, 20), "Click Me!" ); } Toggle that switches the display of a window on and off (via showWindow boolean+toggle).

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Rect windowRect0 = new Rect( 20, 20, 120, 50 ); public Rect windowRect1 = new Rect( 20, 100, 120, 50 ); void OnGUI ( ) { GUI.color = Color.red; windowRect0 = GUI.Window( 0, windowRect0, DoMyWindow, "Red Window" ); GUI.color = Color.green; windowRect1 = GUI.Window( 1, windowRect1, DoMyWindow, "Green Window" ); } void DoMyWindow ( int windowID ) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")) print( "Got a click in window with color " + GUI.color ); GUI.DragWindow( new Rect(0, 0, 10000, 10000) ); //make window drag-able within this area } Create windows with different colors, and specify dragable region bounds.

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Rect windowRect0 = new Rect( 20, 20, 120, 50 ); public Rect windowRect1 = new Rect( 20, 100, 120, 50 ); void OnGUI ( ) { GUI.color = Color.red; windowRect0 = GUI.Window( 0, windowRect0, DoMyWindow, "Red Window" ); GUI.color = Color.green; windowRect1 = GUI.Window( 1, windowRect1, DoMyWindow, "Green Window" ); } void DoMyWindow ( int windowID ) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")) print( "Got a click in window with color " + GUI.color ); GUI.DragWindow( new Rect(0, 0, 10000, 10000) ); //make window dragable within this area } This is quite an interesting (i.e., tricky) example of Unity’s Immediate Mode GUI! How many times is DoMyWindow called? When is DoMyWindow called?

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Rect windowRect0 = new Rect( 20, 20, 120, 50 ); public Rect windowRect1 = new Rect( 20, 100, 120, 50 ); void OnGUI ( ) { GUI.color = Color.red; windowRect0 = GUI.Window( 0, windowRect0, DoMyWindow, "Red Window" ); GUI.color = Color.green; windowRect1 = GUI.Window( 1, windowRect1, DoMyWindow, "Green Window" ); } void DoMyWindow ( int windowID ) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")) print( "Got a click in window with color " + GUI.color ); GUI.DragWindow( new Rect(0, 0, 10000, 10000) ); //make window drag-able within this area } This is quite an interesting (i.e., tricky) example of Unity’s Immediate Mode GUI! How many times is DoMyWindow called?2X When is DoMyWindow called?

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public Rect windowRect0 = new Rect( 20, 20, 120, 50 ); public Rect windowRect1 = new Rect( 20, 100, 120, 50 ); void OnGUI ( ) { GUI.color = Color.red; windowRect0 = GUI.Window( 0, windowRect0, DoMyWindow, "Red Window" ); GUI.color = Color.green; windowRect1 = GUI.Window( 1, windowRect1, DoMyWindow, "Green Window" ); } void DoMyWindow ( int windowID ) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")) print( "Got a click in window with color " + GUI.color ); GUI.DragWindow( new Rect(0, 0, 10000, 10000) ); //make window drag-able within this area } This is quite an interesting (i.e., tricky) example of Unity’s Immediate Mode GUI! How many times is DoMyWindow called?2X When is DoMyWindow called? Immediately after each call to GUI.Window (note that GUI.color is static).

 Hint: You can use the alpha component of GUI.color to fade windows in and out!  See Also:  DragWindow – make a window draggable  BringWindowToFront - Bring a specific window to front of the floating windows.  BringWindowToBack - Bring a specific window to back of the floating windows.

a little

 To detect if the user did any action in the GUI (clicked a button, dragged a slider, etc), read the GUI.changed value from your script. This gets set to true when the user has done something, making it easy to validate the user input.  A common scenario would be for a Toolbar, where you want to change a specific value based on which Button in the Toolbar was clicked. You don't want to assign the value in every call to OnGUI(), only when one of the Buttons has been clicked.  GUI.changed will return true if any GUI Control placed before it was manipulated by the user.

/* GUI.changed example */ private var selectedToolbar : int = 0; private var toolbarStrings = ["One", "Two"]; function OnGUI ( ) { // Determine which button is active, whether it was clicked this frame or not selectedToolbar = GUI.Toolbar( Rect (50, 10, Screen.width - 100, 30), selectedToolbar, toolbarStrings ); // If the user clicked a new Toolbar button this frame, we'll process their input if (GUI.changed) { print ("The toolbar was clicked"); if (selectedToolbar == 0) { print ("First button was clicked"); } else { print ("Second button was clicked"); }

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public string stringToEdit = "Modify me."; void OnGUI ( ) { stringToEdit = GUI.TextField( new Rect(10, 10, 200, 20), stringToEdit, 25 ); if (GUI.changed) Debug.Log( "Text field has changed." ); }