2d-games
Has your agent apply 2D game development principles. Useful for games on canvas or within web apps, covering elements like sprites and physics.
What it does
This tool helps create 2D games. It explains how to make characters move, use tilemaps, set up cameras, and apply physics, all for games running in a browser or app.
When to use it
- ✓Creating a platformer game with special jump mechanics.
- ✓Developing a top-down game with free movement.
- ✓Adding a small 2D game section within a larger app.
Example of what to ask your AI
“How can I make my 2D game character have a more responsive jump, like they can jump a moment after leaving the platform?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses 2D game design principles like grouping images (atlases), creating animations, setting up collisions, and controlling the camera. Think of it as a guide for organizing your game's visual and interactive parts.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill 2d-gamesOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/game-development/2d-games/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 |
- 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.
FAQ
What is an 'atlas'?
It's like combining several small images into one large one so the game loads faster and runs better.
What is a 'tilemap'?
It's a map made of small blocks (tiles), like in old games, used to create scenery efficiently.
What is 'coyote time'?
It's a small 'help' the game gives the player, allowing them to jump even if they are slightly off the platform, making the game more forgiving.
Details
Original description by the author
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.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3068
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
benchmark-optimization-loop
Has your agent improve something's speed in a measured way. It tests multiple versions and chooses the fastest one that still works correctly.
affaan-m/ECC
change-impact
Helps your agent analyze the impact of code changes before making them. It compares the planned vs. actual results afterward, covering paths, data, tests, and documentation. Useful for risky or system-wide changes.
affaan-m/ECC
click-path-audit
Lets your agent trace all user buttons and interactions to find bugs. It finds issues where functions seem to work alone but fail together. Useful when bugs persist even after debugging.
affaan-m/ECC