web games programming n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Games Programming PowerPoint Presentation
Download Presentation
Web Games Programming

Loading in 2 Seconds...

play fullscreen
1 / 21

Web Games Programming - PowerPoint PPT Presentation


  • 117 Views
  • Uploaded on

Web Games Programming. Creating and Using GUI Components. Agenda. GUI Components GUI Layout Using Styles and Skins for Design ‘ Look and Feel ’ Scripting GUI Communication with World Objects. Unity GUI Components.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Games Programming' - naiya


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web games programming

Web Games Programming

Creating and Using GUI Components

agenda
Agenda
  • GUI Components
  • GUI Layout
  • Using Styles and Skins for Design ‘Look and Feel’
  • Scripting GUI Communication with World Objects
slide3

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
slide4

GUI Basics

function OnGUI () {

// Make a background box

GUI.Box(Rect (10,10,100,90), "Loader Menu");

// Makethefirstbutton. Whenpressed,load a scene

if(GUI.Button (Rect (20,40,80,20), "Level 1")) {

Application.LoadLevel(1);

}

// Make the secondbutton.

if(GUI.Button (Rect (20,70,80,20), "Level 2")) {

Application.LoadLevel(2);

}

}

slide6

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

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:

function OnGUI () {

GUI.Label (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”

slide8

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.
  • GUISkinsare 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.
slide9

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

The OnGUI () Function

function OnGUI () {

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

// code hereisexecutedwhen the Button isclicked

}

}

gui communication with another script
GUI Communication with another Script

GUIControl.js

function OnGui(){

Button with code to handle event and communicate with aScript.js

aScript.js

Code to handle message sent by GUIControl.js attached to dummy object

Game Object

slide14

GUI to Script Example

Number of Missiles (Text Field)

Fire!

(Button)

16 (1 x 1) CubePhysics Wall

ongui function to send message to function in launchmissile script
OnGui() function to send message to function in launchMissile script

GUIControl.js

function OnGui(){

Button with code to handle event and communicate with function in launchMissile.js

launchMissile.js

Code to handle message sent by GUIControl.js

“Launcher” Game Object

slide17

The OnGUI () function in GUIControl.js

// declare a variable of type GameObject

var cannon:GameObject;

function OnGUI () {

// assign the game object with the name//”Launcher” to the variable

cannon = GameObject.Find("Launcher");

slide18

The OnGUI () Function

if (GUI.Button (Rect (10,10,50,40), "Fire!")) {

/*

get the component (script) calledlaunchMissile and call the functionitcontainscalledfireMissile()

*/

cannon.GetComponent(launchMissile).fireMissile();

}

slide19

Function in launchMissile.js

// this function is called when the fire button is pressed

//in GUIControl.js

function fireMissile(){

Instantiate(aMissile, transform.position, transform.rotation);

}

slide20

Updating the TextField in GUIControl.js

varnumberOfMissiles:int = 0;

varmissileCount:String;

GUI.TextField(Rect (400, 30, 50, 20), missileCount, 25);

function Update () {

// convert the numberOfMissiles to a String Type

// then assign value to missile count variable

missileCount= numberOfMissiles.ToString();

}

slide21

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 function 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 function in that script.
  • var variableName:GameObject;
  • variableName = GameObject.Find(”GameObject");
  • variableName.GetComponent(scriptNameAttachedToGameObject).functionName();