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)