1. Sunderfolk
  2. News
  3. Sunderfolk Animation Style Guide

Sunderfolk Animation Style Guide

[p][/p][p]**Gremlin editor's note: This guide features prototype character models. Enjoy the blast from the past AND the learning![/p][p][/p]
SUNDERFOLK ANIMATION STYLE GUIDE
[p]Author: Alvin Geno
Updated 12/12/2022
[/p][p][/p][h2]What is the Sunderfolk Animation Style?[/h2][p]Our animation style is best described as designed reality. Design is used to describe the hand crafted choices to clarify the timing, posing and intent of the choices being made while animating.
[/p][h2]What is unique about our game?[/h2]
  1. [p]We need the poses to clearly show what our character's role is in the game. The character’s overall body language, type of weapon and combat  proficiency (How skilled they are), should be immediately readable from the game camera.[/p]
  2. [p]Our game is turn based  so we must always think about where the player's eye is looking. Use anticipations as a great way to draw the players eye to what's about to happen.[/p]
  3. [p]Our main game camera is fairly far from the characters. We should make sure that our pose changes are large and clear enough to read from far.[/p]
  4. [p]Our characters are fairly detailed so we should always design a focal point. Think of where you want the audience to look the most. Think about a primary, secondary and tertiary read. Always make sure the player does not miss the most important  part of the animation.[/p]
  5. [p]Our game does not rely on quick player control and response. We always know what player state our animation will be transitioning to and from. This means we can author transitions straight into our animation clips where necessary for Polish.[/p]
  6. [p]Our game has many characters. As more characters get animated, always compare new animation content to existing characters to make sure we are not repeating choices.[/p]
  7. [p]Although our characters should be specific. We should leave enough room for the player to  add their own creative input as to what/who/why our character is the way they are.[/p]
