Create a Custom Navigation Bar

v1.0

Most developers will probably want to create a custom navigation bar at some point, so that the UI specifically matches their project. While Northstar comes with multiple Navigation Bars ready to go, this page will guide you through creating your custom Navigation Bar.

While it is possible to create one from an empty Game Object, it is likely far easier to simply duplicate an existing Navigation Bar and customize from there. Thats what we will do in this guide.

The video demonstrates the steps below.

I suggest you make use of the Northstar demo scene to test and set up your new Navigation Bar, unless you have a working Navigation Bar in your main scene. This way you can set it up using tracked objects that are ready to go, prior to setting up your own project.

Duplicate an existing Navigation Bar

Duplicate any of the existing Navigation Bars. If there is one that is very similar to what you're looking to achieve, choose that. Otherwise, choose any of them. Remember that these prefabs must remain in the Resources folder.

Rename it as you'd like. The Northstar Menu window will show the new Navigation Bar when you focus the window.

Customize the Image

Open the prefab and customize your image. This is where you'll update the sprite, if you're using your own sprite, and handle the position and other Rect Transform aspects of the Navigation Bar.

You can of course add additional layers to the Navigation Bar, and any other custom logic and scripts you'd like.

Save the prefab and exist the prefab view.

Create a new Northstar Overlay Settings

You'll most likely want to create a new Northstar Overlay Settings object. You can copy an existing one which closely matches what you're looking to achieve. Name it appropriately.

Assign this object to the Navigation Bar.

Note: In the video, I do this step later on. Its better to do it now though, as the next step will use this value, when we bring the Navigation Bar into the scene.

Bring the Navigation Bar into the scene

Your Navigation Bar should now appear in the Northstar Menu. You can open the Northstar Menu by selecting the Game Object menu, Northstar, Create Menu.

Dock the menu whereever you'd like.

Click the button for your new Navigation Bar. If one exists, you'll be prompted with a warning that this will remove the existing Navigation Bar.

If you're doing this in the demo scene, or a scene which already has objects being tracked, you can press play to see how things look right away. Most settings can be adjusted at runtime on the Scriptable Objects, so you can see the results instantly. Your modifications will NOT be reset when playmode ends.

Update the Visilble Angle and the Fade Angle values, if you'd like.

Copy the Evergreen Objects

Most Navigation Bars will likely have some evergreen objects, such as cardinal directions, tick marks, "forward" icons, and so on. The Navigation Bars which come with Northstar have these objects organized. If you've copied one of the demo Navigation Bars, click the "arrow" icon to find the objects in the Project view.

You may find it easy to copy the entire folder, rename it, and then rename each object in that folder, prior to customizing the look and feel of these objects.

Customize the Evergreen Objects

Each object in the Evergreen Object list will have a Tracked Target Overlay component. In most cases, you'll want to assign a new Northstar Overlay Settings, to override the look and feel of these objects.

Again, you may find it easier to copy an existing Northstar Overlay Settings which closely resembles the look and feel you're going for. Be sure to name the new object appropriately, and assign it to your objects.

Note the demo Navigation Bars will have different settings for the tick marks and the cardinal directions. Each will have its own Northstar Overlay Settings object.

Assign the new Evergreen Objects

With the Navigation Bar open in the Inspector, delete the existing Evergreen Objects from the list with the red "X" button, and then bring your new objects in by dragging them into the Object Field.

Choose what to override

The ticks, directions, and any other Evergreen Objects can each individually choose which aspects to override. Open these, and find the "Overrides" section of the Tracked Target Overlay component.

The column on the left has toggles which allow each object to specify that they would like to override the value with the value from the Northstar Overlay Settings attached to this object. If the toggle is off, the default values in the Northstar Overlay Settings attached to the Navigation Bar will be used.

Important: While the left column with Toggles is unique to each object, the values set in the right column are from the Northstar Overlay Settings Scriptable Object. Changes made in this view will be made on the Scriptable Object itself. All Tracked Targets which use the same Northstar Overlay Settings will share the same settings set in this view.

For each object, toggle on or off the aspects you'd like to override. In many cases, you'll only override a few aspects.

Customize the Override values

Open the Northstar Overlay Settings for the ticks or cardinal directions you'd like to customize. We will assume you are in play mode for this step.

This can be done at runtime to see the results right away! Press play, and then modify the values. Since the values are on a Scriptable Object, changes made during play mode will be saved when you exit play mode.

In this example, we have the Northstar Overlay Settings for the Nav Bar 3 Ticks. When we change the Y Position value, we will be able to see the result in the Game view.

Only objects which have the Override toggle "on" for Y Position and have this Northstar Overlay Settings object selected will be affected.

Customize the Default values

If you're using the Northstar demo scene, you may see the icons for the demo objects already on your bar. These objects are not overriding the Y Position and most other aspects of the Navigation Bar, and will be using the default values in the Northstar Screen Overlay set on the Navigation Bar object.

You can follow the same steps to customize the override values to customize the default values, by opening the Northstar Screen Overlay set to the Navigation Bar, and modifying the settings during Play mode.

Any other customizations you'd like

You're done! If you'd like to customize anything else, feel free.

Often, different types of objects in your game may use different settings. You can create a Norhtstar Overlay Settings object for each, and choose which aspects to override.

You can also extend the functionality with custom code and new UI prefabs.

The "Demo Goal Target" in the Northstar demo scene is an example of a custom object which shows the distance to it in the Navigation Bar.

Your game is unique, and Northstar provides the flexibility allowing you to quickly create custom UI icons that suit your purposes, while taking advantage of the game-ready code.