2. One Source of Truth for Resize

engine/screen/ScreenManager.ts is responsible for screen state. It:

• reads visualViewport when available;
• listens to resize and orientationchange;
• recalculates the screen snapshot;
• updates the PIXI renderer;
• notifies subscribers.

Resize events do not immediately trigger every layout recalculation. They first go through ResizeScheduler:

request(): void {
  if (this.scheduled) return;
  this.scheduled = true;
  requestAnimationFrame(() => {
    this.scheduled = false;
    this.handler();
  });
}

This avoids redundant recalculations while the browser window is being resized or the device orientation is changing.

After the screen snapshot changes, the engine emits SCREEN_CHANGED. Game code reacts to this normalized event, not to native browser resize.

Example:

this.unsubscribeScreen = this.node.events.on(SharedUiEvents.ScreenChanged, () => {
  this.applyLayout();
});

This pattern is used in components like LevelPanelComponent, ItemSceneLayoutComponent, LevelBackgroundComponent, and LevelCompletionOverlayComponent.