Skip to main content

UI Overlay Scene

The UI Overlay Scene in the Game view, showing the speedometer, timer, navigation panel, and help tab

The UI Overlay Scene holds the HUD participants see during a scenario, such as the speedometer, the timer, navigation arrows, and progress bars. It's a separate scene that contains only UI. When a scenario starts, the Player Selector loads the overlay on top of it, so all your scenarios can share one HUD instead of each building its own.

You choose which overlay a scenario uses in the Player Selector's UI Scene Asset field. See Choosing a UI Preset to learn how.

What's in the Overlay​

Hierarchy of UIOverlayScene with the UI Canvas, UI Overlay Canvas, MenuPad, and UICamera expanded

The default overlay is UIOverlayScene, in Assets/mobisim/Scenes/Scenes. It's made of separate modules, one for each HUD element. Here's where to find each one in the Hierarchy:

Speedometer
Speedometer
UI CanvasUI Overlay CanvasInstrumentPanel_2D_Analog
Timer
Timer
UI CanvasUI Overlay CanvasTimer Interface
Navigation Panel
Navigation Panel
UI CanvasUI Overlay CanvasNavigation Panel
Help Tab Panel
Help Tab Panel
UI CanvasUI Overlay CanvasHelp 'Tab' Panel
Battery
Battery
UI CanvasUI Overlay CanvasBatteryUI
Level Progression Bar
Level Progression Bar
UI CanvasUI Overlay CanvasLevel Progression Bar
Menu
Menu
UI CanvasMenuPad
UI Camera and Event System
UI Camera and Event System
UICamera

Some modules have their own page that explains how they work: Speedometer and Help Panel and Menu.

In your own overlay, you can:

  • Turn modules on or off.
  • Move and resize panels on the Canvas.
  • Swap sprites, fonts, colors, and materials to match your study.
  • Add your own UI prefabs that respond to scenario events.

Making Your Own Overlay​

The default overlay works for most scenarios, but your study might need something different, such as a minimal HUD with only a timer, or an extra panel for a particular task. Instead of editing the default, make a copy and change that.

1
Duplicate the default overlay

In the Project window, select UIOverlayScene in Assets/mobisim/Scenes/Scenes and press Ctrl+D (Windows) or Cmd+D (macOS). Give the copy a name that says what it's for.

2
Make it a UI preset

With the copy selected, enable Addressable in the Inspector. Then open the Addressable Labels drop-down and select UI Preset. The Player Selector only lists scenes with this label.

Inspector of the copied overlay scene with Addressable enabled and the UI Preset label selected

3
Edit it and assign it

Open the copy and change it however you need. Then select it in the Player Selector's UI Scene Asset field in each scenario that should use it.

How the Overlay Is Rendered​

UICamera Inspector showing the Culling Mask set to UI and the FindMainCamera and CameraStacker components

The overlay has its own UI Camera, which draws all the HUD elements. When the overlay loads, it finds the main camera in your scenario and adds the UI Camera to that camera's stack, using Unity's camera stacking. The FindMainCamera and CameraStacker components in the overlay handle this for you.

The UI Camera only draws objects on the UI layer, which has two consequences:

  • Everything in the overlay must be on the UI layer, or it won't appear.
  • In-world UI in your scenario, such as a screen or a sign, must not be on the UI layer. Otherwise both cameras draw it, and it appears twice.