Understanding the Unity 3D Canvas

The Canvas in Unity isn't a big painting board on a wooden frame. The Canvas is actually an area in the game where you can draw UI elements.

What are UI elements? UI elements are simply elements in the game (and most often, on the screen) that relay useful information to the player. These are usually persistent in their presence. One of the best examples of a UI element is a score counter, or a health meter etc.

Unity 3D Canvas and UI Elements

UI elements are what form Pause menus, Main menus, HUDs or Heads-Up Displays, Score counters and so on. In this tutorial, we'll discuss a bit about how the Canvas works, and in the next tutorial, we'll get on with adding our own UI elements into our game.

So far, the only thing we have said about it is that it's a big rectangular space in the game. In Unity, the Canvas is also a Game Object with a Canvas component attached to it. This Canvas component acts as the master of all UI elements on the screen. That's why all UI elements are required to be the child gameObject of the Canvas gameObject.

Unity 3D Canvas: Canvas Component Properties

Let's have a look at the Canvas component.

NOTE: We shrunk the Graphic Raycaster component because it's not as important to us as the other two for now.

The first segment in the Canvas's scripting is the Canvas itself. It has properties which change where and how the Canvas is rendered on screen. The second segment, the Canvas Scaler, is used to set the size and scaling of UI elements according to different screen sizes.

In the Canvas script, our most significant property is the Render Mode.

The three modes in Render Mode determine the way the Canvas is treated and rendered in the game. Let's explore these options further to understand them better.

Unity 3D Canvas: Screen Space - Overlay

This render mode places UI elements at the top of the screen of the scene rendered. It's what you'll be using most of the time when you're making an HUD or any similar, static UI element. It's quite useful because it automatically scales UI elements in that Canvas to the required size as per the screen's size.

Unity 3D Canvas: Screen Space

This is quite similar to how the Overlay mode works, but in this mode, we specify a camera which renders our UI. As such, changing properties in the camera like its shape, size, area of coverage or resolution will change the way the UI looks on the screen. Developers don't usually use this option, as they find Overlay to be of better use because of its ability to auto-scale UI elements.

Unity 3D Canvas: World Space

This mode is quite different from the other two. In World Space, UI elements are treated simply as another gameObject in the scene instead of having priority rendering on top. World Space is very useful when dealing with UI elements that are part of the game itself, and not simply for the player.