Unity UI System: Canvas Types

In Unity, there are a few different canvas types. Each one has it’s intended use. So in this article I plan on demystifying this! Onward!

The first canvas type is Screen Space Overlay. In a screenspace overlay canvas, all your UI elements basically ignore camera position and overlay on the screen. So if I simply add a canvas with an image object and I move the camera around in play mode the UI elements never move. This is a great canvas type to use for HUD elements like health, stamina, items, etc etc.

The Screen Space — Camera canvas type is similar to the overlay canvas type. The canvas, in this render mode, is placed a given distance in front of a specified camera. The UI elements are rendered by that camera, which means the camera settings effect the appearance of the UI. Objects in the scene view can also obscure the images on this canvas.

The UI elements are given depth. As you can see below, I can move my camera around in the scene and eventually the image will be obscured by the pink cube.

The last canvas type is World Space. World space canvases can be used for a lot of different scenarios. A lot of times they’re used to display health bars over enemies, or for things like interactive screens in games such as a terminal where you have to enter a password.

If this was made with unity, theres a high chance that those health bars are all being handled by world space canvases.

The canvas is basically treated like a 3D object in the scene, just like the pink cube ;)

In a recent project I worked on, the pages of the comic were world space canvases. I was faced with a challenge to build a “zoom” functionality on a panel when it is selected. Since screenspace overlay canvases simply overlay the UI on the screen, instead of a cinematic camera zoom, I would have to just scale the selected image up over a certain amount of time. This worked fine, BUT later I was asked to have a black border surround the panel as well… so that posed its own set of challenges. I decided to treat the pages like 3D objects instead and have the black border surround the panel that way. I had to do a little bit of ScreenToWorldSpace calculation to get it working properly, but I think it was fairly straight forward compared to having the border wait for the image to scale up THEN move in toward the edges of the image. Here is how that turned out :)

Remember, the page itself with the images was a world space canvas being zoomed in on by a virtual camera.