Scale with Screen Size

When you have the Canvas Scalar component set to Scale with Screen Size, UI elements on the Canvas will scale based on a Reference Resolution. If the screen is larger or smaller than this Reference Resolution, the items on the Canvas will then scale up or down accordingly. In the Resolution and Aspect Ratio section, I have told you that you should decide on a default resolution that represents the ideal resolution of your UI design. This default resolution will be the Reference Resolution.

If the aspect ratio of the game does not match with that of the Reference Resolution, then things will scale up and down without any problems. If it does not match, then you need to use the Canvas Scalar on how to scale items if the aspect ratio changes. This can be done by using the Screen Match Mode settings. Below are the three different Screen Match Modes that determine how the Canvas will scale if the game's aspect ratio does not match the aspect ratio of the Reference Resolution:

• Match Width Or Height: It will scale the UI with respect to the reference height or the reference width. It can also scale based on a combination of both.
• Expand: If the screen is smaller than the Reference Resolution, the canvas will be expanded to match that of the Reference Resolution.
• Shrink: If the screen gets larger than the Reference Resolution, the canvas will be reduced to match that of the Reference Resolution.

The Expand and Shrink Screen Match Modes do not have any further properties to edit; they just "do their own thing". However, the Match Width Or Height Screen Match Mode does have a Match property. This property is a sliding scale that can be adjusted between 0 (Width) and 1 (Height).

When the value of Match is set to 0, the Canvas Scaler will force the Canvas to always have the same width specified by the Reference Resolution. This will maintain the relative scales and positions of objects along the width of the Canvas. So, objects will not get further away from or closer to each other in the horizontal direction. However, it will completely ignore the height. So, objects can get further from or closer to each other in the vertical direction.

Setting the Match value to 1 will accomplish the same thing, but will maintain the positions and scales of the objects along the height, not the width.

Setting the Match value to 0.5, will compare the game's width and height to that of Reference Resolution, and it will try to maintain the distances between objects in both the horizontal and vertical directions.

The Match value can be any number between 0 and 1. If the number is closer to 1, scaling will favor the height and if it is closer to 0, it will favor the width.

None of these Match settings will be perfect for all games at all aspect ratios and resolutions. The settings you choose will depend on how you want the UI to scale. If you want the relative vertical positions to be maintained, use Height (1). If you want the relative horizontal positions to be maintained, use Width (0). It really just depends on which spacing you care the most about.

I recommend using the following settings based on the orientation of your game:

Orientation	Match Value
Portrait	0 (Width)
Landscape	1 (Height)
Varies	0.5 (Width and Height)

 

I chose these settings based on whichever of the two numbers on the Reference Resolution is the smallest. In Portrait mode, the width will be the smallest, so I find it important to maintain the relative position of the items in the width. This is a personal preference and just a recommendation, and it will not necessarily make sense for all games. However, I have found it to be a good rule of thumb for most games.

It is best to avoid making games that will vary between portrait and landscape mode unless you have minimal UI or are very comfortable with creating scalable UI.