The fundamentals of modern 2D Animation Theory using Unity Tools

Change happens, but we can still use classic animation principles with modern 2D games; we break down incorporating the 12 classic principles of animation with Unity Tools — from setup to finished animation. We show you an example of animations from Rush Royale.

The essence of animation, in brief, is the creation of some recognizable poses which move from one to another according to certain timings. That’s a simple enough definition, but in animation, there are still many nuances that need to be taken into account. Often, it’s these nuances that determine just how believable the final movement is.

Hi there! My name is Svetlana Khlystova, and I’m an animator at MY.GAMES. In this article, I’ll explain how the classic 12 principles of animation are used in modern 2D games. We’ll also talk about how to work with these principles using Unity tools.

Preparing for animation creation with Unity Tools

In Unity, 2D Animation is essentially cutout animation. This is a classic animation technique where individual pieces of a character are drawn on paper, cut into pieces, and moved in front of the camera. In the realm of computer animation, this technique has also found a home, speeding up and simplifying the animator’s work compared to hand-drawn animation.

With cutout animation, Unity uses frame-by-frame and pseudo 3D animation — these approaches are the same as cutout animation in any software. However, using cutout animation imposes a number of restrictions on us, because we have a frozen image of a character/object. So, to make the animation look more alive, it is better to divide large objects into smaller individual elements, and the cutting is performed in a more detailed way.

The 2D animation tools in Unity are simple. Let’s look at them: movement, rotation, scaling, visibility, and the alpha channel (sprite transparency parameter). In Unity, you can also add interesting movements using the 3D rotate tool:

But before you start creating an animation, you need to go through the setup and rigging stages. As with classical cutout animation, we can work only with direct kinematics. In Unity, we don’t build skeletons for inverse kinematics, we use groups of elements — hierarchies that replace bone chains, like in Spine, or symbol nesting, as seen in Adobe Animate.

Within hierarchies, elements are logically connected at pivot points, and you can divide a skeleton into groups: head, left hand, right hand, and so on, and then animate them sequentially.

You need to fix the points of rotation for all the elements at the rotation and connection points, observing the physics of the body, without breaking the silhouette and pattern.

The pivot point is set either by a number in Pivot, by the Rect Tool, or through the Sprite Editor.

Turn the display mode of Pivot to the active position.

The main parent object traditionally follows from the pelvis (or from some other suitable common element). For each group of elements, for example, the tail, the parent object is different. The options for building a skeleton, the presence of limbs, and the number of descending chains will depend on the particular animation tasks.

Next, you need to deal with sorting the element positions. The principle of element sorting is inspired by the real world and the anatomy of the human body; for instance, for a humanoid character standing half-turned to the viewer, the sorting of the limbs and elements will correspond to how this figure usually occurs (with a calmly standing humanoid). Specifically, in our case, the principle of limb sorting is based on a person who is turned to the observer at 75% angle.

Sometimes, we may need additional chains of elements during the animation process. In Unity, you can easily create group duplicates and transfer animation keys to new objects. If you need to change the parent object in the hierarchy when the animation is ready, you can rewrite the links to the sprites and transfer the keys.

You need to verify that the hierarchy setup, nesting, and the pivot points make sense before starting the animation — poorly configured elements can make the animation process very difficult.

After the setup is complete, we can move on to the animation itself.

The fundamentals of 2D animation

Movements have two main characteristics: timing, and spacing or posture. These complement each other, and are the basis of animation.

Timing is the most important animation parameter, and the number of frames used for poses is the key to an animation’s attractiveness. The timing calculation shows us how many frames we need to move the object from one pose to the next. Properly configured timing will allow even an inanimate object (that doesn’t have facial expressions, facial features, or body parts) to convey a recognizable nature and mood of an action.

Pose (also called extreme pose in classical animation) is a key component in movement, which follows the principles of animation. The position of the skeleton elements in space forms a pose. Sometimes the nature of the action depends on one or two additional poses.

