Designing Unity UI for Different screen sizes and resolutions

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.

Free Unity asset banner

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.

Set aspect ratio in game window

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.

Canvas scalar window

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.

Unity Anchors

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.