[p][/p][h2]Sunderfolk Animation Principles:[/h2]
  1. [p]Character Specificity[/p]
    1. [p]The character brief will always be your starting point. Always think about how this character would do the specific action. If the choice you make can be put on another character and it still works, you have made the wrong choice.[/p]
    2. [p]Below is an example of a character brief:[/p][p] [/p]
  2. [p]Strong shape design[/p]
    1. [p]We need to pay extra attention to the overall character posing and the shapes being created. This helps make sure we clearly understand what we are looking at from the game camera
      1. Clear line of action. This should inform us where the character is coming from and where the character is going.
      2. Clear directionality of weapon. We need to define a clear sense of where the character is looking and what they intend to do.[/p]
    2. [p]Make sure to define a very Clear silhouette from all game camera angles.
      [/p]
    3. [p]When designing a pose make sure to break up angles of the body so they do not perfectly align with any axis.
      [/p]
    4. [p]We must be intentional with character balance. The character weight should feel intentionally distributed. This means they are balanced when they are supposed to be balanced and off balance when intentionally designed to show direction of movement. See Green Lines below
      [/p]
    5. [p]We need to Incorporate tilting, Overall rhythm and twist throughout our pose design to keep it dynamic.
      [/p]
    6. [p]Each character should be easily associated with a general overall shape. Try and keep this in mind as you define the different poses.
      Big Hero 6 (2014) Image property of Disney[/p]
    7. [p]We should also think very carefully about the transitional poses between our main core poses. What is commonly referred to as breakdowns or inbetweens. Wherever possible think of simplifying into basic geometric shapes.[/p]
      1. [p]Example from God Of War (2018) Property of Sony Santa Monica Studios. Nice simple and clear overall shapes that communicate direction. They also communicate an overall sense of force through the squashing and stretching of the overall shape.
        Strong and clear poses make it easy to understand the action despite the character having an overall complex silhouette.
        [/p]
  3. [p]Appeal[/p]
    1. [p]Appeal is referring to making choices that when combined make our animation desirable to experience.
      Ask yourself  the following[/p]
      1. [p]Do users want to look at this?[/p]
      2. [p]Does this feel satisfying and impactful?[/p]
    2. [p]Appeal should be considered both at a single pose basis, and also across frames during the animation. The overall performance should bring delight.
      Example:
      Norman Rockwell’s Proud Professor (1940)[/p]
      1. [p]Norman Rockwell often made many intentional choices to allow his art to bring the most delight to his audience.[/p]
  4. [p]Clarified timing[/p]
    1. [p]In our Game the timing should be caricatured to support the intent of the character. Make things faster to clarify expertise. Make things slower to suggest stability and/or carefulness.
      Remember, the timing will be specific to each character.
      Some characters are heavy so always ask yourself: How can we use timing to emphasize how heavy they are?[/p]
    2. [p]Contrast:
      Make sure to place moments of stillness close to moments of fast motion to better contrast and exaggerate each other.
      [/p]
    3. [p]Texture:
      Make sure to vary the rhythm and cadence of the animation phrases to keep the animation  interesting.
      [/p][p]A phrase is a clear movement that supports a single smaller idea within a bigger movement sequence. E.g[/p]
      1. [p]For the Bigger Movement Sequence of Firing an Arrow, the phrases would be:[/p]
        1. [p]The Anticipation of pulling the bow string[/p]
        2. [p]The Action of Releasing the string and Firing the Arrow[/p]
        3. [p]The Settle back into the Ready/Idle pose.
          [/p]
  5. [p]Physical believability[/p]
    1. [p]Physical believability is not to be confused with Realism. We should reference reality to inform our choices but caricature and design our animation to deliver the feeling we want the user to take away. [/p]
      1. [p]Take an example. In the Attack_SingleArrow animation for the Ranger. We do not animate the Ranger removing the arrow from the quill on the Rangers back in a physically correct manner.
        In fact, We add just enough poses to communicate that the Ranger is reloading but focus on the smoothness of the timing. The goal here is to allow the Ranger to look comfortable and efficient with this motion. Emphasizing the fact that the Ranger has done this countless amount of times.
        In full speed it is physically believable
        [/p]
      2. [p]Also note. In the example above the Ranger shifts weight forward onto the ranger's left foot before being able to lift up the Ranger’s rear foot. This motion is rooted in real physics. Please refer to real life for inspiration when animating our characters.[/p]
  6. [p]Fluidity and Readability[/p]
    1. [p]Fluidity is all about how our poses change from one frame to another. We should always consider the following
      [/p][p]
      FLUID EXAMPLE
      [/p]
      1. [p]Does the next pose clearly flow out of the previous pose?[/p]
      2. [p]Does the pose clearly communicate what the character is doing?[/p]
      3. [p]Is this the Hero pose? If so, what can I do to make sure the audience sees this hero pose clearly?[/p]
      4. [p]How is the overall shape of each of the main body parts flowing from one frame to another? Is the spacing too much?[/p]
      5. [p]What are my focal points and how do I contrast them from other movements to direct the eye of the viewer?
        Please note how the draw-overs on the FLUID EXAMPLE on the right really exaggerate the amount of squash and stretch. This helps with readability from the game camera
        [/p]
    2. [p]Fluidity is also expressed in how the various animation clips flow into each other. [/p][p][/p][p]Metroid Dread (2021) Property of Nintendo Entertainment[/p][p]So we should take extra care to make sure to maintain momentum across animation clips. E.g.[/p]
      1. [p]Idle → Walk[/p]
      2. [p]Walk → Ready[/p]
      3. [p]Attack → Ready[/p]
      4. [p]… and more[/p]
    3. [p]Designed Transitional Shapes are very important. Wherever possible think of designed shapes that flow in and out of each other. Always preserve the overall volume of the character. Think about squash and stretch as an animation principle. Exaggerate the squash and stretch to be readable from the game camera[/p]
  7. [p]Fun[/p]
    1. [p]Have fun with the animation. Take all the previous principles. Mix, match and experiment within those expectations. Allow the character description to inspire you to surprise the audience with a unique animation choice. We have characters based on real world animals. Let their unique anatomy and movement inform your choices. [/p][p]Moss Book 2 (2022) Above Animation by Laura Ivy Lico. Property of PolyArc. Included for reference purposes only.[/p][p] [/p]
    2. [p]Reference from other animals can inspire fun ways to accomplish animation. Image above could be used to inspire a fun death animation. Courtesy of @viralhog on youtube. [/p]
    3. [p]Remember to be inspired by other well timed and textured animation [/p]
    4. [p]Video Courtesy of Pixar Animation Studios. Piper (2016)[/p]
