Real example shows the difference of three Canvas UI Scale Modes

· 2 min read
Real example shows the difference of three Canvas UI Scale Modes

Resize your UI window size along with game screen size, in other words, we want the game menu become bigger if the game is played on a bigger screen size, otherwise become smaller on a small screen size. For example:

Most of the times we want Pause menu (in above screenshot) can be resized if the game is running on different screen.

There are three options on the Canvas UI Scale Mode:

  • Constant Pixel Size
  • Scale with Screen Size
  • Constant Physical Size

This article will demonstrate the difference between those three modes with an real example. The example is trying to resize the joy sticker.

Constant Pixel Size

Makes UI elements retain the same size in pixels regardless of screen size. Suitable for fixed screen size.

Example of an UI on iPhone XS:

Same UI on iPad:

Note that: The joystick and Button A and B are the same size on different screen size.


Scale With Screen Size

Makes UI elements bigger the bigger the screen is. Set reference resolution as the basic resolution. This is recommended for most of the 2D games.

For the Screen match mode, there are three options here: Match width or height, Expand or Shrink.

Example of an UI on iPhone XS:

Same UI on iPad:


Constant Physical Size

Makes UI elements retain the same physical size regardless of screen size and resolution.

Example of an UI on iPhone XS:

Same UI on iPad:

Note that: The joystick and Button A and B are using the actual size in the game regardless of the device size and resolution.


Reference