Unity is well known for cross platform game development. But the major problem with cross platform development is to design UI that fits all screen sizes even if you follow the UI design principles. In this tutorial, we will see how to customize your UI settings to match all screen sizes and resolutions.
Things to know about Unity UI
All the UI components in Unity are placed on an object called Canvas. The Canvas acts like the parent game object. So, if you scale or Strech the canvas then the UI elements inside it will move and scale based on the parent.
The canvas size is scaled based on the device screen size.
UI Anchors in Unity, define the position of the UI element based on the canvas size and position.
Making the UI scale based on Screen Size
Step1: Setting the Target Aspect ratio
The first and foremost thing to do is to decide on the target aspect ratio. The recommended aspect ratio is 16:9(widthxheight) for landscape and 9:16 for portrait games. If your game can be played in both portrait and landscape mode then you can skip this part.
To set the aspect ratio. Go to the Game window and select the aspect ratio from the drop down. If you don’t see the required aspect ratio then click on the + sign at the bottom of the list and create your own aspect ratio.
Step2: Setting the Canvas to Scale with Screen size
Select the Canvas gameobject in the Hierarchy window and look for the Canvas scalar component in the inspector.
In the UI scale mode, select scale with screen size.
Select width or height in the screen match mode.
Set the value of match to 0.5.
Step3: Setting the Anchors
Place the anchors on the corner of the UI elements as shown in the image below. The anchor position will be determined based on the canvas scale. So, the anchors will change based on the canvas size and so will the UI element.
Testing the UI
After all these settings it’s time to test if the UI will hold good for different screen sizes. Go to the Game tab and select the first option of the left top as Simulator and then select different devices to test your UI.
