home / skills / dylantarre / animation-principles / game-development

game-development skill

/skills/01-by-domain/game-development

This skill helps you apply Disney's animation principles to game engines for expressive characters, responsive feedback, and polished player experiences.

npx playbooks add skill dylantarre/animation-principles --skill game-development

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
4.3 KB
---
name: game-development
description: Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
---

# 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
```csharp
// 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
```cpp
// 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.

Overview

This skill applies Disney's 12 principles of animation to game development workflows, focusing on player feedback, character movement, and interactive entertainment across engines like Unity and Unreal. It translates classic animation ideas into concrete engine patterns, timing references, and implementation tips to improve clarity, responsiveness, and visual appeal. Use it to make gameplay feel satisfying and readable at any camera distance or framerate.

How this skill works

The skill inspects animation needs (impact, anticipation, arcs, timing) and maps each principle to practical implementations: deformation for squash & stretch, curves for slow in/slow out, hit-stop timing for impact, and secondary motion for follow-through. It provides code patterns (C# coroutines, Unreal curve sampling), frame-data guidelines for hit windows, and suggestions for blending keyframed and procedural systems. Results are concise, engine-specific tactics you can drop into character controllers, VFX, and camera systems.

When to use it

  • Designing combat animations and hit feedback (hit-stop, impact FX, timing windows).
  • Polishing player movement: jumps, dodges, attacks, and idle personality.
  • Adding secondary motion: cloth, hair, weapon trails, and particles.
  • Creating readable animations for distant cameras or fast-paced action.
  • When blending keyframed animation with procedural physics or ragdoll.
  • Optimizing animation feel across different target framerates.

Best practices

  • Keep volume when applying squash & stretch and freeze impact frames briefly for emphasis.
  • Use animation curves (ease in/out) rather than linear interpolation for natural motion.
  • Design clear silhouettes and exaggerated poses so animations read at a glance.
  • Implement small hit-stops (2–5 frames at 60fps) to sell impacts without disrupting flow.
  • Blend keyframed core motion with procedural secondary motion for realism and control.
  • Tune frame data for startup/active/recovery and scale timings with your target framerate.

Example use cases

  • Add landing squash and a 3-frame hit-stop for heavy attacks to make impacts feel weighty.
  • Use anticipation wind-ups and charge indicators for telegraphing enemy attacks.
  • Drive jump arcs with an Unreal UCurveFloat or Unity easing curve to control floatiness.
  • Attach procedural follow-through to cloth and hair with damping to avoid jitter.
  • Expose startup/active/recovery frame values in design tools for tuning combat balance.

FAQ

How long should a hit-stop be?

Typically 2–5 frames at 60fps; enough to emphasize impact but short enough to preserve responsiveness.

When should I exaggerate animation versus keep it realistic?

Exaggerate when clarity, readability, or fun is more important than realism—combat reactions and fast actions benefit most.