~1 min read

Cameras

Viewports, scroll, zoom, follow, and effects — how Phaser decides what to draw and where.

A Camera is a viewport onto the scene’s world space. Every scene has at least one (this.cameras.main); you can add more for splits, minimaps, and picture-in-picture.

World vs. screen coordinates

  • World coordinates are where game objects live. They do not change when the camera moves.
  • Screen coordinates are where pixels land on the canvas.

The camera maps one to the other via scroll, zoom, and rotation. When you need a screen-space overlay (HUD), put it in a separate scene whose camera does not scroll.

Following a target

this.cameras.main.startFollow(player, true, 0.1, 0.1);
this.cameras.main.setBounds(0, 0, world.width, world.height);

The 0.1 lerp factors smooth the follow — 1 is instant, 0 never moves.

Effects

Built-in transitions:

  • shake(duration, intensity) — screen shake.
  • flash(duration, r, g, b) — full-screen color flash.
  • fade(duration, r, g, b) — fade to a color.
  • pan(x, y, duration) — move to a world point.
  • zoomTo(zoom, duration) — animate zoom.

Each returns a tween-like handle you can chain or await via the completion event.

Multiple cameras

const minimap = this.cameras.add(600, 10, 200, 150)
	.setZoom(0.2)
	.setBackgroundColor(0x002244);
minimap.ignore([hudLayer]); // don't draw the HUD in the minimap

Use camera.ignore(...) to keep specific objects out of a specific camera.

  • Scenes — each scene owns its camera manager.
  • Input — pointer coordinates must be transformed through a camera to hit world objects.