先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
为我们的平台跳跃游戏补充土狼时间与跳跃缓冲，并保持固定物理步长。
输出
预期交付：针对精灵、地图、物理、相机与手感的具体设计建议和反模式修正。（编辑说明，非实际运行结果）
方法说明
--- 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 | - 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.