February
18
2015

You can let your player know what’s around him with a navigation bar.

A navigation bar is simply a horizontal representation of objects that are in front of the player or camera. You can display various information, e.g. enemy combatants, items, scene changers, event interactions or cardinal directions.

Navigation bars can be created using a Navigation HUD.

Adding the navigation bar HUD

Open the ORK Framework editor and navigate to Menus > HUDs. Add a new HUD and change the following settings.

HUD Settings

  • Name
    Set to Navigation Bar.
  • GUI Box
    Select Top Info.
  • HUD Type
    Select Navigation.

Navigation Settings

  • Display Range
    Set to 135.
    This defines the range in degrees that will be displayed in the navigation bar.
  • North Offset
    Set to 0.
    You can use this setting if north in your game isn’t the usual north direction in Unity.
  • Forward Offset
    Set to 0.
    You can use this setting to add an offset to the forward direction of the player/camera and have the navigation bar display a different range.
  • From Player
    Disable this setting.
    We’ll display the navigation bar using the camera’s direction.
  • Line Y Position
    Set to 10.
    This setting defines where the virtual line of the navigation bar will be placed in the GUI box.
    The different HUD elements will be placed along that line.

Display Conditions

  • In Control
    Select Yes.
  • Shop, In Event, Changing Scene, Game Paused, Blocking Menu Screen
    Select No.
  • In Battle, Target Selection, Performing Action
    Select Ignore.

This setup will display the HUD while the player is in control, i.e. while running around in the field and in real time battles (since we can control the player in there as well).

The different parts displayed by the navigation HUD are defind using HUD Elements. Each element is used for separate information, e.g. cardinal directions, items or combatants. Higher indexed elements will be displayed above lower indexed elements. We’ll add several elements, click on Add Navigation Element to add a new element.

Navigation Element 0

The first element will display the separations between the cardinal directions.

  • Type
    Select Separation.
  • Separations
    Set to 5.

Click on Add Content to add a label to this element.

  • Bounds (Content Label 0)
    Set to X=0, Y=0, W=1, H=20.
    The content bounds define the bounds of each content label within the bounds of the element.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Show Image
    Enable this setting.
  • Color
    Select Default Text.

The element’s bounds will be added to the position of of the individual elements along the virtual navigation line.

  • Bounds
    Set to X=-10, Y=-10, H=20, W=20.

Navigation Element 1

Now we’ll add the cardinal directions. Each cardinal direction will be displayed in it’s own element. First, we’ll add north.

  • Type
    Select North.

Click on Add Content to add a label.

  • Bounds (Content Label 0)
    Set to X=0, Y=-5, W=20, H=20.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Text
    Set to N.
  • Text Color
    Select Yellow.
  • Bounds (Element)
    Set to X=-10, Y=-10, H=20, W=20.

Navigation Element 2

Copy the previous element and change the following settings.

  • Type
    Select East.
  • Text
    Set to E.

Navigation Element 3

Copy the previous element and change the following settings.

  • Type
    Select South.
  • Text
    Set to S.

Navigation Element 4

Copy the previous element and change the following settings.

  • Type
    Select West.
  • Text
    Set to W.

Navigation Element 5

Add a new element, this time we’ll display Scene Changers.

  • Type
    Select Interaction.
  • Range
    Set to 30.
  • Any Interaction
    Disable this setting.
  • Scene Changer Interaction
    Enable this setting.

Click on Add Content to add a label.

  • Bounds (Content Label 0)
    Set to X=0, Y=0, W=20, H=20.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Show Image
    Enable this setting.
  • Use Image
    Enable this setting.
  • Image
    Select SceneChanger.psd – can be found in Assets/Gizmos/.
  • Bounds (Element)
    Set to X=-10, Y=-10, H=20, W=20.

Navigation Element 6

It’s time to display Item Collectors. Copy the previous element and change the following settings.

  • Item Interaction
    Enable this setting.
  • Scene Changer Interaction
    Disable this setting.
  • Image
    Select ItemCollector.psd – can be found in Assets/Gizmos/.

Navigation Element 7

Finally, we’ll add displaying enemies. Copy the previous element and change the following settings.

  • Type
    Select Combatant.
  • Combatant Type
    Select Enemy.
    This will display all combatants that are enemies of the player.
    Optionally, we could also display different content for different factions.
  • Image
    Select Combatant.psd – can be found in Assets/Gizmos/.

And that’s it – click on Save Settings to save the changes.

gameplay_13_navigation_bar1

When playing the game, you’ll see a navigation bar in the top of the screen while running around in the field and in real time battles.

Tip: Navigation Markers

You might have noticed the Navigation Marker element type. Navigation markers can be used to mark positions or game objects in a specific scene. The Navigation HUD will not only display the marker in the scene it’s placed in, but can also display the marker at Scene Changers that lead to the scene – even when multiple scenes need to be crossed to get there.

In order to find the marker in a different scene, you need to scan your scenes for scene changers and spawn points to automatically create a map of all scenes. You can do this in World > Scene Connections by clicking on Scan All Scenes. Keep in mind that you need to rescan the scenes if you changed a connection (scene changer, spawn point), added new scenes or removed scenes.

Navigation markers can be added through Quests and the Event System.