Unity3D – Tutorials – UI – Event System

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

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Tutorials – UI – Event System

Unity3D – Tutorials – UI – Responsive Text

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’

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Tutorials – UI – Responsive Text

Unity3D – Tutorials – UI – Responsive BG Image Setup

Unity3D – Tutorials – UI – Responsive BG Image Setup

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> Image

NOTICE: Canvas will be created inside Layer UI

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

Setup Viewports and Tools

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

Setup Canvas

5. Hierarchy> Canvas> Inspector>

Canvas>
– Render Mode: ScreenSpace – Overlay (you will see the button over 3D scene)
– Pixel Perfect: check

Setup BG Image – Single – No Free Aspect

This setup will work fine only with Fixed Aspect

Canvas Scaler>
– Ui Scale Mode> Scale with Screen Size
– Reference Resolution: 800×600 (Remember that Game Viewport is set at 4:3)
E’ solo una unità di riferimento, non sono pixel, ci baseremo su questo parametro per settare i parametri di Rect Transform
– Screen Match Mode: Match Width or Height

NOTE: Pixel Perfect means when displaying a 2D texture, each pixel in the texture is represented by only one pixel on the screen. When you want your 2D-displayed textures to look their best, this is often what is strived for.

0. Project Window> RMB> Import New Asset…> myimage.jpg> Inspector> Texture Type> Sprite (2D and UI)

1. Hiearchy> Image> Inspector

> DRAG AND DROP myimage.jpg over Image (Script)> Source Image slot

> Rect Transform
– Anchor Preset Button (the square icon on top left with a target): middle center
– Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
– Pos X=0 Y=0 Z=0
– Width= 800 Height= 600 (Remember: Canvas> Reference Resolution: 800×600)

> Image (Script)
– Image Type: Simple

2. Play and try to resize the game port.

Setup BG Image – Tiled – Yes Free Aspect – 1st Solution

This setup will work fine with Free Aspect

Canvas Scaler>
– Ui Scale Mode> Constant Physical Size

NOTE: Pixel Perfect means when displaying a 2D texture, each pixel in the texture is represented by only one pixel on the screen. When you want your 2D-displayed textures to look their best, this is often what is strived for.

0. Project Window> RMB> Import New Asset…> myimage.jpg> Inspector> Texture Type> Sprite (2D and UI)

1. Hiearchy> Image> Inspector

> DRAG AND DROP myimage.jpg over Image (Script)> Source Image slot

> Rect Transform
– Anchor Preset Button (the square icon on top left with a target): middle center
– Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
– Pos X=0 Y=0 Z=0
– Width= 800 Height= 600 (Remember: Canvas> Reference Resolution: 800×600)

> Image (Script)
– Image Type: Tiled

> Rect Transform
– Scale: setup the size of the tiles

2. Play and try to resize the game port.

Setup BG Image – Tiled – Yes Free Aspect – 2nd Solution

Create in the scene:

1. MAIN TOP MENU> GameObject> UI> Panel

2. Inspector> Panel> Image (Script)>
– Source Image> DRAG AND DROP the sprite here
– Image Type> Tiled

Setup Alpha

Hierarchy> Image> Inspector> Image (Script)> Color> click over the color slot> in the color picker setup Alpha Channel using the slider A

Multi Image Setup

1. MAIN TOP MENU> GameObject> UI> Image add two or more images at the Canvas

2. Hiearchy>

– Canvas
-> Image 1
->> Image 2 (Image 2 is over Image 1)

OR

– Canvas
-> Image 2
->> Image 1 (Image 1 is over Image 2)

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Tutorials – UI – Responsive BG Image Setup

Unity3D – Tutorials – UI – Button – OnClick

Unity3D – Tutorials – UI – Button – OnClick

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> Button, this will add an ‘EventSystem’ and Button will be child of Canvas

NOTICE: Canvas will be created inside Layer UI

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

Setup Viewports and Tools

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

On Click() – Ready to use function

The UI Framework contains a powerful event system, let’s take a first look.

