Animation is an art form that brings characters and worlds to life, making them feel real, engaging, and emotionally compelling. In video games, animation plays a crucial role in creating an immersive experience, allowing players to connect with the characters they control and the environments they explore. However, many aspiring animators struggle with making their animations feel natural, dynamic, and full of personality. Without the right techniques, even the most visually impressive game can feel stiff, unresponsive, or unnatural. Poor character animations, sluggish controls, or unrealistic physics can break immersion, leading to frustrating gameplay.
The 12 Principles of Animation, developed for film by Disney animators Ollie Johnston and Frank Thomas, are as essential in game animation as they are in film. These principles help create animations that feel responsive, believable, and satisfying to control.
In this article, we will explore each of these 12 principles and examine how they apply specifically to game animation.
Squash and Stretch
This principle uses deformation—compressing (squashing) or elongating (stretching)—to convey weight, flexibility, and energy. Despite changes in shape, the volume remains constant.
Importance
- Prevents animations from appearing stiff or robotic.
- Enhances believability by mimicking real-world physics.
- Can add humor or dramatization when exaggerated.
Techniques
- Keyframe Adjustments: Introduce squashing when an object hits a surface and stretching during acceleration (e.g., a bouncing ball).
- Volume Consistency: Ensure the object doesn’t appear distorted when stretched or squashed by maintaining its overall volume.
- Dynamic Transitions: Gradually transition between squash and stretch states for natural-looking motion.
Anticipation
A preparatory action that signals a major movement or event is about to occur. It builds expectation and ensures that players are aware of the next action before it happens.
Importance
- Helps players react faster to gameplay actions, improving user experience.
- Adds realism by showing the buildup of energy or intention behind an action.
- Enhances dramatic tension by creating visual storytelling moments.
Techniques
- Pre-Motion Setup: Add subtle pre-actions, such as a character leaning back before jumping or pulling an arm back before punching.
- Build-up – Create tension prior to the main action by using a short delay, slowly increasing the motion intensity, or using other visual clues like pulsing or glowing elements to make the action feel more impactful.
- Sound Sync – Include audio cues to reinforce the anticipation of actions to come.
Staging
This principle focuses on presenting the action or idea clearly, ensuring the player’s attention is directed to the most important part of the scene.
Importance
- Essential for mobile games, where smaller screens can make it harder to convey visual clarity.
- Ensures gameplay-critical elements are easily identifiable.
- Enhances player immersion by reducing distractions.
Techniques
- Contrast in Motion: Use exaggerated or slower movements for key elements to make them stand out.
- Lighting and Colors: Use light sources, shadows, and contrasting colors to emphasize primary actions or characters.
- Simplified Backgrounds: Minimize unnecessary details or movements in the background to prevent distraction.
- Camera Angles: Adjust the camera to zoom in or focus on key gameplay moments.
Straight Ahead Action and Pose-to-Pose
These are two different techniques for creating motion, one in which animations are drawn sequentially (Straight Ahead Action) and the other that begins with key poses (Pose-to-Pose).
Importance
- Straight Ahead: Perfect for natural, organic, and chaotic animations like fire, smoke, or environmental effects.
- Pose-to-Pose: Essential for character movements that require structured, gameplay-aligned actions.
Techniques
- Straight Ahead: Animate one frame at a time for complex effects like water ripples or explosions.
- Pose-to-Pose: Define key poses first (e.g., start, middle, and end of a jump) and then add in-betweens for smoother transitions.
- Combine both techniques for animations that need spontaneity with precision.
Follow Through and Overlapping Action
Adds secondary motion to objects or characters, ensuring parts of their body or accessories continue moving after the main action stops.
Importance
- Prevents animations from appearing robotic.
- Adds realism and fluidity to movements.
Techniques
- Secondary Motion: Add delayed motion to elements like clothing, tails, or hair.
- Overlapping Actions: Animate different body parts moving at slightly different speeds (e.g., arms stopping slightly after legs during a run).
Slow In and Slow Out
Animations start slowly, accelerate in the middle, and decelerate at the end to replicate natural motion and create a polished, professional experience.
Importance
- Adds fluidity and believability to actions, making them feel natural and intuitive.
- Prevents movements from feeling abrupt or unnatural.
Techniques
- Easing Curves: Use custom interpolation curves to define acceleration and deceleration which soften the experience and make animations less jarring.
- Extra Frames: Add more keyframes at the beginning and end of motions to make them feel gradual.
Arcs
Arcs describe the natural curved trajectory that most movements follow in real life, as opposed to straight linear motion. This applies to limbs, objects, and environmental animations.
Importance
- Adds fluidity and grace to animations.
- Prevents movements from looking robotic or mechanical.
- Ensures a more natural and believable animation style, enhancing immersion.
Techniques
- Motion Paths: Use motion paths or splines to define arcs for moving objects and characters.
- Graph Editors: Check animation curves in graph editors to ensure movements follow natural arcs.
- Physical References: Study real-life references or physics-based simulations for curved motion examples.
Secondary Action
Secondary actions are complementary motions or animations that support the main action, adding depth and complexity to the scene. These are not the primary focus but enrich the overall animation.
Importance
- Adds personality and realism to characters and objects.
- Prevents animations from feeling one-dimensional.
- Enhances the storytelling aspect of animations.
Techniques
- Layered Animation: Add subtle movements, such as facial expressions, hand gestures, or accessories moving independently of the main action.
- Balance Secondary and Primary: Ensure the secondary action enhances the main action without stealing focus.
- Subtle Timing: Use delayed or overlapping timing to create natural secondary movements.
Timing
Timing refers to the control of an action’s speed, rhythm, and duration. It determines how fast or slow an animation plays, impacting its weight and emotional impact.
Importance
- Helps convey weight and scale—lighter objects move faster, heavier ones slower.
- Influences the mood or intensity of the scene.
- Synchronizes animations with gameplay mechanics, ensuring responsive controls.
Techniques
- Adjust Frame Count: Use more frames for slow, deliberate actions and fewer frames for quick, energetic actions.
- Sync with Audio: Match animation timing to sound effects or music for added impact.
- Contrast Timing: Use varying speeds within a single animation to create emphasis (e.g., slow wind-up followed by a quick impact).
Exaggeration
Exaggeration involves amplifying motions, expressions, or effects beyond realistic levels to emphasize actions or emotions.
Importance
- Makes animations more dramatic, entertaining, or comedic.
- Helps players quickly understand actions or character intent.
- Reinforces a unique visual style, especially in fantasy or cartoon-themed games.
Techniques
- Push Poses: Overextend key poses to amplify the effect (e.g., stretching a character’s arm farther than natural during a punch).
- Distortion: Temporarily distort objects or characters to enhance the intensity of impacts or expressions.
- Stylized Physics: Bend the rules of physics (e.g., exaggerated squash/stretch or impossible trajectories) for dramatic effect.
Solid Drawing
Solid drawing emphasizes consistent proportions, perspective, and depth in animations, ensuring that characters and objects look polished and professional.
Importance
- Maintains the visual integrity of characters, especially during complex movements.
- Prevents inconsistencies or distortions that can break immersion.
- Adds depth and weight, making animations feel grounded.
Techniques
- Use Reference Models: Keep character proportions consistent by referring to a rig or template.
- Depth Checks: Test animations from multiple angles to ensure they retain their solid appearance in 3D space.
- Dynamic Posing: Avoid stiffness by adding dynamic, balanced poses with weight shifts.
Appeal
Appeal refers to creating characters and animations that are visually engaging, memorable, and emotionally impactful for players. It combines charm, clarity, and personality to connect with the audience.
Importance
- Helps players emotionally connect with characters and their stories.
- Creates a distinct identity for your game, making it stand out.
- Improves player retention by making animations enjoyable to watch.
Techniques
- Character Personality: Design movements that reflect the character’s traits (e.g., bouncy for energetic characters, slow and deliberate for villains).
- Simplify for Clarity: Avoid overloading characters with excessive detail, especially in mobile games with smaller screens.
- Player Testing: Gather feedback from test audiences to refine animations that resonate emotionally.
Challenges in Applying the Principles to Mobile Games
For a variety of reasons, there are some unique challenges that are encountered when incorporating the 12 principles of animation in mobile games, including:
- Hardware Limitations: Animations must be optimized for memory and battery efficiency without sacrificing quality.
- Small Screen Size: Clarity and simplicity are critical to ensure players can easily interpret animations.
- Development Constraints: Tight schedules and budgets may limit how extensively the principles can be applied.
- Balancing Quality and Performance: Complex animations may impact frame rates, especially on lower-end devices.
Mastering the 12 principles of animation is essential for creating great experiences in mobile games, as each principle contributes to movement that feels alive and purposeful. Applying these principles helps animations transcend functionality to become expressive elements that support gameplay, communicate intent, and enhance user enjoyment. They provide a framework for animators that, when used thoughtfully, can dramatically improve clarity, character appeal, and player engagement. Ultimately, great mobile game animation blends artistic finesse with technical efficiency, delivering motion that not only looks good but feels right.
About QDStaff
If you want to improve GGR, you need a recruiting partner with a scientific approach to game studio talent transformation. Good games aren’t luck. They are the result of great teams… and our clients prove it.
More at www.QDStaff.com
Follow QDStaff on LinkedIn for more insights on building award-winning game studios.
