Canvas Render Mode in Unity — Screen Space Overlay/Camera and World Space
Objective: To understand the differences between the 3 different Render Mode options for the Canvas component in Unity.
To get started we should probably look at what a Canvas is before we move into the different Render Modes. A Canvas in Unity is a game object and it can be created in the Hierarchy by simply right-clicking → UI → Canvas. It is essentially an area where all the UI elements should be displayed in between and this area is denoted by the rectangle box in the Scene view:
Canvas Render Modes
There are 2 different types of Canvas Render Modes — Screen Space and World Space. Within Screen Space, there are 2 different variants. Let’s take a look at these first.
Screen Space Overlay
This renders the UI elements on the top of the screen, kind of like an overlay on the camera. This isn’t going to interact with any elements in the scene because it is simply sitting on top. Pure UI element, no interaction with game objects themselves. And if the screen is resized or changes are made to the resolution, the Canvas will automatically adjust it’s size to match this.
Now if I move the Main Camera around, the UI Element in the top left corner won’t move as it is set to this position regardless.
Screen Space Camera
Similar to the above, but the Canvas is placed a certain distance away in front of a specified camera. This means that the UI elements are rendered based on the specified camera’s settings — e.g. Changing the projection between ‘Perspective’ and ‘Orthographic’ will yield different results along with adjusting the Size of the camera or the Field of View (FOV).
I have rotated the heart 45 degrees to show some perspective and now I am moving back and forth through the camera’s FOV:
World Space
In this mode, the Canvas behaves as any other object would in the Scene and can be moved or manipulated. This UI element will be rendered based upon whether they are behind or in-front of other game objects in the scene (as shown below as I move the canvas in-front and behind the 3D shield object). Best used if you wish the UI to be apart of the World.
We can also attach this Canvas to the Shield game object and move the Shield around in the Scene view and the Canvas will follow the game object:
The Draw Order Of Elements
This is quite an important subject, and it represents the fact that the UI elements are drawn in the same order of the Hierarchy.
E.g. The first child of the Canvas GameObject will be drawn first, followed by the second, then the third etc..
Let’s play around with this to get an idea using the Screen Space Overlay Render mode:
From reading this we expect the ‘Heart’ to be rendered first, followed by the ‘Dollar Sign’ and finally the ‘Home Button’.
As the Home Button is rendered last, we expect this to be rendered on top of the other 2, let’s take a look:
Bingo!
Now, let’s move the ‘Heart’ into the last position in the Hierarchy:
