phaser-scene

Name: phaser-scene
Author: Yakoub-ai

63installs0forks

How to install phaser-scene?

yakoub-ai/phaser4-gamedev/phaser-scene

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

Installs into the current project.

Summary

This skill should be used when the user asks to "create a scene", "add a new scene", "make a menu scene", "create a game over screen", "add a level", "set up scene transitions", "create a pause screen", "add a preloader", "create a HUD overlay", or needs any Phaser 4 scene create

Files · 1

View on GitHub

SKILL.md

1	# Phaser 4 Scene Creation
2
3	Every Phaser 4 game is composed of Scene classes. Each scene is a self-contained unit with its own lifecycle, assets, and game objects.
4
5	## Scene Class Pattern
6
7	The canonical pattern for every scene:
8
9	```typescript
10	import Phaser from 'phaser';
11
12	export class MyScene extends Phaser.Scene {
13	constructor() {
14	super({ key: 'MyScene' }); // key MUST be unique across all scenes
15	}
16
17	// Called when scene starts, before preload. Receive data from previous scene.
18	init(data?: Record<string, unknown>): void {
19	// e.g., data.level, data.score from this.scene.start('MyScene', { level: 2 })
20	}
21
22	// Load assets used only by this scene (prefer PreloaderScene for shared assets)
23	preload(): void { }
24
25	// Build the scene: create game objects, physics, input, events
26	create(): void { }
27
28	// Called every frame. Keep lean — call helper methods
29	update(time: number, delta: number): void { }
30
31	// Called when scene is about to be stopped or replaced. Clean up here.
32	shutdown(): void {
33	// Remove event listeners; stop sounds; clear tracked timers
34	}
35	}
36	```
37
38	Register every scene in `main.ts` GameConfig:
39	```typescript
40	scene: [BootScene, PreloaderScene, MainMenuScene, GameScene, GameOverScene]
41	```
42
43	## Scene Type Patterns
44
45	### BootScene
46
47	Minimal. Loads only the assets needed for the loading bar, immediately transitions.
48
49	```typescript
50	export class BootScene extends Phaser.Scene {
51	constructor() { super({ key: 'BootScene' }); }
52
53	preload(): void {
54	this.load.image('loading-bg', 'assets/images/loading-bg.png');
55	this.load.image('loading-bar', 'assets/images/loading-bar.png');
56	}
57
58	create(): void {
59	this.scene.start('PreloaderScene');
60	}
61	}
62	```
63
64	### PreloaderScene
65
66	Shows a loading bar while loading ALL game assets. Set up global animations here too.
67
68	```typescript
69	export class PreloaderScene extends Phaser.Scene {
70	constructor() { super({ key: 'PreloaderScene' }); }
71
72	preload(): void {
73	const { width, height } = this.scale;
74
75	// Loading bar
76	const bg = this.add.graphics();
77	bg.fillStyle(0x111111, 0.8);
78	bg.fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
79
80	const bar = this.add.graphics();
81	this.load.on('progress', (value: number) => {
82	bar.clear();
83	bar.fillStyle(0x00ff88, 1);
84	bar.fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
85	});
86
87	// ── Load all game assets here ──
88	this.load.atlas('characters', 'assets/atlases/characters.png', 'assets/atlases/characters.json');
89	this.load.audio('bgm', ['assets/audio/bgm.mp3', 'assets/audio/bgm.ogg']);
90	}
91
92	create(): void {
93	// Create all animations here — available globally after this
94	this.anims.create({
95	key: 'player-idle',
96	frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
97	frameRate: 8,
98	repeat: -1,
99	});
100
101	this.scene.start('MainMenuScene');
102	}
103	}
104	```
105
106	### MainMenuScene
107
108	Title screen. Handles start button, settings navigation.
109
110	```typescript
111	export class MainMenuScene extends Phaser.Scene {
112	constructor() { super({ key: 'MainMenuScene' }); }
113
114	create(): void {
115	const { width, height } = this.scale;
116
117	this.add.image(width / 2, height / 2, 'menu-bg');
118	this.add.text(width / 2, height * 0.3, 'MY GAME', {
119	fontSize: '64px',
120	color: '#ffffff',
121	fontFamily: 'Arial Black',
122	}).setOrigin(0.5);
123
124	const startBtn = this.add.text(width / 2, height * 0.6, 'PLAY', {
125	fontSize: '32px',
126	color: '#00ff88',
127	backgroundColor: '#333',
128	padding: { x: 20, y: 10 },
129	}).setOrigin(0.5).setInteractive({ useHandCursor: true });
130
131	startBtn.on('pointerover', () => startBtn.setStyle({ color: '#ffff00' }));
132	startBtn.on('pointerout', () => startBtn.setStyle({ color: '#00ff88' }));
133	startBtn.on('pointerdown', () => {
134	this.cameras.main.fadeOut(500, 0, 0, 0, () => {
135	this.scene.start('GameScene', { level: 1 });
136	});
137	});
138	}
139	}
140	```
141
142	### GameOverScene
143
144	End state. Display score, offer restart.
145
146	```typescript
147	export class GameOverScene extends Phaser.Scene {
148	constructor() { super({ key: 'GameOverScene' }); }
149
150	init(data: { score: number }): void {
151	this.registry.set('finalScore', data.score);
152	}
153
154	create(): void {
155	const { width, height } = this.scale;
156	const score = this.registry.get('finalScore') as number;
157
158	this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.7);
159	this.add.text(width / 2, height * 0.35, 'GAME OVER', {
160	fontSize: '56px', color: '#ff4444',
161	}).setOrigin(0.5);
162	this.add.text(width / 2, height * 0.5, `Score: ${score}`, {
163	font

People who liked this also viewed

6 picks

Type

phaser-scene

63installs0forks

View on GitHub

How to install phaser-scene?

yakoub-ai/phaser4-gamedev/phaser-scene

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Phaser 4 Scene Creation
2
3	Every Phaser 4 game is composed of Scene classes. Each scene is a self-contained unit with its own lifecycle, assets, and game objects.
4
5	## Scene Class Pattern
6
7	The canonical pattern for every scene:
8
9	```typescript
10	import Phaser from 'phaser';
11
12	export class MyScene extends Phaser.Scene {
13	constructor() {
14	super({ key: 'MyScene' }); // key MUST be unique across all scenes
15	}
16
17	// Called when scene starts, before preload. Receive data from previous scene.
18	init(data?: Record<string, unknown>): void {
19	// e.g., data.level, data.score from this.scene.start('MyScene', { level: 2 })
20	}
21
22	// Load assets used only by this scene (prefer PreloaderScene for shared assets)
23	preload(): void { }
24
25	// Build the scene: create game objects, physics, input, events
26	create(): void { }
27
28	// Called every frame. Keep lean — call helper methods
29	update(time: number, delta: number): void { }
30
31	// Called when scene is about to be stopped or replaced. Clean up here.
32	shutdown(): void {
33	// Remove event listeners; stop sounds; clear tracked timers
34	}
35	}
36	```
37
38	Register every scene in `main.ts` GameConfig:
39	```typescript
40	scene: [BootScene, PreloaderScene, MainMenuScene, GameScene, GameOverScene]
41	```
42
43	## Scene Type Patterns
44
45	### BootScene
46
47	Minimal. Loads only the assets needed for the loading bar, immediately transitions.
48
49	```typescript
50	export class BootScene extends Phaser.Scene {
51	constructor() { super({ key: 'BootScene' }); }
52
53	preload(): void {
54	this.load.image('loading-bg', 'assets/images/loading-bg.png');
55	this.load.image('loading-bar', 'assets/images/loading-bar.png');
56	}
57
58	create(): void {
59	this.scene.start('PreloaderScene');
60	}
61	}
62	```
63
64	### PreloaderScene
65
66	Shows a loading bar while loading ALL game assets. Set up global animations here too.
67
68	```typescript
69	export class PreloaderScene extends Phaser.Scene {
70	constructor() { super({ key: 'PreloaderScene' }); }
71
72	preload(): void {
73	const { width, height } = this.scale;
74
75	// Loading bar
76	const bg = this.add.graphics();
77	bg.fillStyle(0x111111, 0.8);
78	bg.fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
79
80	const bar = this.add.graphics();
81	this.load.on('progress', (value: number) => {
82	bar.clear();
83	bar.fillStyle(0x00ff88, 1);
84	bar.fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
85	});
86
87	// ── Load all game assets here ──
88	this.load.atlas('characters', 'assets/atlases/characters.png', 'assets/atlases/characters.json');
89	this.load.audio('bgm', ['assets/audio/bgm.mp3', 'assets/audio/bgm.ogg']);
90	}
91
92	create(): void {
93	// Create all animations here — available globally after this
94	this.anims.create({
95	key: 'player-idle',
96	frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
97	frameRate: 8,
98	repeat: -1,
99	});
100
101	this.scene.start('MainMenuScene');
102	}
103	}
104	```
105
106	### MainMenuScene
107
108	Title screen. Handles start button, settings navigation.
109
110	```typescript
111	export class MainMenuScene extends Phaser.Scene {
112	constructor() { super({ key: 'MainMenuScene' }); }
113
114	create(): void {
115	const { width, height } = this.scale;
116
117	this.add.image(width / 2, height / 2, 'menu-bg');
118	this.add.text(width / 2, height * 0.3, 'MY GAME', {
119	fontSize: '64px',
120	color: '#ffffff',
121	fontFamily: 'Arial Black',
122	}).setOrigin(0.5);
123
124	const startBtn = this.add.text(width / 2, height * 0.6, 'PLAY', {
125	fontSize: '32px',
126	color: '#00ff88',
127	backgroundColor: '#333',
128	padding: { x: 20, y: 10 },
129	}).setOrigin(0.5).setInteractive({ useHandCursor: true });
130
131	startBtn.on('pointerover', () => startBtn.setStyle({ color: '#ffff00' }));
132	startBtn.on('pointerout', () => startBtn.setStyle({ color: '#00ff88' }));
133	startBtn.on('pointerdown', () => {
134	this.cameras.main.fadeOut(500, 0, 0, 0, () => {
135	this.scene.start('GameScene', { level: 1 });
136	});
137	});
138	}
139	}
140	```
141
142	### GameOverScene
143
144	End state. Display score, offer restart.
145
146	```typescript
147	export class GameOverScene extends Phaser.Scene {
148	constructor() { super({ key: 'GameOverScene' }); }
149
150	init(data: { score: number }): void {
151	this.registry.set('finalScore', data.score);
152	}
153
154	create(): void {
155	const { width, height } = this.scale;
156	const score = this.registry.get('finalScore') as number;
157
158	this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.7);
159	this.add.text(width / 2, height * 0.35, 'GAME OVER', {
160	fontSize: '56px', color: '#ff4444',
161	}).setOrigin(0.5);
162	this.add.text(width / 2, height * 0.5, `Score: ${score}`, {
163	font

People who liked this also viewed

6 picks

Type