Unity UI – 16:9 Responsive
How to create in Unity a 16:9 responsive interface using UI components.
Really really easy be responsive with last UI components.
1. Create a 2D Project
2. Game window, set 16:9 / Maximize on Play
Create your own graphic button
3. This is our image
4. MAIN TOP MENU> Assets> Import New Asset> custom-button.png
NB: PNG is RGBA, your button can have a alpha channel inside, ready to use in Unity.
Project> custom-button> Inspector> Texture Type> Sprite (2D and UI)> click ‘Apply’
NB: you have to load your image as Sprite or it can not be used in UI elements
5. MAIN TOP MENU> GameObject> UI> Button
In the scene there are:
– Main Camera
– Canvas
— Button
— Text (the text of the button)
-> EventSystem
6. Hierarchy> Button> Inspector>
>Image (Script)
– Source Image: Project DRAG AND DROP custom-button over here
– Image Type: Simple
>Rect Transform
– Width 100 / Height 100 we need a square to maintain the correct aspect ratio.
7. Hierarchy> Button/Text> Inspector> Text (Script), remove the text ‘Button’
Understand Responsivity in Unity
CASE 1
8. Hierarchy> Canvas> Canvas Scaler (Script)> Constant Pixel Size
Play
The size of the button does not change even the screen is bigger
CASE 2
8. Hierarchy> Canvas> Canvas Scaler (Script)> Scale With Screen Size
Play
The size of the button will change with the Screen Size
Set Canvas Scaler (Script)> Reference Resolution: 1920×1080
