Animation for Game Designers

Why do Disney characters feel alive? Why do some game characters feel stiff? The 12 principles of animation (1981) remain foundational - and games use them for gameplay communication.

• **Cuphead** - rotoscoped animation in a 1930s cartoon style. Squash/stretch everywhere. Animation IS the game's identity
• **Dark Souls** - enemy anticipation = fair difficulty. Long wind-up = your reaction window. Animation serves gameplay
• **Hollow Knight** - precise hitboxes matching animations. Responsive feel through minimal anticipation for the player

Squash & Stretch

**Squash & Stretch** - deforming an object to show impact and motion. When landing, a character squashes. When jumping - it stretches. Volume is preserved, shape changes. Creates life and physicality.

**Bouncing ball exercise.** A classic animation test. The ball squashes on ground contact and stretches during the fall. One object, infinite depth of possibility.

**Game applications:** - Character landings (impact feedback) - Attacks (weapon squash on hit) - UI elements (button press effect) - Collectibles (coins squash on collect)

Anticipation

**Anticipation** - a preparatory movement before the main action. Before jumping - crouch down. Before striking - wind up. It telegraphs what will happen and prepares the viewer.

**Enemy telegraph.** In Souls-like games, enemy wind-up = your dodge window. Long anticipation = fair difficulty. Without telegraph, attacks feel unfair. Animation serves gameplay.

**Game balance:** - Player attacks: minimal anticipation (feels responsive) - Enemy attacks: clear anticipation (readable) - Balance: player advantage through better responsiveness - Trade-off: longer anticipation = more powerful attack

Follow-Through

**Follow-through** - continuation of movement after the main action. A hand doesn't stop instantly after a strike - it continues its motion. Parts with different mass move at different speeds (drag).

**Secondary motion.** Main movement = body. Secondary = hair, cape, accessories. They follow but with a delay. Creates richness without adding gameplay complexity.

**Implementation:** - Recovery frames after attack - Procedural secondary motion (hair physics) - Camera settling after movement - UI animation overshoot

Easing (Slow In/Out)

**Easing** - non-linear movement between keyframes. Objects accelerate and decelerate rather than moving at constant speed. 'Slow in, slow out' = natural motion. Linear movement feels robotic.

**UI animation.** A menu slides in with ease-out (fast appearance, gentle stop). Feels responsive but not jarring. Linear UI feels cheap and mechanical.

**Easing by context:** - Character movement: ease in-out - UI transitions: ease out (responsive) - Impacts: instant start (no ease in) - Falling objects: ease in only (gravity)

Key Ideas

• **Squash & Stretch** gives life. Impact = squash, motion = stretch. Volume constant, shape changes
• **Anticipation** telegraphs actions. Player = minimal (responsive), Enemy = visible (fair). Animation = game balance tool
• **Follow-through and Easing** complete motion naturally. Overshoot, drag, non-linear speed. Makes everything feel polished

Related Topics

Animation works together with other polish elements:

• Juice — Animation is one of the juice channels. Squash on pickup, bounce on appear
• Game Feel — Animation timing affects game feel. Recovery frames = commitment

Вопросы для размышления

• Think of a game with memorable animations. What principles can you identify?
• How does anticipation affect difficulty in action games?
• Where do you notice easing in non-game contexts? (UI, websites, apps)

Связанные уроки

• la-06-transformations