skills.rest
fiando
fiandoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

phaser-gamedev

Build 2D browser games with Phaser 3 scenes, sprites, physics, and animations.

1|Updated Mar 19, 2026
Search Tags:#game development#javascript#physics#sprites#phaser#tilemaps#2d games
One-click install
npx skills add https://github.com/fiando/bake-tycoon --skill phaser-gamedev-fiando
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phaser-gamedev
Source: https://github.com/fiando/bake-tycoon/tree/main/.github/skills/phaser-gamedev
Command: npx skills add https://github.com/fiando/bake-tycoon --skill phaser-gamedev-fiando

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Structuring a Phaser 3 game correctly is hard: developers often misuse scene lifecycles, pick the wrong physics system, load assets at the wrong time, or write frame-dependent logic that breaks across devices. This Skill provides architectural guidance and working code patterns for building maintainable 2D games with Phaser 3. ## Core Features & Use Cases - Scene Architecture: Lifecycle methods (init, preload, create, update), scene transitions, and a recommended Boot/Menu/Game/UI scene structure. - Physics Systems: Guidance on choosing Arcade vs Matter physics, with colliders, overlaps, groups, and body configuration patterns. - Assets, Animation & Tilemaps: Preload patterns with progress bars, spritesheet and atlas animation setup, and Tiled tilemap integration with collision layers. - Anti-Pattern Catalog: Concrete pitfalls to avoid, including spritesheet spacing errors, nine-slice UI slicing mistakes, and frame-dependent movement. - Use Case: Ask the AI to build a platformer prototype, and it will scaffold a Boot scene with a loading bar, a Game scene with Arcade physics, keyboard input, sprite animations, and delta-time movement. ## Quick Start Use the phaser-gamedev skill to create a Phaser 3 platformer scene with a player sprite, gravity, arrow-key movement, and a jumping animation.

Frequently Asked Questions about phaser-gamedev

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

FAQPage Schema
How do I structure a Phaser 3 game with multiple scenes?▼

Create separate scene classes for Boot, Menu, Game, UI, and GameOver, each extending Phaser.Scene with a unique key. Pass data between scenes via this.scene.start('SceneKey', data) and run overlay scenes in parallel with this.scene.launch().

Should I use Arcade or Matter physics in Phaser 3?▼

Use Arcade physics for platformers, shooters, and most 2D games since it is fast with simple AABB collisions. Choose Matter only for physics puzzles, ragdolls, or realistic collision behavior, as it is slower but more accurate.

How do I load spritesheets with spacing in Phaser?▼

Pass frameWidth, frameHeight, and a spacing value to this.load.spritesheet when the source image has gaps between frames. Verify actual frame dimensions in the asset file first, since wrong dimensions silently corrupt later frames.

Why does my Phaser game run at different speeds on different devices?▼

Frame-dependent logic causes speed variation across refresh rates. Multiply movement by delta time in the update method, for example this.speed * (delta / 1000), so behavior stays consistent regardless of frame rate.

How do I add collision between a player and a tilemap layer in Phaser?▼

Create the layer with map.createLayer, enable collisions via setCollisionByProperty or setCollisionBetween, then call this.physics.add.collider(player, layer). Tile properties like collides must be set in Tiled for property-based collision.

When should I avoid using Phaser 3 for a game project?▼

Phaser targets 2D browser games, so it is a poor fit for 3D rendering or native-performance-intensive titles. For simple card games or visual novels, you can skip physics entirely and use only scenes and game objects.

Related Skills

Explore More Software Engineering Skills→
GiantCroissant-LunarGiantCroissant-Lunar

animations

Create and manage Phaser 4 sprite animations with spritesheets and texture atlases.

Official
Intermediate
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic
dzyamikdzyamik

tilemaps

Load Tiled JSON maps, create layers, set collisions, and manage camera culling in Phaser 4.

Community
Advanced
Likas07Likas07

godot-shader-developer

Develop and optimize GLSL-like shaders for the Godot 4 engine.

Community
Advanced