playbooks

home / skills / openclaw / skills / phaser-2d-arcade

phaser-2d-arcade skill

/skills/chuckstock/remix-agent-publish/frameworks/phaser-2d-arcade

This skill helps you build fast, single-file Phaser 3 arcade games for mobile-first Remix/Farcade deployments with minimal boilerplate.

npx playbooks add skill openclaw/skills --skill phaser-2d-arcade

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.5 KB
---
name: phaser-2d-arcade
description: Build mobile-first 2D browser games with Phaser 3 Arcade Physics, tuned for Remix/Farcade constraints and single-file delivery.
metadata:
  tags: phaser, game-dev, html5, arcade-physics, remix
---

# Phaser 2D Arcade

Use this skill when a user asks for a Phaser browser game, especially for fast single-file 2D gameplay loops.

## Workflow

1. Start from `assets/starter-single-file.html`.
2. Implement core loop first: `boot -> preload -> create -> update`.
3. Add win/lose condition and scoring before polish.
4. Add touch controls and responsive layout early (mobile-first).
5. If targeting Remix/Farcade, apply SDK hooks from `references/remix-farcade-integration.md`.
6. Validate required hooks (`gameOver`, `onPlayAgain`, `onToggleMute`) before handoff.

## Guardrails

- Prefer Phaser Arcade Physics for simplicity/performance.
- Keep initial scope small: 1 scene, 1 mechanic, 1 fail condition.
- Avoid expensive per-frame allocations and unnecessary visual effects.
- Keep gameplay restart-safe and deterministic.
- For Remix uploads, produce single-file HTML with inline JS/CSS unless user asks otherwise.
- For Remix uploads, include `<script src="https://cdn.jsdelivr.net/npm/@farcade/[email protected]/dist/index.min.js"></script>` in HTML `<head>`.

## References

- `references/phaser-arcade-patterns.md` for scene architecture, controls, and perf defaults.
- `references/remix-farcade-integration.md` for Farcade SDK hooks and integration shape.

Overview

This skill helps build mobile-first 2D browser games using Phaser 3 Arcade Physics, optimized for single-file delivery and Remix/Farcade constraints. It focuses on fast iteration: a minimal scene, touch-friendly controls, and a small, deterministic game loop ready for upload. The output is tuned for performance and simple integration with Farcade SDK when needed.

How this skill works

Start from a single-file HTML starter that contains inline JS/CSS and the Phaser boot sequence (boot -> preload -> create -> update). Implement a core gameplay loop, a single mechanic, and a clear win/lose condition before adding polish. When targeting Remix/Farcade, include the Farcade SDK and validate integration hooks such as gameOver, onPlayAgain, and onToggleMute.

When to use it

  • Rapidly prototype a mobile-first 2D game with an emphasis on performance and small payload.
  • Produce a single-file HTML game for platforms that require self-contained uploads (Remix/Farcade).
  • Create simple arcade loops like endless runners, shooters, or one-screen puzzle challenges.
  • Hand off a deterministic, restart-safe game to QA or a curator with minimal setup.
  • Optimize an existing Phaser project for low-latency mobile controls and resource usage.

Best practices

  • Keep scope tiny: one scene, one core mechanic, one fail condition to ship fast.
  • Use Phaser Arcade Physics for predictable, performant collisions and movement.
  • Build core loop and scoring first; add visuals and effects after gameplay is solid.
  • Design touch controls and responsive layout from the start for mobile-first UX.
  • Avoid per-frame allocations and heavy post-processing; reuse objects and pools.
  • For Remix uploads, inline JS/CSS and include the Farcade SDK script tag exactly as required.

Example use cases

  • A single-file endless runner tuned for touch input and low memory usage.
  • A tiny top-down shooter with a single wave mechanic and restart flow.
  • A one-screen physics puzzler that demonstrates deterministic resets.
  • A quick prototype delivered to a curator or store that requires a self-contained HTML.
  • A polished mini-game for a webpage that integrates mute/play hooks via the Farcade SDK.

FAQ

Do I have to use Phaser Arcade Physics?

Prefer Arcade Physics for this skill because it balances simplicity and performance; only switch engines if you need advanced physics features.

How should I prepare a game for Remix/Farcade?

Produce a single-file HTML with inline JS/CSS, include the Farcade SDK script in the head, and expose required hooks: gameOver, onPlayAgain, onToggleMute.

What performance pitfalls should I avoid?

Avoid per-frame allocations, excessive particle effects, and expensive texture operations; use object pooling and keep draw calls low.