phaser-init

Name: phaser-init
Author: Yakoub-ai

62installs0forks

How to install phaser-init?

yakoub-ai/phaser4-gamedev/phaser-init

$npx -y skills add Yakoub-ai/phaser4-gamedev --skill phaser-init

Installs into the current project.

Summary

This skill should be used when the user asks to "create a Phaser game", "initialize a Phaser 4 project", "scaffold a Phaser project", "set up a new game", "start a Phaser project", "bootstrap a game", "npm create phaser", or wants to start a Phaser 4 project from scratch.

Files · 1

View on GitHub

SKILL.md

1	# Phaser 4 Project Initialization
2
3	Scaffold a new Phaser 4 (v4.0.0-rc.7) project with TypeScript and Vite.
4
5	## Quick Scaffold (Recommended)
6
7	Use the official scaffolder for the fastest setup:
8
9	```bash
10	npm create @phaserjs/game@latest
11	```
12
13	This interactive CLI supports React, Vue, Angular, Svelte, Next.js, SolidJS, and plain TypeScript.
14	For beginners: choose TypeScript + Vite when prompted.
15
16	After scaffolding, it installs `phaser@beta` automatically. Run:
17
18	```bash
19	cd my-game
20	npm install
21	npm run dev
22	```
23
24	## Manual Scaffold
25
26	Use this when the user needs a custom setup or wants to understand each piece.
27
28	### Step 1 — Create Project
29
30	```bash
31	mkdir my-game && cd my-game
32	npm init -y
33	npm install phaser@beta
34	npm install -D typescript vite @types/node
35	```
36
37	### Step 2 — Directory Structure
38
39	Create this layout:
40
41	```
42	my-game/
43	├── index.html
44	├── package.json
45	├── tsconfig.json
46	├── vite.config.ts
47	├── public/
48	│ └── assets/
49	│ ├── images/
50	│ ├── spritesheets/
51	│ ├── atlases/
52	│ ├── audio/
53	│ └── tilemaps/
54	└── src/
55	├── main.ts
56	└── scenes/
57	├── BootScene.ts
58	├── PreloaderScene.ts
59	└── GameScene.ts
60	```
61
62	### Step 3 — Configuration Files
63
64	Generate these files exactly as shown in `examples/`:
65
66	- `examples/game-config.ts` — Complete `main.ts` with GameConfig
67	- `examples/boot-scene.ts` — BootScene starter template
68	- `examples/vite-config.ts` — Vite configuration for Phaser 4
69
70	Key configuration points:
71
72	`package.json` scripts:
73	```json
74	{
75	"scripts": {
76	"dev": "vite",
77	"build": "tsc && vite build",
78	"preview": "vite preview"
79	}
80	}
81	```
82
83	`tsconfig.json` critical fields:
84	```json
85	{
86	"compilerOptions": {
87	"target": "ES2020",
88	"lib": ["ES2020", "DOM", "DOM.Iterable"],
89	"module": "ESNext",
90	"moduleResolution": "bundler",
91	"strict": true,
92	"typeRoots": ["./node_modules/phaser/types"],
93	"types": ["Phaser"]
94	}
95	}
96	```
97
98	The `typeRoots` and `types` fields are required for Phaser's TypeScript types to work.
99
100	### Step 4 — Verify Installation
101
102	```bash
103	npm run dev
104	```
105
106	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.
107
108	## What to Do After Scaffolding
109
110	1. Replace `GameScene.ts` with actual game logic (use phaser-coder agent)
111	2. Add assets to `public/assets/`
112	3. Design the full scene flow (use phaser-architect agent)
113	4. Set `arcade: { debug: false }` when done debugging
114
115	## Common Setup Mistakes
116
117	- Assets not loading: In Vite, assets must be in `public/`. Do NOT import them via `import`. Reference as `'assets/image.png'` (relative to server root).
118	- *TypeScript errors on `Phaser.`:** Missing `typeRoots`/`types` in tsconfig. See Step 3.
119	- `phaser` not found: Run `npm install phaser@beta` (not `npm install phaser` — that installs Phaser 3).
120	- Black screen: Check browser console for 404 errors or JS errors.
121
122	## Additional Resources
123
124	### Example Files
125
126	Working templates in `examples/`:
127	- `examples/game-config.ts` — Complete main.ts with scene registration
128	- `examples/boot-scene.ts` — BootScene with minimal asset loading
129	- `examples/vite-config.ts` — Vite config for Phaser 4
130
131	### Reference Files
132
133	- `references/project-templates.md` — Complete file listings for TypeScript+Vite, JavaScript+Vite, and HTML-only setups
134	- `references/template-archetypes.md` — Full archetype specs for platformer, top-down RPG, space shooter, and match-3 puzzle games
135
136	## Template Archetypes
137
138	When 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.
139
140	Available archetypes (use with `/phaser-new [template]` or trigger the phaser-coder agent):
141
142	\| Archetype \| Command \| Core Features \|
143	\|-----------\|---------\|--------------\|
144	\| `platformer` \| `/phaser-new platformer` \| Gravity, jump, platforms, enemies, coins, lives system \|
145	\| `topdown` \| `/phaser-new topdown` \| Zero gravity, 8-dir movement, tilemap world, NPC dialog \|
146	\| `shooter` \| `/phaser-new shooter` \| Scrolling BG, bullet pooling, enemy waves, power-ups \|
147	\| `puzzle` \| `/phaser-new puzzle` \| Match-3 grid, tile swapping, cascade matching, score \|
148	\| `towerdefense` \| `/phaser-new towerdefense` \| Grid-based tower placement, enemy waves, economy, projectile pooling \|
149	\| `runner` \| `/phaser-new runner` \| Auto-scrolling, jump/slide, procedural obstacles, parallax, increasing speed \|
150	\| `cardgame` \| `/phaser-new cardgame` \| Memory match cards, flip animations, pair matching, move scoring \|
151	\| `fighting` \| `/phaser-new fight

People who liked this also viewed

6 picks

Type

phaser-init

62installs0forks

View on GitHub

How to install phaser-init?

yakoub-ai/phaser4-gamedev/phaser-init

$npx -y skills add Yakoub-ai/phaser4-gamedev --skill phaser-init

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Phaser 4 Project Initialization
2
3	Scaffold a new Phaser 4 (v4.0.0-rc.7) project with TypeScript and Vite.
4
5	## Quick Scaffold (Recommended)
6
7	Use the official scaffolder for the fastest setup:
8
9	```bash
10	npm create @phaserjs/game@latest
11	```
12
13	This interactive CLI supports React, Vue, Angular, Svelte, Next.js, SolidJS, and plain TypeScript.
14	For beginners: choose TypeScript + Vite when prompted.
15
16	After scaffolding, it installs `phaser@beta` automatically. Run:
17
18	```bash
19	cd my-game
20	npm install
21	npm run dev
22	```
23
24	## Manual Scaffold
25
26	Use this when the user needs a custom setup or wants to understand each piece.
27
28	### Step 1 — Create Project
29
30	```bash
31	mkdir my-game && cd my-game
32	npm init -y
33	npm install phaser@beta
34	npm install -D typescript vite @types/node
35	```
36
37	### Step 2 — Directory Structure
38
39	Create this layout:
40
41	```
42	my-game/
43	├── index.html
44	├── package.json
45	├── tsconfig.json
46	├── vite.config.ts
47	├── public/
48	│ └── assets/
49	│ ├── images/
50	│ ├── spritesheets/
51	│ ├── atlases/
52	│ ├── audio/
53	│ └── tilemaps/
54	└── src/
55	├── main.ts
56	└── scenes/
57	├── BootScene.ts
58	├── PreloaderScene.ts
59	└── GameScene.ts
60	```
61
62	### Step 3 — Configuration Files
63
64	Generate these files exactly as shown in `examples/`:
65
66	- `examples/game-config.ts` — Complete `main.ts` with GameConfig
67	- `examples/boot-scene.ts` — BootScene starter template
68	- `examples/vite-config.ts` — Vite configuration for Phaser 4
69
70	Key configuration points:
71
72	`package.json` scripts:
73	```json
74	{
75	"scripts": {
76	"dev": "vite",
77	"build": "tsc && vite build",
78	"preview": "vite preview"
79	}
80	}
81	```
82
83	`tsconfig.json` critical fields:
84	```json
85	{
86	"compilerOptions": {
87	"target": "ES2020",
88	"lib": ["ES2020", "DOM", "DOM.Iterable"],
89	"module": "ESNext",
90	"moduleResolution": "bundler",
91	"strict": true,
92	"typeRoots": ["./node_modules/phaser/types"],
93	"types": ["Phaser"]
94	}
95	}
96	```
97
98	The `typeRoots` and `types` fields are required for Phaser's TypeScript types to work.
99
100	### Step 4 — Verify Installation
101
102	```bash
103	npm run dev
104	```
105
106	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.
107
108	## What to Do After Scaffolding
109
110	1. Replace `GameScene.ts` with actual game logic (use phaser-coder agent)
111	2. Add assets to `public/assets/`
112	3. Design the full scene flow (use phaser-architect agent)
113	4. Set `arcade: { debug: false }` when done debugging
114
115	## Common Setup Mistakes
116
117	- Assets not loading: In Vite, assets must be in `public/`. Do NOT import them via `import`. Reference as `'assets/image.png'` (relative to server root).
118	- *TypeScript errors on `Phaser.`:** Missing `typeRoots`/`types` in tsconfig. See Step 3.
119	- `phaser` not found: Run `npm install phaser@beta` (not `npm install phaser` — that installs Phaser 3).
120	- Black screen: Check browser console for 404 errors or JS errors.
121
122	## Additional Resources
123
124	### Example Files
125
126	Working templates in `examples/`:
127	- `examples/game-config.ts` — Complete main.ts with scene registration
128	- `examples/boot-scene.ts` — BootScene with minimal asset loading
129	- `examples/vite-config.ts` — Vite config for Phaser 4
130
131	### Reference Files
132
133	- `references/project-templates.md` — Complete file listings for TypeScript+Vite, JavaScript+Vite, and HTML-only setups
134	- `references/template-archetypes.md` — Full archetype specs for platformer, top-down RPG, space shooter, and match-3 puzzle games
135
136	## Template Archetypes
137
138	When 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.
139
140	Available archetypes (use with `/phaser-new [template]` or trigger the phaser-coder agent):
141
142	\| Archetype \| Command \| Core Features \|
143	\|-----------\|---------\|--------------\|
144	\| `platformer` \| `/phaser-new platformer` \| Gravity, jump, platforms, enemies, coins, lives system \|
145	\| `topdown` \| `/phaser-new topdown` \| Zero gravity, 8-dir movement, tilemap world, NPC dialog \|
146	\| `shooter` \| `/phaser-new shooter` \| Scrolling BG, bullet pooling, enemy waves, power-ups \|
147	\| `puzzle` \| `/phaser-new puzzle` \| Match-3 grid, tile swapping, cascade matching, score \|
148	\| `towerdefense` \| `/phaser-new towerdefense` \| Grid-based tower placement, enemy waves, economy, projectile pooling \|
149	\| `runner` \| `/phaser-new runner` \| Auto-scrolling, jump/slide, procedural obstacles, parallax, increasing speed \|
150	\| `cardgame` \| `/phaser-new cardgame` \| Memory match cards, flip animations, pair matching, move scoring \|
151	\| `fighting` \| `/phaser-new fight

People who liked this also viewed

6 picks

Type