About 2d-games
A development skill for designing 2D game systems, aimed at developers working with canvas-based games or hybrid web apps. It covers core mechanics and implementation choices from sprites and tilemaps to physics, cameras, and genre patterns.
Key features
- 01Sprite atlases and animation
- 02Tilemap layers and auto-tiling
- 032D collision and fixed timestep
- 04Camera types and screen shake
- 05Platformer and top-down patterns
- 06Canvas lifecycle cleanup
Use cases
- 01Plan sprite and tilemap systems
- 02Add platformer jump forgiveness
- 03Choose collision shapes for mechanics
- 04Prevent leftover listeners after gameplay
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/2d-gamesin Claude Code to confirm it loaded.
Details
From the project README2D Game Development
Principles for 2D game systems. Pair with
game-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 |
- Choose a movement/collision model per mechanic; pixel-art rendering can coexist with physics
- 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 |
| Uncoordinated movement and physics | Define one authority per body |
| 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:
Add coyote time and jump buffering to our platformer while preserving the fixed physics timestep and testing corner collisions.
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.