skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

cameras

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

465|41|Updated Aug 4, 2026
Search Tags:#game development#javascript#camera#viewport#phaser#minimap#camera effects
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill cameras-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cameras
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/cameras
Command: npx skills add https://github.com/autonomous-ai/openharness --skill cameras-autonomous-ai

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, deadzones, effect lifecycles, and ignore-list bitmasks—that are easy to misuse. This Skill provides accurate, source-grounded guidance so you can implement camera behavior correctly the first time. ## Core Features & Use Cases - Camera Effects: Apply fade, flash, shake, pan, zoomTo, and rotateTo effects with correct signatures, force flags, and completion events. - Follow & Bounds: Configure startFollow with lerp, deadzones, follow offsets, and world bounds constraints. - Multi-Camera Layouts: Build minimaps and HUD overlays using multiple cameras, named lookups, and ignore lists. - Use Case: You are building a platformer and need the main camera to smoothly follow the player within world bounds, a minimap in the corner, and a fade-out transition when the level ends—this Skill gives you the exact API calls and gotchas for each. ## Quick Start Ask the agent 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 camera follow a sprite in Phaser 4?▼

Call cam.startFollow(target) 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() on each camera so the minimap skips HUD objects and the main camera skips minimap-only content.

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

The viewport is the on-screen rectangle 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. The two are independent.

Why does my Phaser camera effect not restart when I call it 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 support post-processing filters?▼

Yes, Phaser 4 cameras have filters.internal and filters.external FilterLists for effects like blur, glow, and color matrix. Filters require WebGL and framebuffer rendering, which you can force with setForceComposite(true).

Why does camera follow snap suddenly on the first frame?▼

startFollow jumps the camera to the target position immediately, then lerps from there. To avoid the visible snap, set the camera scroll to the target's position before calling startFollow.

Related Skills

Explore More Software Engineering Skills→
WanderTheWeebWanderTheWeeb
1

cameras

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

Community
Intermediate
OmarMiraOmarMira

2d-games

Explain sprite systems, tilemaps, physics, and camera mechanics for 2D games.

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