[p][/p]
Sunderfolk Animation Process:
[p]Game Camera should be prioritized. In fact, We expect to review the animation from all views in the provided Game Camera Rig.[/p][h2] 1. Pose Exploration[/h2][p]Image courtesy of Alvin Geno. Warcraft Arclight Rumble (2022)[/p][p][/p][p]Image courtesy of Steve Hendershot. Undisputed Street Fighter: A 30th Anniversary Retrospective[/p][p]
At the beginning of every new character exploration is pose exploration. It's the most important part of the process.[/p][p]
The goal here is to quickly iterate and experiment with poses to learn what works and what doesn’t work for our character.[/p][p]
The quick iteration allows us to quickly get feedback and see what this looks like.
Please note: This is also a good time to show video reference. However, the video reference will not be used as ground truth because we will only commit to ideas that have been illustrated on the character rig. [/p]
  1. [p]Most important thing is the character brief. Refer to it often to inform the choices you make with the character.[/p][p]Though there is no limit to what kind of poses an animator can explore. It’s important for the animator to experiment with poses that will inform the animation clips we intend to create.
    In this case… Idles, Attacks, Walks, Fidgets, knockdowns…e.t.c.[/p]
    1. [p]At this stage it is important to gather as much reference as possible to make your choices as specific as possible.[/p]
  2. [p]All the pose explorations should be in a single Maya file.[/p]
[h2]
2. Animation Blockout[/h2][p]The goal here is to build upon the feedback from the pose exploration phase to clearly describe what the animation will look like in the most efficient way possible.[/p][p]
We expect a clear breakdown of the following[/p][p][/p]
  1. [p]Step 1: Core Poses Core Poses are the images we want the player to remember the most from the animation clip. These should really capture the personality of the character. They should build upon the strong shape design principle. [/p][p]Examples: Ranger_Base_Attack_SingleArrow (4 poses) Ranger_Base_DamageFront (4 poses) Ranger_Base_Attack_ArrowBarrage (4 poses)
    [/p][p]
    ~End of Core Pose examples~[/p]
  2. [p]Step 2: Transition Poses
    These clearly describe how we get in and out of the core poses. These poses will help describe the physical believability of the character.
    Timing Should be clearly defined. We want to get as much of a sense of the intended impact as clearly as possible.

    Examples:
    Ranger_Base_Attack_SingleArrow(8 Poses)
    Ranger_Base_DamageFront (8 Poses)
    Ranger_Base_Attack_ArrowBarrage (7 Poses)
    ~End of Transition Pose examples~

  3. *Special Exception**
    Please note that for the Walk Cycle Blocking pass, the legs should have enough poses and/or be splined enough for us to test without foot sliding in engine. See example below ~End of
  4. *Special exception**~[/p]
[p][/p][p]At the end of the Animation Blockout stage. Submit the animation for review!![/p][p][/p][h2]3. Animation Refinement[/h2][p]At this stage there should be no surprises. All the ideas were locked down in the previous pass. This stage is making sure the animation is smooth and the intent from the Core Animation Blockout is not lost. After this pass the animation should be shippable.

Examples:
Ranger_Base_Attack_SingleArrow
Ranger_Base_ReadyLoop
Ranger_Base_WalkLoop
[/p][h2]4. Animation Polish[/h2]
  1. [p]This is the last 10% of the animation to take it from good to great. This is not necessary upfront but afforded to us if we run the production schedule well.[/p]
  2. [p]The following should be done in this stage[/p]
    1. [p]Animate all the extra accessories for the character[/p]
    2. [p]Track (and polish up) the arcs of all the major focal points of the body.
      Areas to track for intentional arcs/lack of arcs:[/p]
      1. [p]Hips[/p]
      2. [p]Chest[/p]
      3. [p]Base of neck[/p]
      4. [p]Head[/p]
      5. [p]Nose[/p]
      6. [p]Shoulders[/p]
      7. [p]Elbows[/p]
      8. [p]Wrists[/p]
      9. [p]Knees[/p]
      10. [p]Feet[/p]
      11. [p]Weapon extreme points. E.g. the end of an arrow, hammer, bow, e.t.c.[/p]
[p]~END~[/p]