Menus, Overlays, And Pause

Hs2d games use scenes for menus and overlays. Do not build pause menus inside the gameplay render loop. Push a scene.

Scene Choices

Type	Use
Hs2dScene	Custom simple menu or splash scene.
Hs2dMenuScene	Menu screen helper.
Hs2dSceneMenu	Reusable cached menu panel inside a scene.
Hs2dOverlayScene	Overlay above another scene.
Hs2dControlPairingScene	Built-in controller pairing scene.
Hs2dControlInputManagerScene	Built-in paired-controller state scene.

Pause Overlay Pattern

Use Hs2dOverlayScene with pauseBelow: true for pause menus. Hs2dGame keeps rendering the level below the overlay, but it stops updating the level.

export class MyPauseScene extends Hs2dOverlayScene {
  constructor(private readonly options: MyPauseSceneOptions) {
    super({ pauseBelow: true });
  }

  override onEnter(game: Hs2dGame): void {
    super.onEnter(game);
    this.options.audioManager?.setBackgrounded(true);
  }

  override onExit(game: Hs2dGame): void {
    this.options.audioManager?.setBackgrounded(false);
    super.onExit(game);
  }

  override update(_deltaMs: number, inputs: GameInput[]): void {
    for (let i = 0; i < inputs.length; i++) {
      const input = inputs[i];
      if (input.release) continue;
      if (input.isButton('play') || input.isButton('back')) {
        this.game?.popScene();
        return;
      }
    }
  }
}

The vertical shooter pause scene follows this pattern and adds restart, quit, pair controllers, and controller state menu items.

Controller Pairing From Pause

Open pairing from a pause menu, not from the gameplay hot path.

if (id === 'pair' && this.options.controlManager) {
  this.game?.pushScene(new Hs2dControlPairingScene({
    controlManager: this.options.controlManager,
  }));
}

if (id === 'state' && this.options.controlManager) {
  this.game?.pushScene(new Hs2dControlInputManagerScene({
    controlManager: this.options.controlManager,
    screenWidth: this.options.screenWidth,
    screenHeight: this.options.screenHeight,
  }));
}

Pairing and controller-state scenes are bounded overlays. They may use direct text and panel drawing because they are not gameplay renderers.

Menu Rendering

Use cached menu helpers for repeated menu panels. Direct drawing is acceptable for bounded menu surfaces, but avoid copying menu drawing techniques into gameplay tile or sprite rendering.

Source References

Source	What to copy
VerticalShooterMenuScene.ts	Menu-to-level replacement flow.
VerticalShooterPauseScene.ts	Pause overlay, audio backgrounding, restart/quit, pairing entrypoints.
Hs2dOverlayScene.ts	pauseBelow behavior.
Hs2dGame.ts	Scene-stack update/render order.