Since we already have a bunch of interactions in our game, it’s time to let our player know when he can interact with something.

We can do this using an Interaction type HUD. Those kind of HUDs will be displayed when the player can interact with something – you can even display different HUDs based on the type of the interaction (e.g. if it’s a Scene Changer, an Item Collector or a custom type).

A new GUI box

Open the ORK Framework editor and navigate to Menus > GUI Boxes. Select the Player HUD box and copy it. Change the following settings in the new HUD.

  • Name
    Set to Interaction HUD.

Content Box Settings

  • Bounds
    Set to X=640, Y=450, W=240, H=50.
  • Anchor
    Select Middle Center.

Open Box Behaviour > Move Settings

  • Start Position
    Set to X=540, Y=450.

Close Box Behaviour > Move Settings

  • End Position
    Set to X=740, Y=450.

That’s it for the GUI box.

The new HUD

Navigate to Menus > HUDs, add a new HUD and change the following settings.

HUD Settings

  • Name
    Set to Interaction.
  • GUI Box
    Select Interaction HUD.
  • HUD Type
    Select Interaction.

Interaction Settings

  • Interact on Click
    Disable this setting.
    If enabled, the player can interact with an available interaction by clicking on the HUD.
  • Any Interactions
    Enable this setting.
    The HUD will be displayed for all available interactions and ignore the type.

Display Conditions

An Interaction type HUD doesn’t have the Game Mode settings like other HUDs, because it’ll only be displayed when the player can actively interact with something – but instead, you can define which type of interaction the HUD will be displayed for. We’ll create a simple interaction HUD, so it’ll be displayed for all kinds of interactions.

HUD Elements

Click on Add Interaction Element to add a HUD element.

  • Text
    Set to: Interact
  • Text Alignment
    Select Center.
  • Text Color
    Select Yellow.
  • Font Size
    Set to 25.
  • Font Style
    Select Bold And Italic.
  • Position
    Set to X=0, Y=0.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Width
    Set to 100.
  • Is Percent (Width)
    Enable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 100.
  • Is Percent (Height)
    Enable this setting.
  • Adjust Height
    Enable this setting.

And that’s it for the HUD – click on Save Settings and close the ORK Framework editor.

Testing

Open the main menu scene (0 Main Menu) and hit play.

gametutorial_45_interaction_hud1

Approach something that’s interactable, like an NPC or an item – the new HUD will appear as soon as the player can interact with it, and disappear when he can’t.

And that’s it for now – the next lesson will cover creating a cinematic event.