AGENT SKILL

2d-games

2D game development principles. Sprites, tilemaps, physics, camera.

License 许可
MIT
最近更新
2026-11-10
Stars
★ 1
Forks
0

01 前言 Front Matter

name
2d-games
risk
none
source
community
date_added
2026-02-27
description
2D game development principles. Sprites, tilemaps, physics, camera.

03 SKILL.md 正文

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 to Use

This skill is applicable to execute the workflow or actions described in the overview.

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.

04 同仓库更多 Skills

YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

★ 1
YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

★ 1
YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

★ 1
YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

★ 1
YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

★ 1
YYC-Cube
YYC-Cube/YYC3-Knowledge-Base

shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", "switch to --preset", and for building a design system or applying a DESIGN.md or brand spec to shadcn/ui.

★ 1