Canvas UI Render Modes Demonstrated in Unity 2021
More on the Canvas Game Object
Let’s cover a couple important settings on our Canvas game object.
The “Rendering Mode” field is very important as it defines how the canvas and thus the entire UI will behave in your scene.
There are three modes to choose from here:
Screen Space — Overlay
Per Unity, “This render mode places UI elements on the screen rendered on top of the scene.
If the screen is resized or changes resolution, the Canvas will automatically change size to match this.”
Screen Space — Camera
Per Unity, “This is similar to Screen Space — Overlay, but in this render mode the Canvas is placed a given distance in front of a specified Camera.
The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI.
If the Camera is set to Perspective, the UI elements will be rendered with perspective…If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.”
Generally, Screen Space — Overlay will be the default mode to use in most cases.
World Space
Per Unity, “In this render mode, the Canvas will behave as any other object in the scene.
The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement.
This is useful for UIs that are meant to be a part of the world.
This is also known as a ‘diegetic interface’.”
Another important field is the “UI Scale Mode” in the “Canvas Scaler” section.
There are four modes to choose from on this field:
Constant Pixel Size
Per Unity, “Using the Constant Pixel Size mode, positions and sizes of UI elements are specified in pixels on the screen…
With the Scale Factor setting in the Canvas Scaler, a constant scaling can be applied to all UI elements in the Canvas.”
Scale With Screen Size
Per Unity, “Using the Scale With Screen Size mode, positions and sizes can be specified according to the pixels of a specified reference resolution.
If the current screen resolution is larger than the reference resolution, the Canvas will keep having only the resolution of the reference resolution, but will scale up in order to fit the screen.
If the current screen resolution is smaller than the reference resolution, the Canvas will similarly be scaled down to fit.”
Constant Physical Size
Per Unity, “Using the Constant Physical Size mode, positions and sizes of UI elements are specified in physical units, such as millimeters, points, or picas.
This mode relies on the device reporting its screen DPI correctly. You can specify a fallback DPI to use for devices that do not report a DPI.”
This is probably most usable with portable console systems, such as the Nintendo Switch, since they generally share the same screen.
If there is a variation of the screen for the portable console line, you only need account for a handful or less of screen variations whereas with mobile devices, tablets, PCs, there is too many to count.
World Space
Per Unity, “For a Canvas set to ‘World Space’ the Canvas Scaler can be used to control the pixel density of UI elements in the Canvas.”
So, Which Do I Use?
In general, I find myself using “Screen Space — Overlay” and “Scale with Screen Size” most of the time.
Still, this will vary by use-case.
I’ll also generally use the 1920 x 1080 dimensions for the “Reference Resolution” as it is the most widely used and maintains a 16:9 aspect ratio which is also the most widely used.
At the very least, this should be a good starting point while developing your game unless you are targeting a specific device with a different resolution.
Adding Additional Canvases
Now that we have the default Canvas setup squared away, let’s add the other two.
But first, let’s add a 3D model with a blank screen to our scene.
We’ll use this with the world-space canvas.
Now, let’s duplicate our original canvas object two times.
Then rename each Canvas to reflect they type of Canvas Render Mode being used.
And of course, we need to assign a new Render Mode to the newly created canvases.
Now, if we select the image child object of each canvas, we can observe a difference in placement for the image on the canvas with Screen Space — Camera render mode.
While the other 2 images from their respective canvases are still dead center of the UI overlay which is offset from the origin point in our Scene, this canvas is placed directly in front of the camera and is dimensioned to exactly fit the Main Camera’s bounds.
Mimic the Display on Our Terminal with World Space Render Mode
We’ll use our world space canvas to mimic the screen on our display.
To do this, we’ll need to reposition, resize, and rotate the canvas until it appears to be on the Terminal game object’s screen.
It should look something like the above when properly resized, rotated, and repositioned.
I’ve also increased the size of my child image object on the World Space canvas.
Now if we manipulate the Main Camera in our scene, we can see that the Screen Space — Overlay and World Space canvases do not change at all.
The Screen Space — Camera rotates with the Main Camera and stays locked in at a fixed distance from the Camera.
That should give us a nice reference for the differences between canvas render modes.
See you in the next article!
