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!