From phaser4-gamedev
Scaffolds a new Phaser 4 project with TypeScript and Vite via official CLI or manual setup. Useful when starting a Phaser game from scratch.
How this skill is triggered — by the user, by Claude, or both
Slash command
/phaser4-gamedev:phaser-initThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scaffold a new Phaser 4 (v4.0.0-rc.7) project with TypeScript and Vite.
Scaffold a new Phaser 4 (v4.0.0-rc.7) project with TypeScript and Vite.
Use the official scaffolder for the fastest setup:
npm create @phaserjs/game@latest
This interactive CLI supports React, Vue, Angular, Svelte, Next.js, SolidJS, and plain TypeScript. For beginners: choose TypeScript + Vite when prompted.
After scaffolding, it installs phaser@beta automatically. Run:
cd my-game
npm install
npm run dev
Use this when the user needs a custom setup or wants to understand each piece.
mkdir my-game && cd my-game
npm init -y
npm install phaser@beta
npm install -D typescript vite @types/node
Create this layout:
my-game/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── public/
│ └── assets/
│ ├── images/
│ ├── spritesheets/
│ ├── atlases/
│ ├── audio/
│ └── tilemaps/
└── src/
├── main.ts
└── scenes/
├── BootScene.ts
├── PreloaderScene.ts
└── GameScene.ts
Generate these files exactly as shown in examples/:
examples/game-config.ts — Complete main.ts with GameConfigexamples/boot-scene.ts — BootScene starter templateexamples/vite-config.ts — Vite configuration for Phaser 4Key configuration points:
package.json scripts:
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}
}
tsconfig.json critical fields:
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"typeRoots": ["./node_modules/phaser/types"],
"types": ["Phaser"]
}
}
The typeRoots and types fields are required for Phaser's TypeScript types to work.
npm run dev
Expected: browser opens at http://localhost:5173 showing a dark canvas (or whatever background color was set). If it shows a blank page, check the browser console for errors.
GameScene.ts with actual game logic (use phaser-coder agent)public/assets/arcade: { debug: false } when done debuggingpublic/. Do NOT import them via import. Reference as 'assets/image.png' (relative to server root).Phaser.*: Missing typeRoots/types in tsconfig. See Step 3.phaser not found: Run npm install phaser@beta (not npm install phaser — that installs Phaser 3).Working templates in examples/:
examples/game-config.ts — Complete main.ts with scene registrationexamples/boot-scene.ts — BootScene with minimal asset loadingexamples/vite-config.ts — Vite config for Phaser 4references/project-templates.md — Complete file listings for TypeScript+Vite, JavaScript+Vite, and HTML-only setupsreferences/template-archetypes.md — Full archetype specs for platformer, top-down RPG, space shooter, and match-3 puzzle gamesWhen the user wants a specific type of game rather than a blank scaffold, generate a complete working game from an archetype. The phaser-coder agent uses the archetype specs to produce all files.
Available archetypes (use with /phaser-new [template] or trigger the phaser-coder agent):
| Archetype | Command | Core Features |
|---|---|---|
platformer | /phaser-new platformer | Gravity, jump, platforms, enemies, coins, lives system |
topdown | /phaser-new topdown | Zero gravity, 8-dir movement, tilemap world, NPC dialog |
shooter | /phaser-new shooter | Scrolling BG, bullet pooling, enemy waves, power-ups |
puzzle | /phaser-new puzzle | Match-3 grid, tile swapping, cascade matching, score |
towerdefense | /phaser-new towerdefense | Grid-based tower placement, enemy waves, economy, projectile pooling |
runner | /phaser-new runner | Auto-scrolling, jump/slide, procedural obstacles, parallax, increasing speed |
cardgame | /phaser-new cardgame | Memory match cards, flip animations, pair matching, move scoring |
fighting | /phaser-new fighting | State machine fighters, 2-player local, hitbox system, round-based |
racing | /phaser-new racing | Top-down rotation steering, tilemap track, checkpoints, AI opponents |
All archetypes generate with placeholder assets (solid-color rectangles/circles via Graphics.generateTexture()) so the game runs immediately without real art. Replace with real assets when ready.
Archetype specifications: references/template-archetypes.md
npx claudepluginhub yakoub-ai/phaser4-gamedev --plugin phaser4-gamedevImplements Phaser 4 game features: scenes, players, enemies, scoring, collectibles, movement, shooting, animations, input, and physics behavior using TypeScript.
Creates and refactors Phaser 3 browser games with scenes, physics, tilemaps, animations, input, audio, camera, and performance fixes.
Builds 2D browser games with Phaser 3 using scene-based architecture, TypeScript, Vite bundling, and centralized state. Use when creating new 2D games, adding game features, or working with Phaser sprites.