Video Games Development

Unity3D – Tutorials – UI – Event System

The Event System check the user input over the Canvas elements.

This feature is avaiable for Unity3D 4.6 or above.

Create Objects

1. Open Unity3D and create:

– MAIN TOP MENU> GameObject> Camera, name it ‘Main Camera’
– MAIN TOP MENU> GameObject> UI> Button

NOTICE: Canvas will be created inside Layer UI

NOTICE: In the Hierarchy there is:
– Canvas
-> Button
->> Text (it is the child of Button)
– EventSystem

Setup Viewports and Tools

2. 3D Viewport select orthographic X View
3. TOP LEFT> TOOLS> Canvas Manipulation icon
4. Game Viewport> 4:3

Event System Setup

1. Hierarchy> DRAG AND DROP Button over Inspector> Event System (Script)> First Selected empty slot

2. Play> See below the Inspector, you can see the EventSystem data in real time

Event Trigger

With Event Trigger you can listen user input actions over Images, Text or other Gameobjects.

1. MAIN TOP MENU> GameObject> UI> Text

NOTICE: In the Hierarchy there is:
– Canvas
-> Text (it is the child of Button)
– EventSystem

2. Attacch to Text MyScript.js:

#pragma strict

function Start () {
}

public function MyFunction(){
Debug.Log ("Pointer has entered");
}

function Update () {
}

3. Hierarchy> select Text> Inspector> ‘Add Component’> Event Trigger

4. Event Trigger> ‘Add New Event Type’> Pointer Enter> +>
a. DRAG AND DROP Text over the Empty Slot
b. click the rollout ON THE RIGHT> MyScript> MyFunction

5. Play and move the pointer over the Text.

Elegible Functions

NOTICE: a function will be elegible if is – public void MyFunction() – and have none or 1 parameter.

public: deve essere pubblica, cioè poter essere letta al di fuori dello script originale
void: non restituisce un valore di ritorno, non ammette il comando – return –

The parameter can be in C#:

– public void MyFunction()
– public void MyFunction(float MyFloat)
– public void MyFunction(int myInt)
– public void MyFunction(string myString)
– public void MyFunction(bool myBool)
– public void MyFunction(Object myObject) -> Unity Object

The parameter can be in JS:

– public function MyFunction()
– public function MyFunction(float MyFloat)
– public function MyFunction(int myInt)
– public function MyFunction(string myString)
– public function MyFunction(bool myBool)
– public function MyFunction(Object myObject) -> Unity Object

Events

– Pointer Enter
– Pointer Exit
– Pointer Down
– Pointer Up
– Pointer Click
– Drag
– Drop
– Scrool
– Update Selected
– Select
– Deselect
– Move
– Initialize Potential Drag
– Begin Drag
– End Drag
– Submit
– Cancel

Unity3D – Tutorials – UI – Responsive Text

This feature is avaiable for Unity3D 4.6 or above.

Create Objects

1. Open Unity3D and create:

– MAIN TOP MENU> GameObject> Camera, name it ‘Main Camera’
– MAIN TOP MENU> GameObject> UI> Canvas
– MAIN TOP MENU> GameObject> UI> Text

NOTICE: Canvas will be created inside Layer UI

NOTICE: In the Hierarchy there is:
– Canvas
-> Text (it is the child of Canvas)
– EventSystem

Setup Viewports and Tools

2. 3D Viewport select orthographic X View
3. TOP LEFT> TOOLS> Canvas Manipulation icon
4. Game Viewport> 4:3

Canvas Setup

Hierarchy> Canvas> Inspector>

>Canvas
– Render Mode> Screen Space – Overlay
– Pixel Perfect: check

>Canvas Scaler
– Ui Scale Mode: Scale With Screen Size
– Reference Resolution: 800×600
– Screen Match Mode: Match Width or Height

Text Setup

Hierarchy> Text> Inspector>

>Rect Transform>
– Pos X=0 Y=0 Z=0
– Width=800 Height=800 (The same of Canvas Scaler> Reference Resolution)
– Anchor Preset Button (the square icon on top left with a target): middle center

>Text (Script)
– Text: type your text
– Font: WARNING! Include the font inside your Project Window, to include it inside the final Build
Unity supports: TrueType, OpenType, DaFont.
– Font Size: setup the size of the font
– Horizontal Overflow: Wrap (per andare a capo automaticamente)
– Vertical Overflow: Truncate (per non scrivere al di fuori dell’area visibile)
– Best Fit: check (Font Size sarà scelta automaticamente per essere visibile ad ogni risoluzione, si può fornire anche un valore tra Min Size e Max Size)
– Color: Setup the color

Dynamic Text – JS

Hierarchy> Text> Inspector> Add Component> New Script> DynamicText.js

#pragma strict

var theTextComponent : UI.Text; // ASSIGN IN INSPECTOR!!!

function Awake () {
}

function Start () {
theTextComponent.text = "My Super Text";
}

function Update () {
}

Hiearchy> DRAG AND DROP Text into Inspector var ‘theTextComponent’