SlideShare a Scribd company logo
Template designed by
UNITY3D 4.6 UI TOOLS
Alessandro Pozone
Alessandro.pozone@hotmail.com
www.poz1.com
@TPoz1
Alessandro Pozone
Ingegneria Informatica @ PoliMi
Worldwide Finals finalist ImagineCup 2014
Microsoft Student Partner
Xamarin Student Ambassador
chi sono
Before UGUI
Canvas
Rect Transform & Anchors
Pivot
Slice Scaling & Animation
UIManager
Demo
agenda
public class ExampleClass : 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");
}
}
OnGui vs UGUI
The Canvas is a Game Object with a Canvas component on it,
and all UI elements must be children of a Canvas.
UI elements in the Canvas are drawn in the same order they
appear in the Hierarchy.
Canvas
When dealing with UI
Controls we don’t have
the Transforms panel
but the Rect Transform.
It will change the way it
looks depending on the
anchors settings.
Rect Transform & Anchors
Setting Anchors is a simple way to control
the position and size of your UI elements,
relative to their parent.
When the parent is resized, your UI element
will try to maintain uniform distance to the
anchor points, thus forcing it to move or
resize right along with its parent.
Rect Transform & Anchors
The Pivot is a point
around which all
transformations are made.
The Pivot is set in
normalized coordinates.
This means that it goes
from 0 to 1 for both
height and width.
Where (0,0) is the bottom
left corner and (1,1) is the
top right corner.
Pivot
Unlike images that rarely scale,
especially non-uniformly, buttons
often come in completely
different sizes.
To avoid dealing with several
sizes of the same image you can
use a technique called 9-Slice
scaling, which allows you to
provide one small image that
scales to fit all the sizes.
This technique makes this
possible because the image does
not scale evenly. There are nine
zones, each of which scale
differently.
Slice Scaling
When you add an event handler to
the button, you need to specify which
method to call when you tap the
button. This means you need to
attach an object to a script, since you
can’t use static methods.
UIManager
public void StartGame()
{
Application.LoadLevel("RocketMouse");
}
Animating buttons is no different from animating any other
Unity object. You’ll need to add an Animator component, create
few animations and set up states and transitions between them.
Animation
We can manage animator conditions using the UIManager
Animation
public Animator settingsButton;
public void OpenSettings()
{
settingsButton.SetBool("isHidden”,true);
}
demo
Unity3D :]
Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
Alessandro.pozone@hotmail.com
Grazie

More Related Content

PDF
Programming Without Coding Technology (PWCT) Getting Started - Create your f...
PDF
Photoshop key points
PPT
How to animate objects in ppt 2010
PPTX
PDF
Unreal Engine Basics 05 - User Interface
PDF
Tutorial flash
PDF
HTML5 Canvas finger lottery ticket eraser
DOCX
Digital imaging assignment
Programming Without Coding Technology (PWCT) Getting Started - Create your f...
Photoshop key points
How to animate objects in ppt 2010
Unreal Engine Basics 05 - User Interface
Tutorial flash
HTML5 Canvas finger lottery ticket eraser
Digital imaging assignment

Viewers also liked (18)

