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.

Canvas #

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.

Rect Transform #

We need to adjust the position, rotation, scale and size of the canvas, or it’ll be gigantic.

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.

Styling #

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.

Unity UI #

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.

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.

Testing #

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.