skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

cameras

Implements Phaser 4 camera controls including scroll, zoom, follow, effects, and multi-camera viewports.

Updated Jun 10, 2026
Search Tags:#game development#camera#viewport#phaser#minimap#2d rendering#camera effects
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill cameras-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cameras
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/cameras
Command: npx skills add https://github.com/mudman1986/quarterless --skill cameras-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Phaser 4's camera system involves many interacting concepts—viewports versus scroll, follow lerping, effect lifecycles, and multi-camera ignore lists—and mistakes like confusing viewport position with scroll or restarting effects incorrectly cause subtle rendering bugs. This Skill provides the correct APIs, patterns, and gotchas for the Phaser 4 camera system in one place. ## Core Features & Use Cases - Camera Control Patterns: Covers scrolling, centering, zooming, bounds, deadzones, and smooth sprite following with lerp and offsets via this.cameras.main. - Camera Effects: Documents fade, flash, shake, pan, zoomTo, and rotateTo effects with their events, force flags, and completion callbacks. - Multi-Camera Setups: Explains building minimaps and HUD layers using additional cameras, ignore lists, named lookups, and the 32-camera bitmask limit. - Use Case: When adding a minimap to a Phaser game, use this Skill to create a second camera with a small viewport, set its zoom and scroll, and configure ignore lists so HUD and world objects render only in the correct cameras. ## Quick Start Ask the AI to make the main camera smoothly follow the player sprite with a deadzone and fade in from black when the scene starts.

Frequently Asked Questions about cameras

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

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

Call cam.startFollow(player, false, 0.1, 0.1) where the lerp values control smoothness—lower values track more smoothly. 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 a second camera in Phaser?▼

Add a camera with this.cameras.add(x, y, width, height), set a small zoom like 0.2, and position its viewport in a corner. Use ignore() on the main camera to exclude HUD objects and on the minimap to exclude world objects as needed.

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

The viewport is the on-canvas rectangle where the camera renders, set with setPosition or setViewport. Scroll is where the camera looks in the game world, set with setScroll or scrollX/scrollY. They are independent of each other.

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

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 interrupt the current effect.

Is there a limit to how many cameras a Phaser scene can have?▼

The CameraManager supports up to 32 cameras that can use ignore() for Game Object exclusion, since IDs are bitmasks. Cameras beyond 32 receive ID 0 and cannot exclude objects, though they still render.

How do I convert pointer coordinates to world coordinates with a zoomed camera?▼

Use cam.getWorldPoint(pointer.x, pointer.y) to convert screen coordinates into world coordinates, accounting for scroll, zoom, and rotation. Raw pointer coordinates are screen space and will be wrong when the camera is scrolled or zoomed.

Related Skills

Explore More Software Engineering Skills→
WanderTheWeebWanderTheWeeb
1

cameras

Configure Phaser 4 cameras for viewport rendering, scrolling, zoom, and target following.

Community
Intermediate
ArtRivArtRiv

cameras

Control Phaser 4 camera behavior for viewport rendering and world navigation.

Community
Advanced
Raphe-devRaphe-dev

filters-and-postfx

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

Community
Intermediate
lrbjklrbjk

unity-camera

Control Unity Scene View and Game Camera transforms and properties.

Community
Intermediate