skills.rest
cskwork
cskworkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

phaser

Creates 600x600 Phaser 3 educational games and interactive 2D learning content.

Updated Jan 24, 2026
Search Tags:#game development#javascript#drag and drop#phaser#2d games#educational games#interactive content
One-click install
npx skills add https://github.com/cskwork/art-assets --skill phaser-cskwork
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phaser
Source: https://github.com/cskwork/art-assets/tree/main/.claude/skills/Phaser
Command: npx skills add https://github.com/cskwork/art-assets --skill phaser-cskwork

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires phaser.

What problem does it solve? Building interactive educational games with Phaser 3 involves many pitfalls: SVG assets fail under file:// CORS restrictions, UI elements overflow non-square canvases, and unsupported Graphics API methods cause runtime errors. This Skill provides tested patterns, component templates, and design guidelines for producing working 600x600 educational games. ## Core Features & Use Cases - Game Component Patterns: Ready-to-use code for buttons, draggable cards, drop zones, score displays, progress bars, and feedback animations built with the Phaser Graphics API. - Design System: Predefined color palettes, typography styles, and crisp visual design rules (shadows, borders, highlights) for consistent, accessible UI with 44px minimum touch targets. - CORS-Safe Icon Rendering: Graphics-based icon drawing functions (star, heart, robot, trophy) that work in file://, http://, and production environments without external SVG loading. - Use Case: A teacher requests a drag-and-drop vocabulary sorting game. The Skill generates a complete multi-scene Phaser game (Boot, Hook, Core, Quiz, Wrap) on a 600x600 canvas with drop zones, score tracking, and tween-based feedback animations. ## Quick Start Create a Phaser drag-and-drop educational game about sorting words into categories on a 600x600 canvas.

Frequently Asked Questions about phaser

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

FAQPage Schema
How do I create a drag-and-drop game with Phaser 3?▼

Create a draggable container with setInteractive({ draggable: true }), then define a drop target using this.add.zone().setRectangleDropZone(). Handle dragstart, drag, and dragend events to add scale tweens and depth changes for visual feedback during dragging.

Phaser vs Three.js for interactive educational content?▼

Phaser is better for 2D game mechanics like scores, levels, physics collision, drag-and-drop, and sprite animation, all built in. Three.js suits 3D spatial visualization but requires separate libraries for physics and manual implementation of drag interactions.

Why does Phaser SVG loading fail on local files?▼

this.load.svg() fails under the file:// protocol because CORS policy blocks the request, leaving blank rectangles. The workaround is drawing icons directly with the Phaser Graphics API, which works in file://, localhost, and production environments.

Why is bezierCurveTo not working in Phaser Graphics?▼

Phaser's Graphics object does not implement bezierCurveTo or quadraticCurveTo, unlike the Canvas API. Build complex shapes like hearts from supported primitives such as fillCircle, fillTriangle, fillRoundedRect, arc, and lineBetween instead.

What canvas size should Phaser educational games use?▼

Use a 600x600 square canvas with center coordinates at (300, 300). An 800x600 layout causes UI elements like keypads and buttons to overflow the canvas. Place buttons near y=520 and feedback text near y=565.

Related Skills

Explore More Education & Research Skills→
neo4j-graphacademyneo4j-graphacademy
28

quiz-author

Generate multiple-choice quizzes with hints and solutions in AsciiDoc format.

Official
Intermediate
vvieira010-pixelvvieira010-pixel

uninterrupted-work-cycle-designer

Design structured classroom work cycles with choice systems and teacher protocols.

Community
Advanced
JongsixJongsix

moai-tool-svg

Create and optimize SVG graphics with SVGO-based file reduction.

Community
Advanced
zocomputerzocomputer
45

threejs-geometry

Generate and manipulate 3D geometric shapes using Three.js in JavaScript.

Official
Intermediate