skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

cameras

Configure Phaser 4 cameras for scrolling, zooming, following sprites, and applying visual effects.

Updated May 7, 2021
Search Tags:#game development#camera#viewport#phaser#2d games#minimap#camera effects
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill cameras-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cameras
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/cameras
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill cameras-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Managing viewports, scrolling, zoom, and camera effects in Phaser 4 games requires coordinating many APIs across CameraManager, BaseCamera, and Camera classes, and mistakes like confusing viewport with scroll or misusing effects cause broken rendering. ## Core Features & Use Cases - Camera Control: Scroll, zoom, rotate, set bounds, and follow sprites with lerp smoothing and deadzones using the CameraManager and Camera APIs. - Camera Effects: Apply fade, flash, shake, pan, zoomTo, and rotateTo effects with easing, callbacks, and lifecycle events. - Multi-Camera Setups: Build minimaps, HUD layers, and split viewports using multiple cameras with ignore lists and per-camera filters. - Use Case: Build a platformer where the main camera smoothly follows the player within world bounds, a minimap camera renders a zoomed-out view in the corner, and a HUD camera displays score text that ignores world scrolling. ## Quick Start Use the cameras skill to make the main camera follow my player sprite with smooth lerp and constrain it to my world bounds in Phaser 4.

Frequently Asked Questions about cameras

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a camera follow a sprite in Phaser 4?▼

Call cam.startFollow(player) on the camera, optionally passing lerp values like 0.1 for smooth tracking. You can add a deadzone with setDeadzone(width, height) so the camera only scrolls when the target leaves that rectangle.

How do I create a minimap with multiple cameras in Phaser?▼

Add a second camera with this.cameras.add(x, y, width, height), set a low zoom like 0.2, and position its viewport in a corner. Use ignore lists so each camera renders only the objects intended for it.

What is the difference between viewport and scroll in Phaser cameras?▼

The viewport is the physical rectangle on the canvas where the camera renders, set with setViewport or setPosition. Scroll is where the camera looks in the game world, set with setScroll or scrollX/scrollY, and the two are independent.

Why does my Phaser camera effect not restart when called again?▼

Camera effects like fade, flash, shake, pan, and zoomTo do not restart while already running unless you pass force: true. Check the effect's isRunning property or pass the force flag to override the active effect.

Does Phaser 4 camera shake work with roundPixels enabled?▼

roundPixels only works correctly with integer zoom levels; non-integer zoom combined with roundPixels causes jitter. Shake itself works independently, but pixel rounding can make the motion appear stepped.

How many cameras can use ignore lists in Phaser 4?▼

Only the first 32 cameras receive unique bitmask IDs for Game Object exclusion via ignore(). Cameras beyond 32 get ID 0 and cannot exclude objects from rendering.

Related Skills

Explore More Software Engineering Skills→
phaserjsphaserjs
40.1k

filters-and-postfx

Apply GPU-based visual filters and post-processing effects to Phaser 4 scenes.

Official
Advanced
FelixRauchFelixRauch

spritekit

Guide SpriteKit scene setup, actions, physics, and SwiftUI embedding.

Community
Intermediate
Raphe-devRaphe-dev

filters-and-postfx

Apply bloom, blur, glow, and custom shaders to Phaser 4 objects and cameras.

Community
Intermediate
jallard-007jallard-007

render-textures

Coordinate off-screen rendering workflows for Phaser 4 using RenderTexture and DynamicTexture.

Community
Advanced