There are well-established timing schemes (proportions) for certain animations — movement schemes, recognizable poses, characteristic movement sequences of arms, legs, and other parts.

Moving on, the 12 principles of animation have evolved with the development of animation and should be effectively applied for each task. Let’s go through them one by one.

1. Squash and Stretch

Cutout animation is quite “stiff”, so to add plasticity to the movement, you’ll need to use squashing and stretching effects.

This is great when you want to make the impact visually stronger — just add some deformation at the moment of contact with the target. During jumps and landings, you can add inertia from hitting a surface and this will make the animation livelier and more believable.

Crucially, when working with these effects, you should adhere to the following rule: stretching must be done in the direction of movement, and along one axis.

For example, to demonstrate continued movement, you need to use stretching in dynamic statics. For breathing animations, stretching should affect the chest and body, while for walking animations, it should affect the entire character.

At the same time, it’s important to observe the proportion of the total mass: despite the deformation, the mass remains unchanged, so if it’s stretched vertically, it should decrease horizontally.

A note: sometimes a sprite may not stretch along the axis. In this case, it makes sense to adjust the sprite in the setup.

2. Anticipation

Anticipation should be used wherever possible: when shooting, attacking, before a striking gesture and action, and so on. In these critical animations, anticipation is a mandatory quality, as it makes the main movement more vivid, creates emphasis and inertial movement, and shows strength.

Anticipatory movements are always performed in the opposite direction as the main one.

The amplitude and axes that we animate should be based on the drawing, and they should emphasize the attractiveness of the animation, while also working in favor of the silhouette as much as possible.

The animation scheme during the moment of anticipation can look different: before moving forward, your object must first move back, before increasing, it must first shrink a bit, and so on. In other words, you need to use not only movement, but also rotation and scaling. Additionally, if possible, the entire body should be included in the anticipation sequence.

When creating an attack animation, bring your weapon to its extreme point — this will allow you to enhance the animation with dynamic static. The key poses for the recoil animation of a strike or shot can be single (for example, forward-backward) or with double repetition (forward-backward-forward) — but always in opposite values, with added fading.

3. Staging

In Unity, we can change the angle and rotate the characters at different stages of animation — during the moment of anticipation, in dynamic static states, as continuous movement.

With 2D animation, movement is usually built based on silhouettes. So, try to choose poses that are recognizable by their silhouettes and that are characteristic of this particular animation. At the same time, avoid unnecessary details and distracting movements.

4. Pose to pose or straight ahead action

In a frame-by-frame animation, the changes made to one extreme pose will cause a redrawing of the inbetweens. Unlike frame-by-frame animation, in Unity we can edit and change any part of an animation.

There are several ways to work with 2D cutout animation in Unity: blocking, group animation, curve animation, and we can mix these methods with each other.

Working with pure blocking is not for everyone, but if so, we can use the following method: build a pose, fix the key poses, move it further along the timing, and change it. If you need a similar pose, you can also find a place in the animation, detect the keys, for example, let’s say the character moves slightly.

In most cases, it’s more convenient to make a draft animation, that is, to animate the main thing, the pelvis/body. In the draft, check the timing and poses, add the head and limbs to the animation, and make sure the key points reflect the script.

We start the movement from the main element.

Often this is the pelvis-body-head group or the main bone of the object. After the general movement, you can further define the timing between poses, plan and arrange anticipations, overlaps, dynamic statics, without dealing with small details and secondary objects.

You can make an animation of separate groups and check the timing and the overall concept of the movement, for example, a blinking eye or a moving hand.

In terms of timing, you can plan follow through motions and overlaps for secondary elements, and add some accent to them for dynamic statics.

Once you’ve planned the movement of the general mass, and started work on anticipation and recoil, you can work further on the timing by speeding up and slowing down individual parts.

Animation rhythm is established via the transition from abrupt to smooth movements, as well as through the arrangement of pauses.

