Phaser 4 : cameras

--- name: cameras description: "Use thisskill 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/ Relatedskills :../game-setup-and-config/SKILL.md ,../sprites-and-images/SKILL.md ,../filters-and-postfx/SKILL.md ## Quick Start ``js // In a Scene's create() method: // Access the default camera (created automatically) const cam = this.cameras.main; // Scroll the camera to look at a different part of the world cam.setScroll(200, 100); // Center camera on a world coordinate cam.centerOn(400, 300); // Zoom in (2x) -- values < 1 zoom out, > 1 zoom in cam.setZoom(2); // Follow a sprite with smooth lerp cam.startFollow(player, false, 0.1, 0.1); // Constrain the camera to the world bounds cam.setBounds(0, 0, 2048, 2048); // Fade in from black over 1 second cam.fadeIn(1000); // Add a filter to the camera (v4 feature) cam.filters.external.addBlur(1, 2); ` ## 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'. `js // The manager is at this.cameras (not this.camera) this.cameras // CameraManager instance this.cameras.cameras // Array of Camera objects (render order) this.cameras.main // Reference to the "main" camera (first one by default) this.cameras.default // Un-transformed utility camera (not in the cameras array) ` **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. ``js // Viewport: a 320x200 mini-map in the top-right corner constminiCam = this.cameras.add(480, 0, 320, 200); // Scroll: make the mini-map show a different area of the world miniCam .setScroll (1000, 500); // Zoom: the mini-map shows more of the world miniCam .setZoom (0.25