In this tutorial we’ll create an Interaction type HUD using the Unity UI system.

Interaction HUDs are used to display if an interaction is available.

This tutorial is based on the ORK 4 Unity Quickstart 3D tutorials, but can be used in any project.

Your project’s UI system should already be set to Unity UI. If not, check the initial setup tutorial for Unity UI.

HUD Prefab Setup #

HUDs use prefabs to create their content when using Unity UI. All we need is a text that’s displayed in our HUD.

It’s best to work in your UI Environment scene.

Use the scene hierarchy context menu (ORK Framework > HUD > Content > HUD: Text Content) or ORK toolbar (search for: HUD Text Content) to create a HUD and text content in one go.

This’ll create a HUD (without layout groups) and add a text content to it – we’ve already the Text Content child object selected, so let’s start with this.

Text Content #

This child object manages the displayed text and it’s style.

Rect Transform #

Select the stretch anchor presets, i.e. we’ll stretch the transform both horizontally and vertically with it’s parent, so we’ll automatically adjust to the parent’s size.

HUD Text Content #

This component defines the text that is displayed.

TextMeshPro – Text (UI) #

This component manages how the text is displayed.

Style it to your liking, e.g. change the font, font size or alignment. E.g. I’ll use the Middle Center alignment to place the text in the center of the HUD.

HUD #

Select the HUD object, we’ll now style and place the HUD itself.

Image (Optional) #

To add a background image, add an Image component to the object.

I’m using the BoxBlue sprite, feel free to use any image you like.

Rect Transform #

Place the HUD on the canvas where you want it to show and use appropriate anchor presets. Adjust the size to your liking

E.g. I’m placing it at the center of the top of the screen, using a width of 250 and a height of 70.

Create Prefab #

Create a prefab out of the HUD object, e.g. naming it Interaction HUD.

Don’t forget to remove the HUD from the canvas (or also remove the canvas when you’ve set it up in a game scene).

HUD Setup #

Now we’ll use the HUD’s prefab in a HUD.

Open the ORK editor, navigate to UI > HUDs and add a new HUD.

HUD Settings #

Unity UI #

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out.

See this tutorial for details.

Save Settings #

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Testing #

Hit play and test your HUD!

Naturally, you need an interaction and player with an interaction controller for this to work.

If you’re not satisfied with the look, open up the prefabs of the HUD and adjust it to your liking.

Tip: Content Information #

Using Organizer Types (Optional) #

You can use organizer types to display different HUDs for different interactions, e.g. show Talk instead of Interact for NPCs and Collect for items.

This an be achieved by using an organizer type in your interaction components and conditions in your interaction HUD.

Let’s add Talk and Collect interaction HUDs.

Organizer Types #

Open the ORK editor and navigate to System > Organizer Types, we’ll add 2 new types.

Talk Interaction #

Add a new organizer type and change the name:

Item Interaction #

Add a new organizer type and change the name:

Save Settings #

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

HUD Prefabs #

We’ll create 2 copies of the original interaction HUD prefab and change the text, afterwards we’ll add 2 new interaction HUDs in the editor and set up their conditions (and the original HUD’s as well).

Talk HUD Prefab #

Duplicate the Interaction HUD prefab and rename the copy to Talk Interaction HUD.

Open the new prefab for editing, select the Text Content child object and change the settings of the HUD Text Content component:

Save the changes.

Collect HUD Prefab #

Duplicate the Interaction HUD prefab and rename the copy to Collect Interaction HUD.

Open the new prefab for editing, select the Text Content child object and change the settings of the HUD Text Content component:

Save the changes.

Interaction HUD Setup #

Open the ORK editor, navigate to UI > HUDs and select the Interaction HUD.

Display Conditions > Interactions #

We’ll disable displaying the HUD for any interaction.

Not adding an Organizer Type will no longer display the HUD.

We’ll keep it like this – in the future, when other types should be displayed, we can add them here to display the HUD again.

Talk Interaction HUD Setup #

Copy the Interaction HUD.

Base Settings #

Display Conditions > Interactions #

We’ll define the organizer types the HUD will be displayed for.

Unity UI #

Collect Interaction HUD Setup #

Copy the Talk Interaction HUD.

Base Settings #

Display Conditions > Interactions #

We’ll change the used organizer type.

Unity UI #

Item Drops Setup #

We’ll set up the organizer type for item collectors used by item drops.

Navigate to Inventory > Inventory Settings and change the following settings.

Drop Item Settings > Item Collector Settings > Start Settings #

Default Item Collector Setup #

We’ll set up the default organizer type for new item collectors. This’ll be used by any new item collector that’s added to your scenes.

Navigate to Menus > Item Collection and change the following settings.

Item Collection > Default Start Settings #

Save Settings #

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Scene Setup #

Finally, we’ll add the organizer types to NPCs and item collectors already in your scenes.

I’ll base this on the ORK 4 Quickstart 3D tutorials.

World Scene #

Open the World scene, there should be 1 NPC and 3 item collectors in the scene.

Select the NPC’s object – Casual_Bald – and change the Machine (Schematic) component’s Start Settings.

For the items, select an object with an Item Collector component and change it’s Start Settings.

Repeat this for the other item collectors in the scene.

Dungeon Scene #

Open the Dungeon scene, there should be 3 item collectors in the scene.

Select an object with an Item Collector component and change it’s Start Settings.

Repeat this for the other item collectors in the scene.

Testing #

Hit play and test your HUD!

Talking to an NPC now shows a Talk HUD.

Collecting items now shows a Collect HUD.

Add more functionality to interactions by using multiple interaction controllers.