Next you can start working with secondary elements — this is the easiest and most enjoyable part of the process. The secondary details follow the primary ones by means of overlapping and follow-through actions. For example, the head follows the body, and any headwear or hair aligns with the head.

Working with secondary details is very simple: we animate chains of these elements in separate hierarchies. At the initial stage, we animate the movement of the parent object, and this follows the head. Then, we go through the internal hierarchy chains — we set the keys on one cycle, then spread this cycle movement across the entire range of body movement. You may need to diversify the cycles: use squashing in some places, in other places stretching, and then make a shift.

Animating in cycles in Unity is suitable for idle and cycle movements, the overlapping of tails, and so on. It’s convenient to apply the curves in cycles to the body-head-hands to create breathing animations, and then shift them relative to each other.

Working with cycles in Unity is not as convenient as in Spine. Therefore, we have to adhere to the following procedure:

• We create a beautiful symmetrical cycle, play it in the animation, and find the lag in the needed direction.

• Shift by the required number of frames — ½ period, ¼, ⅕, etc.

• Fix the key at the end of our cycle; the value of the parameter will be calculated automatically, and then we transfer the key to the beginning of the cycle.

• Transfer the key to the beginning of the cycle.

• By default, we will get a curve slowing down on the keys in the middle of the movement; but we can’t leave it like this, because this speed irregularity will be noticeable in the animation:

• Set the keys at the edges of the cycle to Both — Linear:

• As a result, we should get a nice curve with a shift:

5. Follow through and overlapping Action

To make the movement of the character look good, follow this rule: different elements move at different speeds, and inertia and rhythm and they don’t stop at the same time.

The elements that make up a character should overlap and follow through, and lag behind others; this lag occurs relative to the main mass. Moreover, the farther from the parent object, the bigger the lag.

In practice, this means that we need to shift the keys and curves, shifting the movement of different elements relative to each other. Free elements will have a different amplitude compared to those that are controlled.

If a detail consists of a chain of elements, then there must be a delay from the parent object to the end of the chain, with the selected range of the shift, for example, half a period, a quarter, or 1/5 of a quarter of the keys. The direction of the shift of the keys must be selected based on the movement, and keep in mind that the secondary objects should move after the main one.

• Overlapping action can be used for hair, tails, ears, long fabrics and anything that is hanging. These elements continue to move by inertia when the rest of the body has already stopped.
• The entire body doesn’t move at once — the movement starts from the pelvis, involving other elements along the chain. Therefore, the pelvis-body-head chain will move in an overlap, and the head needs a follow through action.
• During the follow through action at the end of the animation, individual items of clothing don’t stop moving at the same time.
• In dynamic statics, to fix an action or gesture, the elements that are overlapping and following through, can continue to move.

6. Slow in and slow out

Slow in and slow out can be done using properly spaced poses (spacing) at the beginning and end of the animation. Remember also that the elements should begin to move gradually — they don’t move all at once. This can then be emphasized by adjusting the curves to easy in easy out. It’s important not to overdo the curves on the keys in the middle of the movement, as this will give shaky and messy movement on a single trajectory.

Sometimes you want to completely remove the slowing in at the beginning as this will allow you to display the response of the animation. In this case, you can focus on the slow out — focusing on the position of the body, hands, head, clothes and overlapping secondary elements.

At the beginning of the animation, you can use overlaps on the body: the head, arms and weapons overlapping and following through. And then, we also return with an overlap through a fading movement: the body, hands, secondary elements.

7. Arcs

Try to add curved trajectories to the movement. You don’t need a special tool for this or a manually editable trajectory because in Unity you can edit the movement along a separate axis, for example, by shifting the X-axis keys relative to the Y-axis keys. You can also use spacing.

Some elements will move naturally in arcs (such as the head, arms). In addition to moving the head, we can also rotate it, so the top of the head will move along an arc, and the secondary details located on the head will create additional arcs.

