Common Phaser scene transition patterns, data passing, and test seam integration for scene management. Use when implementing scene navigation, passing data between scenes, or integrating test seams for scene transitions. Reduces scene transition implementation time by 30-40%.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Common Phaser scene transition patterns, data passing, and test seam integration for scene management. Use when implementing scene navigation, passing data between scenes, or integrating test seams for scene transitions. Reduces scene transition implementation time by 30-40%.
Phaser Scene Transition Patterns
Common Phaser scene transition patterns, data passing, and test seam integration. Reduces scene transition implementation time by 30-40%.
Overview
Standardized patterns for:
Scene navigation (this.scene.start())
Data passing between scenes
Test seam integration for transitions
State management on transitions
Core Patterns
Pattern 1: Scene Navigation
Use this.scene.start() for transitions:
// Navigate to new scenethis.scene.start('GameScene');
// Navigate with datathis.scene.start('GameOverScene', {
score: this.gameState.score,
level: this.gameState.level
});
Each scene receives data via init(data?) method:
exportdefaultclassGameOverSceneextendsPhaser.Scene {
init(data?: { score?: number; level?: number }) {
// Receive data from previous scenethis.finalScore = data?.score || 0;
this.completedLevel = data?.level || 1;
}
create() {
// Use received datathis.add.text(100, 100, `Score: ${this.finalScore}`);
}
}
Store in shared state object for test seam access:
// Store in registry for cross-scene accessthis.registry.set('gameState', {
score: this.gameState.score,
level: this.gameState.level
});
// Access in another sceneconst gameState = this.registry.get('gameState');
Use Phaser's scene data mechanism for reliability:
// Phaser automatically manages scene datathis.scene.start('NextScene', { key: 'value' });
// Access in next sceneinit(data?: { key?: string }) {
const value = data?.key;
}
Wait for test seam initialization after transitions:
# After scene transition, wait for test seam
agent-browser eval"window.__TEST__.commands.goToScene('GameScene')"
agent-browser wait 500 # Wait for scene initialization
agent-browser eval"window.__TEST__.sceneKey"# Verify transition
Pattern 4: State Management
Game state clears when transitioning to fresh scenes:
// Each scene initializes state in create() methodcreate() {
// Initialize fresh statethis.gameState = {
score: 0,
timer: 60,
level: 1
};
}
Test seam enables programmatic state verification:
// Test seam exposes state for verificationwindow.__TEST__.gameState = () => ({
scene: this.scene.key,
score: this.gameState.score,
timer: this.gameState.timer,
level: this.gameState.level
});
// Common pattern for returning to menuwindow.__TEST__.commands.clickMainMenu = () => {
this.scene.start('MainMenuScene');
};
Testing Scene Transitions
Test Seam Workflow
# Navigate to scene
agent-browser eval"window.__TEST__.commands.goToScene('GameScene')"# Wait for transition
agent-browser wait 500
# Verify scene change
agent-browser eval"window.__TEST__.sceneKey === 'GameScene'"# Verify state
agent-browser eval"window.__TEST__.gameState()"
Console Log Fallback
If test seam sceneKey doesn't update, use console logs:
// Add console log in scene create()create() {
console.log(`Scene created: ${this.scene.key}`);
// Scene initialization
}
Verify in browser console:
agent-browser console
# Look for "Scene created: GameScene"
Best Practices
Use this.scene.start() for scene transitions
Pass data via second parameter of scene.start()
Receive data in init(data?) method
Set up test seam in create() method
Initialize fresh state in each scene's create()
Wait 500ms after transitions before checking test seam
Use console logs as fallback for scene verification
Integration with Other Skills
phaser-scene-navigation: Complements with navigation patterns
phaser-game-testing: Uses test seam for scene testing
browser-test-seam-optimization: Optimizes scene transition testing
Related Skills
phaser-scene-navigation - Scene navigation patterns
phaser-game-testing - Phaser testing methodology
browser-test-seam-optimization - Test seam optimization
