UFCFSU-30-13D Technologies for the Web
3D Technologies for the Web
Creating and Using GUI Components
UFCFSU-30-23D Technologies for the Web
Agenda
GUI Components GUI Layout Using Styles and Skins for Design ‘Look and Feel’ Scripting GUI Communication with World Objects
UFCFSU-30-23D Technologies for the Web
Unity GUI Components
• The Unity Graphical User Interface (GUI) component library includes all the typical elements for building interfaces
• Buttons, Check Boxes, Radio Buttons, Text Fields, Edit Fields, Scroll Bars
• Unity also features horizontal and vertical sliders for controlling continuous value based data
• Components are positioned on a coordinate grid that relates to the current screen size of the deployed project
• Components can be grouped so that there screen position may be declared or modified collectively
UFCFSU-30-23D Technologies for the Web
GUI Basics
void OnGUI () {
// Make a background box
GUI.Box (new Rect (10,10,100,90), "Loader Menu");
// Make the first button. When pressed,load a scene
if (GUI.Button (new Rect (20,40,80,20), "Level 1")) {
Application.LoadLevel (1);
}
// Make the second button.
if (GUI.Button (new Rect (20,70,80,20), "Level 2")) {
Application.LoadLevel (2);
}
}
UFCFSU-30-23D Technologies for the Web
Example of GUI Box and Buttons
UFCFSU-30-23D Technologies for the Web
Declaring GUI Controls
• Type (Position, Content) – Type is the control type e.g. Button, Label etc.
• The Position is the first argument in any GUI Control function.
• The argument itself is provided with a Rect() function.
• Rect() defines four properties: left-most position, top-most position, total width, total height.
• All of these values are provided in integers, which correspond to pixel values.
• All Unity GUI controls work in Screen Space, which is the resolution of the published player in pixels.
UFCFSU-30-23D Technologies for the Web
Declaring GUI Controls
Content - The second argument for a GUI Control is the actual content to be displayed with the Control. Most often you will want to display some text or an image on your Control. To display text, pass a string as the Content argument like this:
void OnGUI () {
GUI.Label (new Rect (0,0,100,50), ”Hello World");
}
Thus GUI.Label is the Type, Rect (0,0,100, 50) is the Position(x=0, y=0, width of 100 (pixels), height of 50 (pixels))
Content is “Hello World” The keyword ‘new’ is required for C#
UFCFSU-30-23D Technologies for the Web
GUI Styles and GUI Skins
• GUI Control appearances are dictated with GUIStyles.
• By default, when you create a Control without defining a GUIStyle, Unity's default GUIStyle is applied.
• GUIStyles are designed to mimic Cascading Style Sheets (CSS) for web browsers.
• Where the Control defines the content, the Style defines the appearance. This allows you to create combinations like a functional Toggle which looks like a normal Button.
• GUISkins are a collection of GUIStyles. Styles define the appearance of
a GUI Control. You do not have to use a Skin if you want to use a Style.
UFCFSU-30-23D Technologies for the Web
GUI Skins
• GUI Control appearances are dictated with GUIStyles.
• By default, when you create a Control without defining a GUIStyle, Unity's default GUIStyle is applied.
• GUIStyles are designed to mimic Cascading Style Sheets (CSS) for web browsers.
• Many different CSS methodologies have been adapted, including differentiation of individual state properties for styling, and separation between the content and the appearance.
• Where the Control defines the content, the Style defines the appearance. This allows you to create combinations like a functional Toggle which looks like a normal Button.
UFCFSU-30-23D Technologies for the Web
Example GUIStyle
UFCFSU-30-23D Technologies for the Web
Example GUISkin
UFCFSU-30-23D Technologies for the Web
The OnGUI () method
void OnGUI () {
if (GUI.Button (new Rect (25, 25, 100, 30), "Button")) {
// code here is executed when the Button is clicked
}
}
UFCFSU-30-23D Technologies for the Web
GUI Communication with another Script
Game Object
GUIControl.cs
void OnGui(){
Button with code to handle event and communicate with aScript.cs
aScript.cs
Code to handle message sent by GUIControl.cs attached to dummy object
UFCFSU-30-23D Technologies for the Web
GUI to Script Example Number of Missiles (Text
Field)
Fire!
(Button)
16 (1 x 1) CubePhysics Wall
UFCFSU-30-23D Technologies for the Web
Wall After Missile Launched via Fire Button
UFCFSU-30-23D Technologies for the Web
OnGui() method to send message to function in launchMissile script
“Launcher” Game Object
GUIControl.cs
void OnGui(){
Button with code to handle event and communicate with function in launchMissile.cs launchMissile.cs
Code to handle message sent by GUIControl.cs
UFCFSU-30-23D Technologies for the Web
The OnGUI () method in GUIControl.js
// declare a variable of type GameObject
public GameObject cannon;
void OnGUI () {
// assign the game object with the name//”Launcher” to the variable
cannon = GameObject.Find("Launcher");
UFCFSU-30-23D Technologies for the Web
The OnGUI () method
if (GUI.Button (new Rect (10,10,50,40), "Fire!")) {
/*get the component (script) called launchMissile and call the method it contains called fireMissile()
*/
cannon.GetComponent<launchMissile>.fireMissile();
}
UFCFSU-30-23D Technologies for the Web
method in launchMissile.js
// this function is called when the fire button is pressed//in GUIControl.js
public void fireMissile(){
Instantiate(aMissile, transform.position, transform.rotation);
}
UFCFSU-30-23D Technologies for the Web
Updating the TextField in GUIControl.js
int numberOfMissiles = 0;
String missileCount;
GUI.TextField (new Rect (400, 30, 50, 20), missileCount, 25);
void Update () {
// convert the numberOfMissiles to a String Type
// then assign value to missile count variable
missileCount = numberOfMissiles.ToString();
}
UFCFSU-30-23D Technologies for the Web
Summary
• The Unity Graphical User Interface (GUI) component library includes all the typical elements for building interfaces
• GUIStyles are designed to mimic Cascading Style Sheets (CSS) for web browsers. GUISkins are a collection of styles.
• By default, when you create a Control without defining a GUIStyle, Unity's default GUIStyle is applied.
• The method OnGUI() is used to include components that provide the interface look and feel.
• Communication to other scripts from OnGUI is achieved by using code which finds game objects that have named scripts attached, then reference the required method in that script.
• GameObject variableName;
• variableName = GameObject.Find(”GameObjectName");
• variableName.GetComponent(scriptNameAttachedToGameObject).methodName();
Top Related