PDF
Ag03 agile culture - dnc14 handouts
PPTX
Mob03 what's new in windows phone
PPTX
Sys02 best way to create a share point app
PDF
Ds04 data quality
PPTX
Fr01 asp.net web api reloaded
PPTX
Win05 accesso ai dati in win 8
PDF
Cert05 70-487 - developing microsoft azure and web services
PPTX
Mob04 best practices for windows phone ui design
PPTX
Sys01 creare applicazioni virtuali con microsoft application virtualization...
PDF
Be01 web devclientvsserver
PDF
Mob02 windows phone 8.1 app development
PPTX
Fe02 ria con breeze e knockout
PPTX
Cert02 70-410
PDF
Ag01 agile foundation - dnc14 handouts
PDF
Ds05 power bi
PPTX
Sys04 share point-yammer_social_collaboration
PPTX
Fe04 angular js-101
PPTX
Gam03 facciamo volare il nosro drone
Ag03 agile culture - dnc14 handouts
Mob03 what's new in windows phone
Sys02 best way to create a share point app
Ds04 data quality
Fr01 asp.net web api reloaded
Win05 accesso ai dati in win 8
Cert05 70-487 - developing microsoft azure and web services
Mob04 best practices for windows phone ui design
Sys01 creare applicazioni virtuali con microsoft application virtualization...
Be01 web devclientvsserver
Mob02 windows phone 8.1 app development
Fe02 ria con breeze e knockout
Cert02 70-410
Ag01 agile foundation - dnc14 handouts
Ds05 power bi
Sys04 share point-yammer_social_collaboration
Fe04 angular js-101
Gam03 facciamo volare il nosro drone
Ad

Similar to Unity3 d uitools (20)

PPTX
Module 3 Session2 of Computer Graphics.pptx
PDF
Unity UI and Compatibility Testing Content.pdf
PDF
Procedure of animation in 3 d autodesk maya tools & techniques
PDF
Unity tutorial
PPTX
3.4 events and interactivity
PDF
A Novel approach for Graphical User Interface development and real time Objec...
PDF
Flash auto play image gallery
PDF
Ui in unity
PPTX
Keyboard and mouse events in python
PDF
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
PDF
High speed script execution for GUI automation using computer vision
PPTX
Introduction to GUIs with guizero
PPTX
Game Project / Working with Unity
PPTX
unity gaming programing basics for students ppt
PPTX
Exploring the internal state of user interfaces using sikuli
PDF
Presentación Unity
PPTX
Fast multi touch enabled web sites
PPTX
Tips for building fast multi touch enabled web sites
PPTX
U Pointer Detailed Training Manual
Module 3 Session2 of Computer Graphics.pptx
Unity UI and Compatibility Testing Content.pdf
Procedure of animation in 3 d autodesk maya tools & techniques
Unity tutorial
3.4 events and interactivity
A Novel approach for Graphical User Interface development and real time Objec...
Flash auto play image gallery
Ui in unity
Keyboard and mouse events in python
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
High speed script execution for GUI automation using computer vision
Introduction to GUIs with guizero
Game Project / Working with Unity
unity gaming programing basics for students ppt
Exploring the internal state of user interfaces using sikuli
Presentación Unity
Fast multi touch enabled web sites
Tips for building fast multi touch enabled web sites
U Pointer Detailed Training Manual
Ad

More from DotNetCampus (20)

