---
name: phaser-build
description: Build 2D HTML5 games for the web using Phaser with WebGL/Canvas rendering. Use when creating Phaser game scaffolds, scenes, core loops, or deployment guidance for web-based releases.
---

# Phaser Builder

Focused skill for building Phaser-based 2D web games and guidance aligned with Phaser's web-first design.

## What Phaser Is

- HTML5 game framework for **2D** games in web browsers
- Uses **WebGL** and **Canvas** rendering across desktop and mobile web
- Supports **JavaScript** and **TypeScript** development
- Works with many frontend frameworks and can be bundled for web delivery
- Complete API reference available for Phaser 3.87.0

## Best Fit Scenarios

- 2D games targeting browsers on desktop and mobile
- Lightweight web playable builds (including embed-friendly environments)
- Rapid prototyping and production-grade 2D releases on the web

## Not a Fit When

- You need full **3D** rendering or 3D physics built-in
- You must publish on modern consoles like PS5, Xbox, or Switch
- You require a **no-code** editor-only workflow

## Core Capabilities

- Game scaffolding and scene lifecycle setup
- Input handling, physics, sprites, and 2D animations
- Performance-aware rendering and asset loading strategies
- Web-oriented packaging and deployment guidance

## API Surface Map

### Core Runtime
- **Phaser.Game**: Bootstraps renderer, global systems, and main loop
- **Phaser.Scene**: Primary unit of gameplay logic and lifecycle
- **Scene Plugins**: Loader, Input, Cameras, Tween Manager, Time, Physics

### Assets & Loading
- **Loader Plugin**: Preload images, spritesheets, audio, tilemaps, atlases
- **Cache Manager**: Shared asset caching across scenes

### Display & Cameras
- **Game Objects**: Sprites, Images, Text, Graphics, Containers
- **Cameras**: Scene-level camera manager for view control and effects

### Input & Interaction
- **Input Plugin**: Keyboard, pointer, gamepad input per scene
- **Event Emitter**: Scene events for lifecycle and custom hooks

### Physics
- **Arcade Physics**: Lightweight built-in physics per scene
- **Matter Physics**: Optional physics system when configured

### Animation & Time
- **Animation Manager**: Global animation definitions shared across scenes
- **Tween Manager**: Scene-level tweens for property animation
- **Time / Clock**: Timers, delayed calls, and time scaling

### Audio
- **Sound Manager**: Global audio system for music and sfx

## Scene Lifecycle

- **init**: Prepare state and read scene config
- **preload**: Load assets using the Loader Plugin
- **create**: Build objects, input, and systems
- **update**: Frame loop for gameplay logic

## Global vs Scene Systems

- Global: Renderer, Animation Manager, Cache, Registry, Sound, Scene Manager
- Scene-local: Input, Tweens, Cameras, Loader, Physics

## Development Guidance

- Prefer web-first design and browser performance constraints
- Use JavaScript or TypeScript only
- Keep architecture modular: scenes, systems, and reusable game objects
- Use Scene plugins instead of reaching into Game-level systems

## Boundaries

Focus on Phaser 2D web games. Do not recommend Phaser for 3D-first or console-native releases.

## When NOT to Use

- 3D web development → use `threejs-builder`
- Native mobile apps → use `developer`
- Backend or API development → use `developer`
- Console game development → use `developer`

## Escalation Rules

Pause and ask the owner before:

- shifting the project toward non-web or non-Phaser technology choices
- introducing heavy systems that do not fit lightweight browser delivery
- expanding game scope in ways that materially change production feasibility

## Final Output Contract (MANDATORY)

Every use of this skill should end with:

1. `Skill Fit` - why Phaser is the correct engine choice
2. `Primary Deliverable` - gameplay/system design or implementation summary
3. `Execution Evidence` - files changed, references consulted, and validation completed
4. `Risks / Open Questions` - performance, asset, or scope concerns
5. `Next Action` - the next build, playtest, or polish step


---
Source attribution: JochenYang
Original project: https://github.com/JochenYang/Jochen-ai-rules/blob/2772c5d4dbab439e202337e58a419657209e16ae/skills/phaser-build/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2026 Jochen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: JochenYang
Original project: https://github.com/JochenYang/Jochen-ai-rules/blob/2772c5d4dbab439e202337e58a419657209e16ae/skills/phaser-build/SKILL.md
Attribution basis: Source repository record

Fields of work: Development & Engineering, Product Management
Roles: Frontend Developer, Game Developer, Product Manager
Specialties: API, Backend, Design, DevOps, Frontend, Mobile, Testing
Tools: Phaser
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: b5165e5f9d2ae30ac06b0cf2c02b3467a64d05ecd5892faecb57bfcc8742cfc2