Use this skill when working with cameras in Phaser 4. Covers camera effects (shake, fade, flash, pan, zoom), following sprites, scroll, bounds, viewports, multiple cameras, and minimap. Triggers on: camera, viewport, scroll, zoom, follow, shake, fade.

Cameras Camera system in Phaser 4 CameraManager, main camera, viewport vs scroll, zoom, bounds, following sprites, camera effects (fade, flash, shake, pan, zoomTo, rotateTo), ignore lists, filters, and keyboard controls. Key source paths: src/cameras/2d/CameraManager.js , src/cameras/2d/BaseCamera.js , src/cameras/2d/Camera.js , src/cameras/2d/effects/ , src/cameras/controls/ Related skills: ../game setup and config/SKILL.md, ../sprites and images/SKILL.md, ../filters and postfx/SKILL.md Quick Start Core Concepts CameraManager Every Scene has a CameraManager accessible via this.cameras . It manages all cameras for that Scene and is registered as a plugin under the key 'CameraManager' . Key methods on CameraManager: Method Signature Description add (x?, y?, width?, height?, makeMain?, name?) Create a new Camera. Defaults to full game size at 0,0. Returns Camera . addExisting (camera, makeMain?) Add a pre built Camera instance. Returns the Camera or null if it already exists. remove (camera, runDestroy?) Remove and optionally destroy a Camera or array of Cameras. If main is removed, resets to cameras[0]. getCamera (name) Find a Camera by its name string. Returns Camera or null . getTotal (isVisible?) Count cameras. Pass true to count only visible ones. fromJSON (config) Create cameras from a config object or array. Used for scene level camera config. resetAll () Destroy all cameras and create one fresh default camera. resize (width, height) Resize all cameras to given dimensions. Camera limit: The manager supports up to 32 cameras that can use ignore() for Game Object exclusion (IDs are bitmasks). Cameras beyond 32 get ID 0 and cannot exclude objects. Main Camera The main property is a convenience reference to a Camera, typically cameras[0] . It is set automatically when: The scene boots (first camera created becomes main) You pass makeMain: true to add() or addExisting() The current main camera is removed (falls back to cameras[0] ) Viewport vs World (Scroll) A Camera has two independent coordinate concepts: 1. Viewport The physical rectangle on the canvas where the Camera renders. Controlled by setPosition(x, y) , setSize(w, h) , or setViewport(x, y, w, h) . By default, fills the entire game canvas. 2. Scroll Where the Camera is "looking" in the game world. Controlled by scrollX / scrollY properties or setScroll(x, y) . Scrolling does not affect the viewport rectangle. worldView is a read only Rectangle updated each frame that reflects what area of the world the camera can currently see, accounting for scroll, zoom, and bounds. Use it for culling or intersection checks. Common Patterns Scrolling the Camera Following a Sprite startFollow accepts any object with x and y properties it does not have to be a Game Object. Lerp of 1 snaps instantly; 0.1 gives smooth tracking. A lerp of 0 on an axis disables tracking on that axis. When a deadzone is set, the camera does not scroll while the target remains inside the deadzone rectangle. The deadzone is re centered on the camera midpoint each frame. Zoom Never set zoom to 0. The minimum is clamped to 0.001. Bounds Bounds only restrict scrolling. They do not prevent Game Objects from being placed outside the bounds, and they do not affect the viewport position. Multiple Cameras Camera Effects All effects are on the Camera class (not BaseCamera ). Each returns this for chaining. Effects that are already running will not restart unless you pass force: true . Fade Fade direction: fadeOut / fade goes transparent to color. fadeIn / fadeFrom goes color to transparent. Flash Shake The intensity value is a small float. The default 0.05 means the camera shifts up to 5% of the viewport size. Pan Pan scrolls the camera so its viewport center finishes at the given world coordinate. ZoomTo RotateTo The angle is in radians . Set shortestPath to true to take the shortest rotation direction. Reset All Effects Keyboard Controls Phaser provides two built in camera control classes. Both require you to call update(delta) in your scene's update method. FixedKeyControl Moves at a fixed speed per frame. No smoothing. SmoothedKeyControl Applies acceleration, drag, and max speed for smooth camera movement. Both controls support zoomIn and zoomOut keys and a zoomSpeed config value. Ignore Lists The ignore method updates a Game Object's cameraFilter bitmask so the camera skips rendering it. This is the primary mechanism for HUD style setups: one camera ignores world objects, another ignores HUD objects. Camera Deadzone The deadzone defines a rectangular area around the follow target where the camera does not scroll. The camera only moves when the target leaves this rectangle. World Point Conversion Convert screen (pointer) coordinates to world coordinates, accounting for scroll, zoom, and rotation: Essential when working with scrolled/zoomed cameras raw pointer coordinates are screen space, not world space. Camera Render List Each frame, renderList is populated with Game Objects visible to this camera. Rebuilt every frame. Force Composite (Offscreen Framebuffer) Force the camera to render to an offscreen framebuffer. Required for CaptureFrame and similar features. Filters enable framebuffer rendering automatically. Use setForceComposite(true) when you need it without filters. Filters on Cameras (v4) In Phaser 4, Camera has a filters property with two FilterList instances: Add post processing effects to a camera the same way you add them to Game Objects: Filters require WebGL. The camera must render via a framebuffer when filters are active. See setForceComposite(true) to explicitly enable this even without filters. Events Camera events are emitted on the Camera instance itself (it extends EventEmitter ). Listen with cam.on(event, handler) . Event constant Dispatched when Phaser.Cameras.Scene2D.Events.FADE IN START fadeIn / fadeFrom begins Phaser.Cameras.Scene2D.Events.FADE IN COMPLETE Fade in finishes Phaser.Cameras.Scene2D.Events.FADE OUT START fadeOut / fade begins Phaser.Cameras.Scene2D.Events.FADE OUT COMPLETE Fade out finishes Phaser.Cameras.Scene2D.Events.FLASH START Flash begins Phaser.Cameras.Scene2D.Events.FLASH COMPLETE Flash finishes Phaser.Cameras.Scene2D.Events.SHAKE START Shake begins Phaser.Cameras.Scene2D.Events.SHAKE COMPLETE Shake finishes Phaser.Cameras.Scene2D.Events.PAN START Pan begins Phaser.Cameras.Scene2D.Events.PAN COMPLETE Pan finishes Phaser.Cameras.Scene2D.Events.ZOOM START Zoom effect begins Phaser.Cameras.Scene2D.Events.ZOOM COMPLETE Zoom effect finishes Phaser.Cameras.Scene2D.Events.ROTATE START RotateTo begins Phaser.Cameras.Scene2D.Events.ROTATE COMPLETE RotateTo finishes Phaser.Cameras.Scene2D.Events.FOLLOW UPDATE Camera updates its follow position (each frame while following). Args: (camera, target) Phaser.Cameras.Scene2D.Events.PRE RENDER Before the camera renders Phaser.Cameras.Scene2D.Events.POST RENDER After the camera renders Phaser.Cameras.Scene2D.Events.DESTROY Camera is destroyed For detailed configuration options, API reference tables, and source file maps, see [the reference guide](references/REFERENCE..//SKILL.md).