2D (not 3D) display or interface elements GUI = Graphical User Interface HUD = Heads Up Display ...

transcript

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

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

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

GUIHealthRing imagehealthPie5 imageGUIFuelCell image

1. Traditional

2. Immediate mode GUIUnity 2 and newerCombines creation and response into one.ex.

function OnGUI ( ) { if (GUI.Button( Rect(50, 50, 100, 20), "Start

Game" )) Application.LoadLevel( "FirstLevel" ); //load the

level}

http://unity3d.com/support/documentation/ScriptReference/GUI.html

http://unity3d.com/support/documentation/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 */

// 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 */

//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 */

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;

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. Label2. Button3. RepeatButton4. TextField5. TextArea6. Toggle7. Toolbar8. SelectionGrid9. HorizontalSlider10. VerticalSlider11. HorizontalScrollbar12. VerticalScrollbar13. ScrollView14. Window15. GUI.changed

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.

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;

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 */

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 */

if (GUI.RepeatButton(Rect (25, 25, 100, 30), "RepeatButton")) {

// This code is executed every frame that the RepeatButton remains clicked

using UnityEngine;

public Texture btnTexture;

void OnGUI ( ) {

if (!btnTexture) {

Debug.LogError( "Please assign a texture on the inspector" );

return;

if (GUI.RepeatButton(new Rect(10, 10, 50, 50), btnTexture))

Debug.Log( "Clicked the button with an image" );

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 ofi = i + 1;

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;

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;

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;

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" ];

selectionGridInt = GUI.SelectionGrid(

Rect (25, 25, 100, 30),

selectionGridInt, selectionStrings, 2 );

using UnityEngine;

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 );}

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;

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

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

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";

// 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;

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

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;

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;

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;

public Rect windowRect0 = new Rect( 20, 20, 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" );

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;

void OnGUI ( ) {

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;

void OnGUI ( ) {

This is quite an interesting (i.e., tricky) example of Unity’s Immediate Mode GUI!How many times is DoMyWindow called? 2XWhen is DoMyWindow called?

using UnityEngine;

void OnGUI ( ) {

This is quite an interesting (i.e., tricky) example of Unity’s Immediate Mode GUI!How many times is DoMyWindow called? 2XWhen 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"];

// 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;

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

2D (not 3D) display or interface elements GUI = Graphical User Interface HUD = Heads Up Display ...

Documents