2d-games
sickn33/agentic-awesome-skills
2D game development principles: sprites, physics, cameras, and genre patterns for canvas/Phaser/Kaplay/Pixi games.
What is 2d-games?
Covers core 2D game systems including sprite atlases, tilemaps, physics shapes, camera techniques, and platformer/top-down patterns. Use this when building 2D games or embedding game viewports in hybrid web applications.
- Design sprite systems with atlases, animation, pivots, and layering
- Create tilemaps with auto-tiling, collision, and multi-layer composition
- Implement 2D physics using boxes, circles, capsules, and polygons with fixed timestep
- Build camera systems: follow, look-ahead, multi-target, room-based, and static modes
- Apply genre-specific patterns for platformers (coyote time, jump buffering) and top-down games
- Avoid common pitfalls like jittery cameras, mixed pixel-perfect/physics approaches, and orphaned event listeners
How to install 2d-games
npx skills add https://github.com/sickn33/agentic-awesome-skills --skill game-developmentHow to use 2d-games
- 1.Choose your setup: full-screen game or hybrid DOM with guest viewport
- 2.Design your sprite system using atlases and define animation frame rates (8-24 FPS)
- 3.Plan tilemap layers (background, terrain, props, foreground) with appropriate tile sizes (16x16, 32x32, or 64x64)
- 4.Select physics shapes (box, circle, capsule, polygon) and decide between pixel-perfect or physics-based collision
- 5.Implement camera behavior (follow, look-ahead, room-based) appropriate to your genre
- 6.Apply genre patterns: platformers need coyote time and jump buffering; top-down games need movement and aiming logic
- 7.Test screen shake effects (50-200ms duration) and ensure full teardown of listeners when closing guest viewports
Use cases
- Building a platformer with smooth camera follow and jump mechanics
- Creating a top-down action game with 8-directional movement and aim systems
- Designing a Metroidvania with room-based camera transitions
- Embedding a mini-game viewport inside a hybrid DOM application
- Optimizing sprite rendering with texture atlases and draw-call reduction
- Game developers using Phaser, Kaplay, Pixi, or Canvas
- Web developers adding 2D game features to hybrid applications
- Indie game creators building platformers or top-down games
- Teams optimizing 2D rendering performance
2d-games FAQ
Pick one approach per game and stick with it. Mixing both causes inconsistent behavior and debugging difficulty.
Common sizes are 16x16, 32x32, or 64x64 pixels. Choose based on your art style and desired level of detail.
Combine textures into atlases to reduce draw calls, use layering for Z-order control, and apply animation frame sequences at 8-24 FPS.
Coyote time is a brief window (typically 4-6 frames) after leaving a platform where the player can still jump. It makes platformers feel more forgiving and fun.
Use room-based for Metroidvania-style games with discrete areas; use smooth follow for continuous exploration or action games.
Full instructions (SKILL.md)
Source of truth, from sickn33/agentic-awesome-skills.
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-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 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.
Related skills
More from sickn33/agentic-awesome-skills and the wider catalog.
gcp-cloud-run
Build production-ready serverless applications on GCP Cloud Run with optimized cold starts and event-driven architecture.
github-workflow-automation
Automate GitHub workflows and CI/CD pipelines with AI-assisted patterns and DevOps integration.
i18n-localization
Detect hardcoded strings, manage translations, and implement RTL support across locales.
interactive-portfolio
Build portfolios that convert visitors into job offers and client opportunities.
langgraph
Production-grade framework for building stateful, multi-actor AI applications with explicit graph structure.
last30days
Research any topic from the last 30 days across Reddit, X, and the web to become an expert and generate ready-to-use prompts.