1. The slower the movement, the smoother and more rounded the trajectory should be.
2. The sharper the movement and the shorter the timing, the sharper and straighter the trajectory should be.

Editing a curve to create a curved trajectory is more suitable for objects than for characters. For complex objects, you can set the trajectory with poses and add turns to the movement. On some segments of the animation for the main objects of movement, it’s better to exaggerate the movement, building a beautiful trajectory.

8. Secondary Action

When planning animations for the details, start from the drawing of the character or object. In the design of the character, you can always find an additional element or detail that can make the animation livelier, enrich the static picture, and add small accents.

Most often, the animation of a secondary action and elements is used in an idle pose, in an action idle, or in dynamic statics. In general, the animation of a secondary action should support the overall animation, not contradict it.

As an example: dumplings falling out, one after another and clicking with chopsticks.

9. Timing

Timing is the most important part of animation. Even if we’re animating an inanimate object that doesn’t have a face or limbs, timing can convey the nature of the animation, make a gesture recognizable, or show emotions. Timing conveys the weight of a character or an object, material, force of action, and it mimics the natural laws of physics and inertia.

Timing is inextricably linked to movement. The distance traveled per unit of time determines the speed. Speed conveys a sense of weight, strength and character of movement.

Distance/time = speed

You can control the speed, not only through timing (the number of frames), but also through the distance that it covers (spacing).

Moving an object for 1000 pixels a second will be slower than moving it for 1000 pixels in 0.5 seconds. Moving it for 500 pixels a second is even a slower motion; graph editors of different animation software can demonstrate this.

Two objects that are the same size and shape can be made different in weight by changing the timing and poses to show inertia (spacing). Adhere to the following rule: heavy objects gain speed more slowly, are less subject to inertial deformation, and experience gravity more strongly. Light objects are the opposite; the inertia will depend on the material of the object and the weight.

Pauses are important for animation; they form a rhythm, and pauses are implemented with the help of dynamic statics with animation of secondary details, gaze shifting.

10. Exaggeration

Animation is always based on the real laws of physics, that is, on real motion and inertia. But, at the same time, in animation, the laws of physics can be exaggerated, emphasized and supplemented; overlaps, anticipations, follow through moving along ideal trajectories.

Downplay or exaggerate the force of gravity.

For example, we can exaggerate the recoil of a shot to illustrate this movement in a more vivid way, showing the weapon’s weight and the damage output. And when a ball bounces, you can reduce the force of gravity by making the ball linger at the top point.

11. Solid posing

Poses should be simple, understandable and dynamic. They shouldn’t break the structure of the body and the silhouette of the object; they should support the mechanics of the body. Postures should reflect the point of balance, the center of mass, and work on a chain of elements from the body to the fingers.

12. Appeal

Animations should be attractive and pleasant. To make animations appealing, we can use the following techniques.

• Reflect the physical laws of motion, inertia, and demonstrate the weight of the object, based on the visual aspect and its nature; it should be obvious what kind of movement, what kind of gesture or emotion we’re trying to convey.
• The duration of an animation should be enough for the player to understand what’s happening.
• An ease of visual perception comes from clear and understandable poses. Work on the silhouette.
• Add variety in element movement. Really big pieces should be divided into logical groups, and separate timings should be created for them in hierarchies. Try to figure out what can move with a different speed, rhythm, inertia.
• Ensure the presence of anticipation, follow through action, overlap, emphasis on action and statics in the necessary parts.
• Use uneven timing and rhythm for changing positions.
• Remember, movement comes from the form, so maintain the form.
• Incorporate the delay of secondary elements, the small parts.
• Remember also, an animation shouldn’t contain illogical twitches, jerks, unnecessary movements, or interruptions of a trajectory that is not to be interrupted.

And that’s the 12 classical principles as applied to modern 2D animation with Unity Tools. Perhaps some principles can change and adapt with time, but an animator can still create vivid movements based on classical principles: regardless of the software we use for animation, the tools we have at our disposal, animation still works based on the same essential principles.