This guide contains the following sections:

1. Adding basic UI interactions
2. Existing UI Manager scripts
3. Miscellaneous details

Adding basic UI interactions

💡Note: This is for interactable UI. In other words, such UI should trigger a specific action, instead of being purely for aesthetic purposes (e.g. background).

1. Add the new interactable element using Unity's UI GameObjects (e.g. UI --> Image or UI --> Button - TextMeshPro). Remember that the GameObject must be within a Unity Canvas.
2. Add a Box Collider (NOT a Box Collider 2D) component to the UI GameObject, and edit the collider to be the correct size. This will be the interactable zone for the element (i.e. where a user can aim to trigger the UI action).
3. Add a UI Collider component to the UI GameObject and set the OnCast() event to the expected action.

💡Most of the actions are handled by suitable Manager scripts (e.g. UIManager.cs). If the expected action is relatively complex and/or belongs in a specific category, consider adding it as a function in either one of the existing managers or a new one.

Debugging

Q: The UI GameObject is not following the Player when it should be (or vice versa).

A: Ensure that the GameObject is a child of the correct Canvas; the Player Prefab has a Canvas under Main Camera which will follow the player, and there may be an additional Canvas in the Scene for UI elements with absolute positions in the environment.

--

Q: The intended response to clicking on the UI element does not occur.

A: It is possible that either the Box Collider or UI Collider elements are missing. Try creating a function that writes to the Console upon the element being interacted with; if the Debug statement appears, then the error is likely in the function itself. Otherwise, another possibility could be that the intended interactable is overlapping and "underneath" the Box Collider of another GameObject with the same UI mask.

Existing UI Manager Scripts

1. UIManager.cs - Handles responses to interactions with the UI menu attached to the player, including audio, language and floor settings, and switching to different sections of the menu.

Miscellaneous details

Original Assets

Original UI assets (e.g. UI menu background) were mostly created in Figma and refined in Photopea. Assets that will be 9-sliced (e.g. rectangles with rounded edges) when imported as sprites will have a 1px transparent border around the perimeter in Photopea to prevent edge defects).

Used Assets

• Font: Space Grotesk for headers and more "aesthetic" purposes & Noto Sans for readability; both are provided by Google Fonts.