PDF
ARCHITETTURA DI UN'APPLICAZIONE SCALABILE
PPTX
MICROSOFT E IL MONDO IOT
PPTX
70-485: ADVANCED OF DEVELOPING WINDOWS STORE APPS USING C#
PDF
70-534: ARCHITECTING MICROSOFT AZURE SOLUTIONS
PDF
70-483: PROGRAMMING IN C#
PPTX
DSTORIE DALLA TRINCEA: TEAM FOUNDATION SERVER IN CASI LIMITE E NON SOLO...
PPTX
TUTTO SU VISUAL STUDIO ALM 2015
PPTX
CONTINUOUS INTEGRATION CON SQL SERVER
PPTX
PREDICT THE FUTURE , MACHINE LEARNING & BIG DATA
PPTX
DESKTOP AND CLIENT VIRTUALIZATION: NEW WORKSTYLES WITH MICROSOFT VDI
PPTX
FROM ON-PREMISE TO THE HYBRID CLOUD WITH MICROSOFT AZURE
PPTX
SHAREPOINT 2016 - WHAT'S NEW
PPTX
COSTRUISCI IL TUO DEVICE
PPTX
SVILUPPARE PER MICROSOFT BAND
PPTX
INTERFACCE GRAFICHE CON UNITY3D 4.6: IL GIOCO NON BASTA!
PPTX
WINDOWS PHONE APPS IN C++
PPTX
AZURE NOTIFICATION HUB
PPTX
SFRUTTARE I MICROSOFT AZURE MOBILE SERVICES CON XAMARIN.FORMS
PPTX
INTRO TO XAMARIN
PPTX
UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT
ARCHITETTURA DI UN'APPLICAZIONE SCALABILE
MICROSOFT E IL MONDO IOT
70-485: ADVANCED OF DEVELOPING WINDOWS STORE APPS USING C#
70-534: ARCHITECTING MICROSOFT AZURE SOLUTIONS
70-483: PROGRAMMING IN C#
DSTORIE DALLA TRINCEA: TEAM FOUNDATION SERVER IN CASI LIMITE E NON SOLO...
TUTTO SU VISUAL STUDIO ALM 2015
CONTINUOUS INTEGRATION CON SQL SERVER
PREDICT THE FUTURE , MACHINE LEARNING & BIG DATA
DESKTOP AND CLIENT VIRTUALIZATION: NEW WORKSTYLES WITH MICROSOFT VDI
FROM ON-PREMISE TO THE HYBRID CLOUD WITH MICROSOFT AZURE
SHAREPOINT 2016 - WHAT'S NEW
COSTRUISCI IL TUO DEVICE
SVILUPPARE PER MICROSOFT BAND
INTERFACCE GRAFICHE CON UNITY3D 4.6: IL GIOCO NON BASTA!
WINDOWS PHONE APPS IN C++
AZURE NOTIFICATION HUB
SFRUTTARE I MICROSOFT AZURE MOBILE SERVICES CON XAMARIN.FORMS
INTRO TO XAMARIN
UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT

Unity3 d uitools

  • 1. Template designed by UNITY3D 4.6 UI TOOLS Alessandro Pozone Alessandro.pozone@hotmail.com www.poz1.com @TPoz1
  • 2. Alessandro Pozone Ingegneria Informatica @ PoliMi Worldwide Finals finalist ImagineCup 2014 Microsoft Student Partner Xamarin Student Ambassador chi sono
  • 3. Before UGUI Canvas Rect Transform & Anchors Pivot Slice Scaling & Animation UIManager Demo agenda
  • 4. public class ExampleClass : 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"); } } OnGui vs UGUI
  • 5. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of a Canvas. UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. Canvas
  • 6. When dealing with UI Controls we don’t have the Transforms panel but the Rect Transform. It will change the way it looks depending on the anchors settings. Rect Transform & Anchors
  • 7. Setting Anchors is a simple way to control the position and size of your UI elements, relative to their parent. When the parent is resized, your UI element will try to maintain uniform distance to the anchor points, thus forcing it to move or resize right along with its parent. Rect Transform & Anchors
  • 8. The Pivot is a point around which all transformations are made. The Pivot is set in normalized coordinates. This means that it goes from 0 to 1 for both height and width. Where (0,0) is the bottom left corner and (1,1) is the top right corner. Pivot
  • 9. Unlike images that rarely scale, especially non-uniformly, buttons often come in completely different sizes. To avoid dealing with several sizes of the same image you can use a technique called 9-Slice scaling, which allows you to provide one small image that scales to fit all the sizes. This technique makes this possible because the image does not scale evenly. There are nine zones, each of which scale differently. Slice Scaling
  • 10. When you add an event handler to the button, you need to specify which method to call when you tap the button. This means you need to attach an object to a script, since you can’t use static methods. UIManager public void StartGame() { Application.LoadLevel("RocketMouse"); }
  • 11. Animating buttons is no different from animating any other Unity object. You’ll need to add an Animator component, create few animations and set up states and transitions between them. Animation
  • 12. We can manage animator conditions using the UIManager Animation public Animator settingsButton; public void OpenSettings() { settingsButton.SetBool("isHidden”,true); }
  • 14. Grazie a tutti per la partecipazione Riceverete il link per il download a slide e demo via email nei prossimi giorni Per contattarmi Alessandro.pozone@hotmail.com Grazie