From gamedev
Builds 2D browser games using Phaser 3 framework, covering scene lifecycle, sprites, Arcade/Matter physics, tilemaps, animations, input handling, and architecture.
npx claudepluginhub kyh/vibedgamesThis skill uses the workspace's default tool permissions.
Build 2D browser games using Phaser 3's scene-based architecture and physics systems.
Builds and refactors Phaser 3 browser games for new projects, scenes, entities, physics, UI, tilemaps, animations, input, audio, cameras, and Phaser-specific bugs or performance issues.
Builds 2D browser games with Phaser 3 using scene-based architecture, TypeScript, Vite bundling, and EventBus. Use for new games, Phaser features, or sprite-based web games.
Builds web-based 2D/3D game engines and games using HTML5 Canvas, WebGL, and JavaScript. Covers game loops, physics, collisions, sprites, controls, audio, and multiplayer.
Share bugs, ideas, or general feedback.
Build 2D browser games using Phaser 3's scene-based architecture and physics systems.
Read spritesheets-nineslice.md FIRST.
Spritesheet loading is fragile—a few pixels off causes silent corruption that compounds into broken visuals. The reference file contains the mandatory inspection protocol.
Quick rules (details in reference):
spacing: N in loader configimageWidth = (frameWidth × cols) + (spacing × (cols - 1))Read these BEFORE working on the relevant feature:
| When working on... | Read first |
|---|---|
| Loading ANY spritesheet | spritesheets-nineslice.md |
| Nine-slice UI panels | spritesheets-nineslice.md |
| Tiled tilemaps, collision layers | tilemaps.md |
| Physics tuning, groups, pooling | arcade-physics.md |
| Performance issues, object pooling | performance.md |
| System | Use When |
|---|---|
| Arcade | Platformers, shooters, most 2D games. Fast AABB collisions |
| Matter | Physics puzzles, ragdolls, realistic collisions. Slower, more accurate |
| None | Menu scenes, visual novels, card games |
scenes/
├── BootScene.ts # Asset loading, progress bar
├── MenuScene.ts # Title screen, options
├── GameScene.ts # Main gameplay
├── UIScene.ts # HUD overlay (launched parallel)
└── GameOverScene.ts # End screen, restart
this.scene.start('GameScene', { level: 1 }); // Stop current, start new
this.scene.launch('UIScene'); // Run in parallel
this.scene.pause('GameScene'); // Pause
this.scene.stop('UIScene'); // Stop
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
width: 800,
height: 600,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
physics: {
default: 'arcade',
arcade: { gravity: { y: 300 }, debug: false }
},
scene: [BootScene, MenuScene, GameScene]
};
class GameScene extends Phaser.Scene {
init(data) { } // Receive data from previous scene
preload() { } // Load assets (runs before create)
create() { } // Set up game objects, physics, input
update(time, delta) { } // Game loop, use delta for frame-rate independence
}
// CORRECT: scales with frame rate
this.player.x += this.speed * (delta / 1000);
// WRONG: varies with frame rate
this.player.x += this.speed;
| Anti-Pattern | Problem | Solution |
|---|---|---|
Global state on window | Scene transitions break state | Use scene data, registries |
Loading in create() | Assets not ready when referenced | Load in preload(), use Boot scene |
| Frame counting | Game speed varies with FPS | Use delta / 1000 |
| Matter for simple collisions | Unnecessary complexity | Arcade handles most 2D games |
| One giant scene | Hard to extend | Separate gameplay/UI/menus |
| Magic numbers | Impossible to balance | Config objects, constants |
| No object pooling | GC stutters | Groups with setActive(false) |
Phaser provides powerful primitives—scenes, sprites, physics, input—but architecture is your responsibility.
Before coding: What scenes? What entities? How do they interact? What physics model?
Claude can build complete, polished Phaser games. These guidelines illuminate the path—they don't fence it.