2d-games
Provides essential technical standards for 2D game components like sprites, collision, and camera behavior.
Install
mkdir -p .claude/skills/2d-games && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/662" && unzip -o skill.zip -d .claude/skills/2d-games && rm skill.zipInstalls to .claude/skills/2d-games
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
2D game development principles. Sprites, tilemaps, physics, camera.Key capabilities
- →Organize sprite atlases to reduce draw calls
- →Configure tilemap layers for terrain and props
- →Implement 2D physics using simplified collision shapes
- →Apply camera follow and look-ahead behaviors
- →Configure genre-specific mechanics like coyote time
How it works
It defines standard 2D game systems by providing guidelines for sprite organization, tilemap layering, and physics collision filtering to ensure visual and mechanical consistency.
Inputs & outputs
When to use 2d-games
- →Design 2D sprite systems
- →Implement tilemap layering
- →Set up 2D physics collisions
- →Configure player camera movement
About this skill
2D Game Development
Principles for 2D game systems.
1. Sprite Systems
Sprite Organization
| Component | Purpose |
|---|---|
| Atlas | Combine textures, reduce draw calls |
| Animation | Frame sequences |
| Pivot | Rotation/scale origin |
| Layering | Z-order control |
Animation Principles
- Frame rate: 8-24 FPS typical
- Squash and stretch for impact
- Anticipation before action
- Follow-through after action
2. Tilemap Design
Tile Considerations
| Factor | Recommendation |
|---|---|
| Size | 16x16, 32x32, 64x64 |
| Auto-tiling | Use for terrain |
| Collision | Simplified shapes |
Layers
| Layer | Content |
|---|---|
| Background | Non-interactive scenery |
| Terrain | Walkable ground |
| Props | Interactive objects |
| Foreground | Parallax overlay |
3. 2D Physics
Collision Shapes
| Shape | Use Case |
|---|---|
| Box | Rectangular objects |
| Circle | Balls, rounded |
| Capsule | Characters |
| Polygon | Complex shapes |
Physics Considerations
- Pixel-perfect vs physics-based
- Fixed timestep for consistency
- Layers for filtering
4. Camera Systems
Camera Types
| Type | Use |
|---|---|
| Follow | Track player |
| Look-ahead | Anticipate movement |
| Multi-target | Two-player |
| Room-based | Metroidvania |
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
- Consider rotation or not
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 |
Remember: 2D is about clarity. Every pixel should communicate.
When not to use it
- →When developing 3D games
- →When complex physics simulations are required
Limitations
- →Limited to 2D game development principles
- →Does not provide engine-specific code implementation
How it compares
It focuses on 2D-specific constraints like pixel-perfect rendering and sprite atlasing rather than general-purpose game engine workflows.
Compared to similar skills
2d-games side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| 2d-games (this skill) | 66 | 6mo | No flags | Beginner |
| threejs-skills | 61 | 4mo | No flags | Intermediate |
| 3d-graphics | 33 | 6mo | No flags | Advanced |
| react-native-design | 33 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
threejs-skills
sickn33
Three.js skills for creating 3D elements and interactive experiences
3d-graphics
samhvw8
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".
liquid-glass-developer
anyproto
Context-aware routing to iOS 26 Liquid Glass implementation patterns. Use when working with glass effects, GlassEffectContainer, morphing transitions, or iOS 26 visual effects.