1. Hierarchy> select Button> Inspector> Button (Script)

> Interactable: check

> On Click> click on ‘+’ Add List

a. DRAG AND DROP The Main Camera over the empty slot

b. RIGHT ROLLOUT> GameObject> SetActive> uncheck (it means false)

c. Play and click the button to deactivate Main Camera

On Click() – Custom function

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

1. Attacch to Main Camera MyCameraScript.js:


#pragma strict

function Start () {
}

public function MyFunction(){
Debug.Log ("Clicked!");
}

function Update () {
}

2. Hiearchy> select Button> Inspector> Button (Script)> OnClick()> DRAG AND DROP The Main Camera over the empty slot

3. RIGHT ROLLOUT> GameObject> MyCameraScript> MyFunction

4. Play and click the Button

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Tutorials – UI – Button – OnClick

Unity3D – Tutorials – UI – Responsive Button Setup

Unity3D – Tutorials – UI – Responsive Button Setup

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> Button, this will add an ‘EventSystem’ and Button will be child of Canvas

NOTICE: Canvas will be created inside Layer UI

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

Setup Viewports and Tools

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

Setup Canvas

5. Hierarchy> Canvas> Inspector>

Canvas>
– Render Mode: ScreenSpace – Overlay (you will see the button over 3D scene)
– Pixel Perfect: check

Canvas Scaler>
– Ui Scale Mode> Scale with Screen Size
– Reference Resolution: 800×600 (Remember that Game Viewport is set at 4:3)
E’ solo una unità di riferimento, non sono pixel, ci baseremo su questo parametro per settare i parametri di Rect Transform
– Screen Match Mode: Match Width or Height

NOTE: Pixel Perfect means when displaying a 2D texture, each pixel in the texture is represented by only one pixel on the screen. When you want your 2D-displayed textures to look their best, this is often what is strived for.

Setup Button

6. Hierarchy> Button> Inspector>

Rect Transform>

– Width: 400 (Remember that Reference Resolution is 800×600)
– Height: 200 (Remember that Reference Resolution is 800×600)

WARNING: If you use ‘Scale XYZ’ the graphic will be stretched.

Center Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Left Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: -200,0,0 (Remember that Reference Resolution is 800×600 -> 800/2-400/2=200)

Right Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 200,0,0

Top Right Alignement – No Stretch
Anchor Preset Button (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 200,250,0

Top Left Alignement – No Stretch
Alignement icon (the square icon on top left with a target): middle center
Anchors: Min X=0.5 Y=0.5 Max X=0.5 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: -200,250,0

Center Alignement – Stretch Width
Anchor Preset Button (the square icon on top left with a target): middle stretch
Anchors: Min X=0 Y=0.5 Max X=1 Y=0.5 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Center Alignement – Stretch Height
Anchor Preset Button (the square icon on top left with a target): stretch center
Anchors: Min X=0.5 Y=0 Max X=0.5 Y=1 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Center Alignement – Stretch Width and Height
Anchor Preset Button (the square icon on top left with a target): stretch strech
Anchors: Min X=0 Y=0 Max X=1 Y=1 Pivot X=0.5 Y=0.5
PosXYZ: 0,0,0

Image (Script)> setup the appearance you like

Button (Script)> setup the appearance you like

Setup Button Text

7. Hiearchy> select Text (child of Button)> Inspector>

> Rect Transform

Pos XYX: to positioning text

Width, Height: to size the rectangle that contain the text

Anchors Preset Button: to setup anchors

Rotation: to rotate text

Scale: WARNING: using scale the graphic will be stretched! Use Text> Font Size instead, it is better.

> Text

Font: PAY ATTENTION you need include the font inside the project to Build the game or your font will be lost in the final executable build.

Font Size: to resize the text

No Overflow
Horizontal Overflow: Wrap
Vertical Overflow: Truncate

Yes Horizontal and Vertical Overflow
Horizontal Overflow: Overflow
Vertical Overflow: Overflow

8. Try resize Game Window… it will works great!

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Tutorials – UI – Responsive Button Setup