phaser

Structure Phaser 3 games with scene-based architecture and centralized state management.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/ArifZx/overclocked --skill phaser-arifzx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: phaser
Source: https://github.com/ArifZx/overclocked/tree/main/.agents/skills/phaser
Command: npx skills add https://github.com/ArifZx/overclocked --skill phaser-arifzx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phaser game development can be complex due to scattered patterns and inconsistent project structure; this Skill provides a standard, scalable foundation with a scene-based architecture and centralized state to accelerate building 2D browser games.

Core Features & Use Cases

  • Scene-based architecture: organizes game screens into dedicated Phaser scenes with clear lifecycle.
  • TypeScript-first workflow: enforces type safety, better tooling, and maintainable code.
  • EventBus-driven communication: decouples scenes and systems for robust interactions.
  • Data-driven design and conventions: supports levels, entities, and configs loaded from data sources.
  • Restart-safe lifecycle: includes a centralized GameState and disciplined cleanup to ensure clean restarts.
  • Parallel patterns: enables HUD overlays and modular componentization.

Quick Start

Run the official Vite + TypeScript Phaser template to bootstrap a new project and start building a scene-based 2D game.

Frequently Asked Questions about phaser

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Phaser 3 game with multiple scenes in TypeScript?

Structure Phaser 3 games using a scene-based architecture that organizes game screens into dedicated Phaser scenes with clear lifecycles. A TypeScript-first workflow enforces type safety and maintainability, while an EventBus decouples scenes for robust interactions.

What is the best way to manage state and prevent bugs when restarting Phaser scenes?

Prevent bugs when restarting Phaser scenes by using a centralized GameState with a restart-safe lifecycle. Disciplined cleanup ensures clean restarts by properly resetting event listeners and data, preventing memory leaks across scene transitions.

How do I decouple UI overlays from gameplay logic in web game development?

Decouple UI overlays from gameplay logic in web game development using an EventBus-driven communication system. This approach separates scenes and systems, enabling parallel patterns like HUD overlays and modular componentization without tight coupling.

Can I build data-driven 2D browser games that load levels from external sources?

Build data-driven 2D browser games by loading levels, entities, and configurations from external data sources. This approach supports scalable game design and enforces mandatory conventions for managing complex game entities.

Does this Phaser workflow require a specific project template to get started?

The Phaser workflow uses the official Vite and TypeScript template to bootstrap new projects. Running this template sets up the standard scene-based architecture and centralized state management foundation required to start building sprite-based web games.