Learn how to show a HUD on a world space canvas (Unity UI module).
HUDs (and other UI) are usually shown on a screen space canvas when using the Unity UI module, but you can show them on a world space canvas when displaying the HUD at the position of a game object. This is done by having a Canvas on the game object the HUD is using for positioning.
Since this requires the HUD to use a game object for positioning, it’s only possible for HUDs that are displayed that way, e.g. Combatant Object or Object type HUDs. Information and Interaction type HUDs can also optionally be dispalyed using game object positions.
This tutorial is based on the 3D Action RPG tutorial series, but you can use this for any kind of project.
World Space Canvas on Prefabs #
We’ll turn the enemy HUD of the 3D Action RPG tutorial series into a world space HUD – it’s displayed using a child object of enemies named HUD.
All we have to do is to add a world space canvas to that child object on the enemy prefabs, we don’t need to change anything in the HUD’s setup.
The setup is the same for all enemy prefabs, you can find them in Assets/Tutorial Assets/Prefabs/Combatants/, we’ll change the following prefabs:
- Chomper Variant
- Grenadier Variant
- Spitter Variant
Open a prefab for editing and select the HUD child object.
Canvas #
Add a Canvas component to the HUD child object using the component menu.
This’ll turn the game object’s transform into a Rect Transform (we’ll handle it’s setup shortly) and the added canvas should already be a World Space canvas.
- Render Mode
Select World Space.
Rect Transform #
We need to adjust the scale and size of the canvas, or it’ll be gigantic.
- Scale
Set to X=0.01, Y=0.01, Z=0.01. - Width
Set to 100. - Height
Set to 50.
Depending on your project and HUDs you might need to adjust those values a bit.
Grenadier #
For the grenadier’s prefab (Grenadier Variant) we also need to move the HUD child object up a bit, otherwise the HUD will be hidden by the prefab.
- Pos Y
Set to 5.
Face Camera (Optional) #
Add a Face Camera component to the HUD child object using the component menu.
This component will make sure the canvas (and HUD displayed on it) will face the camera.
When not using a Face Camera component (or other ways to rotate the HUD toward the camera), the HUD can also be viewed from the back, making it mirrored. Please note that the standard rotation (Y=0) will have the front of the HUD face the back side of the enemy, change it to Y=180 to make it face the front (not needed when using the Face Camera component).
That’s it – save the changes and repeat the setup for the other enemy prefabs.
Testing #
Hit play and test the new world space HUDs.
The enemy HUDs can now be displayed behind game objects in the scene and are also smaller or larger, depending on their distance to the camera.
Tip: Not using the canvas #
Sometimes you might want to display a HUD (or other UI) at the position of a game object without using a canvas that’s on it, i.e. still display it as a regular screen space UI.
For this, disable the At Game Object Canvas setting in the HUD component (or UI Box component for UI boxes). The option is enabled by default, disabling it will not use any canvas attached to game objects the UI is displayed at.
