# UI Prefabs

HNS needs to know, where to find the different UI elements on your marker. Each feature needs specific UI elements to work properly, so make sure to correctly assign them.

{% hint style="info" %}
The most simply way to get started is to duplicate any UI prefab and customize it to your needs. You'll find the prefab in the prefabs folder:\
\&#xNAN;*Sickscore Games* > *HUD Navigation System* > *\_Examples* > *HUDPrefabs*.
{% endhint %}

![](/files/AO8JpQl6RtUKghJ59VAj)

## HNS Radar Prefab

* **Icon:** The main icon for this element
* **Arrow Above:** The icon used as the upwards arrow for the height system
* **Arrow Below:** The icon used as the downwards arrow for the height system

## HNS Compass Bar Prefab

* **Icon:** The main icon for this element
* **Distance Text:** The [text reference](/hud-navigation-system/hud-navigation-element/text-references.md) used for the distance text.

## HNS Indicator Prefab

* **Onscreen Rect:** The parent transform of the onscreen indicator
* **Onscreen Icon:** The main onscreen icon for this element.
* **Onscreen Distance Text:** The [text reference](/hud-navigation-system/hud-navigation-element/text-references.md) used for the offscreen distance text.
* **Offscreen Rect:** The parent transform of the offscreen indicator
* **Offscreen Pointer:** The pointer image used for the offscreen indicator.
* **Offscreen Icon:** The main offscreen icon for this element.
* **Offscreen Distance Text:** The [text reference](/hud-navigation-system/hud-navigation-element/text-references.md) used for the offscreen distance text.

## HNS Minimap Prefab

* **Icon:** The main icon for this element
* **Arrow Above:** The icon used as the upwards arrow for the height system
* **Arrow Below:** The icon used as the downwards arrow for the height system

## Custom Transforms

*Custom Transforms* are an easy way to add custom logic to *HUD Navigation Elements*. We use this mechanic in our example scenes to create the item pick-up.

{% hint style="info" %}
*Custom Transforms* can be used to include custom logic to *HUD Navigation Elements*, such as item pick-ups, interactions, ...
{% endhint %}

### Settings

* **Name:** Enter a unique name, which will be used to access this transform in code
* **Transform:** Assign the transform with your custom logic

### Code Example

Show/hide a custom icon on the indicator, if an element is within the defined radius. How to get this example to work:

1. Add a custom transform to your indicator *UI Prefab*
2. Your *Custom Transform* must be named "*customIcon*" (see code)
3. Create a new C# script and copy\&paste the code below
4. Select the *HUD Navigation Element* or [Element Setting](/hud-navigation-system/hud-navigation-element/element-settings.md) you want to use
5. Assign these methods to their corresponding [Events](/hud-navigation-system/hud-navigation-element/events.md):\
   **OnEnterRadius:** OnIndicatorEnterRadius()\
   **OnLeaveRadius:** OnIndicatorLeaveRadius()

```csharp
using UnityEngine;
using SickscoreGames.HUDNavigationSystem;

public class CustomTransformCallbackScript : MonoBehaviour
{
	public void OnIndicatorEnterRadius (HUDNavigationElement element, NavigationElementType type)
	{
		ShowCustomIndicatorTransform(element, type, true);
	}


	public void OnIndicatorLeaveRadius (HUDNavigationElement element, NavigationElementType type)
	{
		ShowCustomIndicatorTransform(element, type, false);
	}


	void ShowCustomIndicatorTransform (HUDNavigationElement element, NavigationElementType type, bool visible)
	{
		// we're only interested in indicator events
		if (!type.Equals(NavigationElementType.Indicator))
			return;

		// check if indicator exists
		if (element.Indicator != null)
		{
			// show/hide our custom icon, if it exists
			Transform customIcon = element.Indicator.GetCustomTransform("customIcon");
			if (customIcon != null)
				customIcon.gameObject.SetActive(visible);
		}
	}
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sickscoregames.gitbook.io/hud-navigation-system/hud-navigation-element/ui-prefabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.