skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

cameras

Implements Phaser 4 camera controls including effects, follow, zoom, bounds, and viewports.

2|10|Updated Jul 28, 2026
Search Tags:#game development#camera#viewport#phaser#2d games#minimap#screen shake
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill cameras-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cameras
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/cameras
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill cameras-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Phaser 4's camera system involves many subtle concepts—viewport vs scroll coordinates, follow lerping, effect forcing, and multi-camera ignore lists—that are easy to misuse without a consolidated reference. ## Core Features & Use Cases - Camera Effects: Apply fade, flash, shake, pan, zoomTo, and rotateTo effects with easing, callbacks, and completion events. - Follow & Bounds: Make cameras smoothly follow sprites with lerp, deadzones, and world bounds constraints. - Multi-Camera Setups: Build minimaps and HUD layers using multiple cameras with ignore lists and named lookups. - Use Case: You are building a platformer and need the main camera to smoothly follow the player, shake on damage, fade out on level completion, and render a corner minimap showing the whole level. ## Quick Start Ask the AI to make the main camera follow the player sprite with smooth lerp and add a fade-in effect 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?▼

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 to add screen shake and fade effects to a Phaser camera?▼

Use cam.shake(duration, intensity) for shake and cam.fadeOut(duration) or cam.fadeIn(duration) for fades. Effects do not restart while running unless you pass force: true, and each emits start and complete events.

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

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. They are independent.

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

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

Camera effects like fade, flash, shake, pan, and zoomTo do not restart while already running. Pass force: true as the force parameter to restart the effect, or check the effect's isRunning property first.

Does Phaser camera ignore work with more than 32 cameras?▼

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

Related Skills

Explore More Software Engineering Skills→
simon-tannasimon-tanna

game-setup-and-config

Configure Phaser 4 game instances with rendering, scaling, and pixel art settings.

Community
Intermediate
punkfuncgamespunkfuncgames

scene-module

Load and transition Unity scenes asynchronously with progress reporting.

Official
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