1 / 77

GUI / HUD

GUI / HUD. GUI / HUD . 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. 132-150 of Unity Game Development Essentials.

borna
Download Presentation

GUI / HUD

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GUI / HUD

  2. GUI / HUD • 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. 132-150 of Unity Game Development Essentials

  3. Example huds

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

  5. Augmented reality in medicine (see http://www.rti.org/news.cfm?nav=108&objectid=DF74868A-ECF0-46D9-BC58CB4E950D5236) 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.

  6. Augmented reality in medicine

  7. GUIHealthRing image healthPie5 image GUIFuelCell image

  8. Unity’s new GUI system • Traditional • 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 }

  9. references • http://unity3d.com/support/documentation/ScriptReference/GUI.html • http://unity3d.com/support/documentation/Components/GUI%20Scripting%20Guide.html

  10. GUI basics

  11. //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!" ); } }

  12. //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 ); } }

  13. /* 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!" ); } } }

  14. //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" ); }

  15. //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"); } }

  16. controls

  17. Controls summary • Label • Button • RepeatButton • TextField • TextArea • Toggle • Toolbar • SelectionGrid • HorizontalSlider • VerticalSlider • HorizontalScrollbar • VerticalScrollbar • ScrollView • Window • GUI.changed

  18. GUI class summary • All controls are part of the GUI runtime class (see http://unity3d.com/support/documentation/ScriptReference/GUI.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.

  19. Gui class summary 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.

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

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

  22. Label (C#) //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 ); } }

  23. button • 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.

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

  25. Button (C#) 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"); } }

  26. Repeat button • 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.

  27. Repeat button (JS) /* 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 } }

  28. Repeat button (C#) 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" ); } }

  29. Text field • The TextField Control is an interactive, editablesingle-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.

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

  31. Text field (C#) 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.)

  32. Text area • The TextArea Control is an interactive, editablemulti-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.

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

  34. Text area (C#) 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 ); } }

  35. toggle • 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.

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

  37. Toggle (C#) 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 ); } }

  38. Tool bar • 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.

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

  40. Tool bar (C#) 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 ); } }

  41. Selection grid • 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.

  42. Selection grid (JS) /* 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 ); }

  43. Selection grid (C#) 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 ); } }

  44. Horizontal slider • 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.

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

More Related