Learn how to show a dialogue on a world space canvas (Unity UI module).
UI boxes (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 UI box at the position of a game object, e.g. the speaker of a dialogue. This is done by having a Canvas on the game object the UI box is using for positioning.
Since this requires the UI box to use a game object for positioning, it’s only possible for UIs that are displayed that way, e.g. Show Dialogue nodes displaying at the speaker’s position or Action Info Notifications displaying at the combatant’s position.
This tutorial is based on the 3D RPG Playground series, but you can use this for any kind of project. We’ll turn the dialogue of the concerned citizen of the 3D RPG Playground series into a world space dialogue.
For this, we’ll set up the following:
- add a canvas to the NPC
- a new UI box
- change the dialogue schematic
Let’s get to it!
World Space Canvas on NPC #
To show the dialogue in world space, we’ll add a canvas as a child object of the NPC’s game object.
Open the World scene (Assets/Scenes/) and select the Casual3_Male game object in the town (or whatever NPC prefab you’ve used).
Add an empty game object as a child object to the NPC’s game object and name it UI.
Add a Canvas component to the UI 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 position, rotation, scale and size of the canvas, or it’ll be gigantic.
- Pos Y
Set to 4.
Set to X=0, Y=180, Z=0.
We need to rotate it by 180 on the Y axis or it’ll face to the other side of the NPC.
Set to X=0.01, Y=0.01, Z=0.01.
Set to 200.
Set to 200.
Depending on your project and UI boxes you might need to adjust those values a bit.
And that’s it for the NPC’s game object – don’t forget to save your changes in the scene.
UI Box #
Next, we’ll set up a new UI box.
Prefab Setup #
Even on a world space canvas, the UI box will be placed based on the prefab’s setup (i.e. anchor preset, position, etc.).
We’ll set up a UI box that adjusts it’s height to the displayed content (growing upwards) and is displayed with it’s bottom edge at the center of the canvas.
Use the scene hierarchy context menu to create a fit size UI box variant: Makinom > UI Box > UI Box Fit Size with Title
Rect Transform #
Select the created UI Box game object and change the settings in the following order.
Select the middle center anchor presets (should be the default).
Set to X=0.5, Y=0.
- Pos Y
Set to 0.
Style the box the way you want, e.g. I’m using the BoxBeige sprite as background (with a white color with full alpha value to make it completely opaque) for the content and title box.
I’m using a black font color (TextMeshPro – Text components for content and title) and increase the padding of the layout group components on the UI box and title box.
It should now look something like this.
Create a prefab #
Create a prefab out of the UI box, e.g. save it as UI Box Beige World Space Dialogue.
Don’t forget to remove the Canvas from the scene in case you did this in one of the game scenes.
UI Box Setup #
Open the Makinom editor, navigate to UI > UI Boxes and create a new UI box.
Set to World Space Dialogue.
- UI Layer
Select Layer 1.
In case the UI box is used without a game object of on a game object without a canvas, it’ll be displayed on this UI layer.
When displaying on a world space canvas, the UI box will not use the defined UI layer.
Unity UI #
- UI Box Prefab
Select the UI Box Beige World Space Dialogue prefab we just created.
Save Changes #
That’s it for the UI box setup.
Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.
Updating NPC Dialogue Schematic #
Navigate to Schematics and open the ChangingDialogue schematic. Alternatively, you can also click on Edit Schematic in the NPC’s Interaction Machine component to directly open the schematic.
We only need to change certain Show Dialogue nodes – i.e. the ones where the NPC (Actor 1) is speaking.
I’ve circled them red in this image:
Show Dialogue #
The change is the same for all 4 Show Dialogue nodes.
- UI Box
Select World Space Dialogue.
The dialogue already uses a speaker (Use Speaker being enabled), so we only need to enable showing it at the speaker’s game object and use the UI child object we set up.
- Display At Actor
Enable this setting.
- Child Object
We’ll define a path to a child object.
- Find Child
Set to: UI
Don’t forget to repeat the setup for all 4 NPC dialogue nodes.
And that’s it – click on Save Schematic to save the changes.
Hit play, go to the NPC and start the dialogue.
The NPC’s responses are now shown in world space – it works!
The player’s dialogues are still displayed in regular screen space. You can naturally also change that if you want – inputs still work when used in world space.
Tip: Not using the canvas #
Sometimes you might want to display a UI box (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 UI Box component (or HUD component for HUDs). The option is enabled by default, disabling it will not use any canvas attached to game objects the UI is displayed at.