2d-games
2D game development principles. Sprites, atlases, tilemaps, physics, cameras, and genre patterns (platformer, top-down). Use for canvas/Phaser/Kaplay/Pixi 2D games or guest viewports inside hybrid web apps.
new
2D Game Development
Principles for 2D game systems. Pair withgame-development/web-games/game-development/engine-selectionfor framework choice.
Shell vs guest (web)
| Setup | 2D systems live… |
|---|---|
| Full-screen 2D game | Entire app (Phaser/Kaplay/Pixi/Canvas) |
| Hybrid DOM + challenges | Only inside guest viewports; tear down when done |
1. Sprite Systems
| Component | Purpose |
|---|---|
| Atlas | Combine textures, reduce draw calls |
| Animation | Frame sequences (often 8-24 FPS) |
| Pivot | Rotation/scale origin |
| Layering | Z-order control |
Animation Principles
- Squash and stretch for impact
- Anticipation before action
- Follow-through after action
2. Tilemap Design
| Factor | Recommendation |
|---|---|
| Size | 16x16, 32x32, 64x64 |
| Auto-tiling | Use for terrain |
| Collision | Simplified shapes |
| Layer | Content |
|---|---|
| Background | Non-interactive scenery |
| Terrain | Walkable ground |
| Props | Interactive objects |
| Foreground | Parallax overlay |
3. 2D Physics
| Shape | Use Case |
|---|---|
| Box | Rectangular objects |
| Circle | Balls, rounded |
| Capsule | Characters |
| Polygon | Complex shapes |
- Pixel-perfect vs physics-based: pick one approach per game
- Fixed timestep for cons
Subscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | none ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-02-27 |
Related skills
engine-selection
Selects game engines and frameworks by platform, genre, and architecture (full canvas shell vs hybrid DOM shell + guest viewport). Covers Phaser, PixiJS, Kaplay, Canvas/WebGL, Three.js, Babylon.js, Godot, Unity, Ink, Twine. Use when choosing a stack or comparing runtimes before implementation.
game-art
Game art principles. Visual style selection, asset pipeline, animation workflow.
game-audio
Game audio principles. Sound design, music integration, adaptive audio systems.
game-design
Game design principles. GDD structure, balancing, player psychology, progression.
game-development
Game development orchestrator. Routes by platform, dimension, and engine fit (web 2D/3D, hybrid DOM+canvas, narrative tools). Use when starting or structuring a game project, choosing frameworks, or picking among Phaser, PixiJS, Kaplay, Canvas/WebGL, Three.js, Babylon.js, Godot, Unity, or Ink/Twine.