Create a screen space camera canvas to show rotated UI.
The Unity UI module uses a Canvas for each UI layer. The default setup uses them as Screen Space – Overlay, but you can use a prefab with a custom setup for your canvas.
This tutorial will create a canvas with a Screen Space – Camera setup, which allows to display rotated UI to give a 3D effect to it. However, Unity will draw Overlay canvases always above Camera canvases, so keep that in mind when building your UI.
Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.
Canvas Prefab Setup #
A Screen Space – Camera canvas requires a camera to render it’s content, we’ll include that in our prefab setup.
Use the scene hierarchy’s context menu to create a canvas with the setup used in your project: Makinom > UI > Canvas
Adding the Camera #
Now, use the scene hierarchy’s context menu on the Canvas game object and add a camera: Camera
The created Camera game object should be a child object of the Canvas.
Rect Transform #
We’ll position the camera to show the complete canvas.
- Pos X
Set to 0. - Pos Y
Set to 0. - Pos Z
Set to -935.2.
Camera #
Change the following settings of the Camera component.
- Clear Flags
Select Depth Only. - Culling Mask
Select only the UI layer (or any layer your UI is displayed on).
You can clear the selection by first selecting Nothing.
Audio Listener #
The created camera setup includes an Audio Listener component. Having multiple of them in a scene will create issues (and constant warnings in the console while playing).
So, remove the Audio Listener component from the camera.
Canvas #
Select the Canvas game object and change the following settings of the Canvas component.
- Render Mode
Select Screen Space – Camera. - Render Camera
Select the Camera from the child object we created.
Create Prefab #
That’s already everything we need to do. Create a prefab out of the Canvas, e.g. save it as Canvas Screen Space Camera.
You can now remove the canvas from the scene.
UI Layer Setup #
Next, we’ll use the prefab in a UI layer – all UI using that layer will use the canvas with the screen space camera setup and is able to display it’s rotation in 3D.
Open the Makinom editor and navigate to UI > UI Layers, either create a new UI layer or change an existing one. I’ll create a new one.
- Name
Set to: Screen Space Camera
Unity UI #
- Canvas Prefab
Select the Canvas Screen Space Camera prefab we created.
The Sorting Order defines the draw order of canvases, but keep in mind that overlay canvases (the default setup) will always be drawn above camera canvases (or world space canvases).
If you have multiple UI layers using a camera canvas setup, you can set their sorting order to make sure they’re ordered correctly.
- Set Sorting Order
Enable this setting. - Sorting Order
Set to the value you want.
Higher values will be drawn above lower values, e.g. match them with the ID/index in the UI layer list.
Save Settings #
That’s it – don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.
Tip!
Multiple UI layers can use the same canvas prefab – each layer will create it’s own instance of the prefab.
Use the sorting order settings to ensure their correct drawing order.
Test Setup #
To test your new canvas screen space camera setup, you’ll need to change one of your UI boxes to be dispalyed on the UI layer using the canvas.
UI Box Setup #
Navigate to UI > UI Boxes and select one of the UI boxes (e.g. one used in a menu screen).
- UI Layer
Select the Screen Space Camera layer (or whatever layer you used for the canvas prefab).
Save the changes in the editor.
UI Box Prefab Setup #
Now, open the prefab used by the UI box for editing, we’ll change it’s rotation in the Rect Transform component.
- Rotation
Set to X=-10, Y=-30, Z=-5.
Save the changes to the prefab.
Testing #
Hit play and bring up the menu that uses the UI box, e.g. I’m using an inventory container slot menu.
You can see, the UI box is rotated and has a 3D look to it.
As a comparison, here’s how this would look without a Screen Space – Camera canvas.
Kinda flat, isn’t it?
Tip! UI Backgrounds #
If you want to have backgrounds in your menu screens using camera canvas setups, keep in mind that they’re always drawn below regular canvases.
I.e. you need to place your UI backgrounds also on a UI layer using a camera canvas setup.
