game-development
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
- Installs
- 680
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill game-development- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads game-development automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Game Development Animation
Apply Disney's 12 animation principles to game engines, player feedback, and interactive entertainment.
Quick Reference
| Principle | Game Implementation |
|---|---|
| Squash & Stretch | Character deformation, impact frames |
| Anticipation | Wind-up animations, charge indicators |
| Staging | Camera focus, environmental cues |
| Straight Ahead / Pose to Pose | Procedural vs keyframed animation |
| Follow Through / Overlapping | Capes, hair, weapon trails |
| Slow In / Slow Out | Animation curves, attack/recovery |
| Arc | Projectile paths, jump trajectories |
| Secondary Action | Particles, screen shake, audio sync |
| Timing | Frame data, hit-stop, response windows |
| Exaggeration | Stylized movement, hit reactions |
| Solid Drawing | Consistent silhouettes, read at distance |
| Appeal | Character personality, satisfying feedback |
Principle Applications
Squash & Stretch: Deform characters on landing impact. Stretch during fast movement. Impact frames freeze and squash for power. Keep volume consistent in deformation.
Anticipation: Attack wind-ups telegraph to players. Jump squats before leaving ground. Charge attacks show buildup. Enemy tells warn of incoming damage.
Staging: Camera frames important action. Environmental lighting guides attention. Enemy placement creates readable combat scenarios. UI doesn't obscure critical gameplay.
Straight Ahead vs Pose to Pose: Procedural animation (ragdoll, physics) is straight ahead. Keyframed attack combos are pose to pose. Blend both—keyframed base with procedural secondary motion.
Follow Through & Overlapping: Secondary elements (hair, cloth, tails) continue after body stops. Weapon trails persist after swing. Landing recovery extends past initial impact.
Slow In / Slow Out: Use animation curves—never linear for character motion. Attack startup fast-out, recovery slow-in. Ease jumps at apex for floatiness control.
Arc: Jumping follows parabolic arc. Sword swings trace curved paths. Projectiles arc naturally unless hitscan. Dodge rolls curve rather than linear translate.
Secondary Action: Screen shake on impact. Particle bursts on hits. Controller rumble synced to action. Sound design reinforces visual timing.
Timing: Hit-stop (freeze frames) emphasizes impact—2-5 frames typical. Attack startup/active/recovery frame data matters for game feel. Response to input under 100ms.
Exaggeration: Game animation reads at distance and speed. Exaggerate poses 20-30% beyond realistic. Hit reactions more dramatic than physics would suggest. Stylization serves clarity.
Solid Drawing: Silhouettes must read at all zoom levels. Consistent character proportions across animations. Strong poses at keyframes. Avoid tangent lines that confuse form.
Appeal: Characters have personality in idle animations. Movement feels satisfying independent of mechanics. Players should enjoy watching their character move.
Engine Patterns
Unity
// Squash and stretch on landing
IEnumerator LandingSquash() {
transform.localScale = new Vector3(1.2f, 0.8f, 1.2f);
yield return new WaitForSeconds(0.05f);
// Ease back to normal
float t = 0;
while (t < 1) {
t += Time.deltaTime * 8f;
transform.localScale = Vector3.Lerp(
new Vector3(1.2f, 0.8f, 1.2f),
Vector3.one,
EaseOutElastic(t));
yield return null;
}
}
// Hit-stop for impact
IEnumerator HitStop(int frames) {
Time.timeScale = 0f;
for (int i = 0; i < frames; i++)
yield return null;
Time.timeScale = 1f;
}
Unreal
// Animation curve for easing
UPROPERTY(EditAnywhere)
UCurveFloat* JumpArcCurve;
// Apply curve to movement
float CurveValue = JumpArcCurve->GetFloatValue(NormalizedTime);
Timing Reference
| Action Type | Startup | Active | Recovery |
|---|---|---|---|
| Light attack | 3-6f | 2-4f | 8-12f |
| Heavy attack | 12-20f | 4-8f | 16-24f |
| Jump | 3-4f | -- | 4-6f |
| Dodge | 2-4f | 8-12f | 6-10f |
Frame data at 60fps. Adjust for target framerate.
FAQ
What does the game-development skill do?
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
How do I install game-development?
Run npx skills add https://github.com/dylantarre/animation-principles --skill game-development in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/game-development/ (personal) or .claude/skills/game-development/ (project).
Which AI agents can use game-development?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is game-development safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains game-development?
It is published by dylantarre in dylantarre/animation-principles. It has 680 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image