Windows (Phaser 3)

Examples
1

These are a bit unpolished but they get the idea across.

Cameras make very good windows. They do real scrolling and clip pointer input automatically.

I used 2 Layers to split game objects between the main and window cameras.

Camera 1 (main)
└ Layer 1
  ├ Space nebula
  ├ Eye
  └ Container (_window.container)
    └ titleBar, scrollBarX, scrollBarY, etc.

Camera 2 (_window.camera)
└ Layer 2
  ├ Blue grid
  └ Eye

The tricky part was that I had to restrict pointer input to one camera viewport while dragging.

function onDragStart(pointer) {
  for (const cam of pointer.camera.cameraManager.cameras) {
    cam.inputEnabled = cam === pointer.camera;
  }
}

function onDragEnd(pointer) {
  for (const cam of pointer.camera.cameraManager.cameras) {
    cam.inputEnabled = true;
  }
}
1 Like