---

name: 2d-games description: >- 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. risk: none source: community date_added: "2026-02-27"

2D Game Development

Principles for 2D game systems. Pair with game-development/web-games / game-development/engine-selection for 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 consistency
• Layers for filtering

---

4. Camera Systems

Type	Use
Follow	Track player
Look-ahead	Anticipate movement
Multi-target	Two-player
Room-based	Metroidvania
Static	Board games, modal skill-checks

Screen Shake

• Short duration (50-200ms)
• Diminishing intensity
• Use sparingly

---

5. Genre Patterns

Platformer

• Coyote time (leniency after edge)
• Jump buffering
• Variable jump height

Top-down

• 8-directional or free movement
• Aim-based or auto-aim
• Decide whether rotation matters

---

6. Anti-Patterns

❌ Don't	✅ Do
Separate textures	Use atlases
Complex collision shapes	Simplified collision
Jittery camera	Smooth following
Pixel-perfect on physics	Choose one approach
Orphaned RAF/listeners after a guest closes	Full teardown

---

Remember: 2D is about clarity. Every pixel should communicate.

When to Use

Use for canvas/Phaser/Kaplay/Pixi 2D systems, or guest viewports inside hybrid web apps.

Example

User request:

Use @2d-games for this task: 2D game development principles.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.