(Approx. Lane: 1. Spine is a proprietary cross-platform package for creating two-dimensional skeletal animations with support for various gaming toolkits.
2. Carefully, there are about 38 MB of gif in the post, all of them are hidden under the cat.)

How to create a smooth switching or rotation of sprites?

Creating smooth and natural switching and turning sprites when working with Spine or any other animation interpolation tool is often a difficult task. It can ruin the order of animation and make the final result twitch or awkward.
')
I usually use the following approach: masking the moment of rotation or switching using deformations, for example, add the effect of elasticity to animation during keyframes (increasing and decreasing the sprite scale) when the asset is rotated or the sprite is switched.

For example, the picture below shows the initial state of the characters with their mouth closed (or no mouth at all) and the final state with an open mouth. We want to make a responsive animation of characters waiting for food when the player chooses them. But at the same time it is necessary to preserve their comical appearance and silly style.

1. Two sprite images: with the mouth closed and open. These are the key phases (key poses) of the animation.



2. Simple switching: at first I tried to use a simpler method: I switched sprites and added a follow-through effect, but the result was a bit sharp, and looked unrelated to the whole animation, despite the reaction of the eyes and hair to the general movement.

Then I decided to make the animations as smooth and soft as possible, adding elastic transitions to simulate the character's material and soften the sprites' switching stiffness.


3. Result: in the picture below, I added a little elastic effect between the sprites so that they look more flexible and natural.


4. Simple turn: when turning a character, it is easy to lose the repetitive smoothness and attractiveness of character animations. In the example below, the rotation is performed in a sharp way and without any transitions. At the same time, the individuality of the character and his comical appearance are lost.


5. Result: then I applied the same principle of elasticity, described above, making the turn more smooth and fun, in accordance with the general style of play.


6. Lubrication: Another good tip is to simulate the smear effect in Spine. It does not require the creation of a new sprite.

My character has to turn his head and give orders to his team, but for him several skins of other characters can be used to reuse the skeleton and bones. The player can create any combinations he needs (variations of helmets, skin color, equipment, etc.). If I began to create all possible combinations of heads for generating smudging, I would spend a lot of time and create a lot of optional images.

Therefore, I decided to perform Spine lubrication, deforming the main bone of the head when turning and adding additional details, such as the through movement of the helmet and nose.


This is a blur frame created only with the help of bone deformation.

Warp everything you can!

There are two aspects that I always adhere to in order to create a certain style and make objects fun: this is exaggeration and deformation. Often, to demonstrate the individuality of the character, the visual impact and the interest of the player, it is necessary to exaggerate movements as much as possible.

Sometimes exaggeration creates rather strange keyframes (keyframes), but they provide expressive animations. Below are examples of the final animations. Because of the use of these aspects, they look very dynamic.

7. Animations with deformation and exaggeration, pleasant to the player's eye, and attracting him to the character.


8. Look at these weird, but amazing keyframes!

Add movement!

Try to soften the linear animation effect to improve the final result and “revitalize” the objects.

One of the ways to achieve this, which, in my opinion, attracts attention is the creation of independent behaviors for individual parts of the character along with the main movement. At the same time, they must correspond to the main motion of the whole animation.

9. Try to breathe life into each element of the character. Add overlapping and through traffic.

One of the main elements of my character is a helmet, so I wanted it to look like an independent animation element.

• In the first example, I strove to move along with the movement of the head (back and forth), but still had a bit of a through movement.
• In the second example, the helmet follows the movements of the head (up and down), but it still has an independent turn.
• In the third example (my favorite), the helmet has a full and independent movement. The head moves back and forward, but the helmet moves with a slight oncoming movement in the direction opposite to the main movement. It looks like he is hanging on the head of a soldier.
• There is also a secondary action of the arms holding arms: despite the general movement of the run, the movement of the arms is slightly slower.

10. Another aspect that I always try to achieve is as non-linear appearance of objects as possible. When creating a character, I like to think about his movement, behavior, weight, personality, etc. This helps me plan the export and create its skeleton with the correct hierarchy of hinges and bones.

The character below is quite simple. It can be considered a simple figure with one or two bones. All its parts move together, and the animation takes about an hour. But this is a rather important character, he is the main star of the “game”, and I wanted to make him so interesting that the children wanted to take him home.

We have three examples of wait animations:

• Simple tween animation with multiple bones. Nothing fancy, it looks like ordinary waiting with breath.
  
  
  Hidden text

  
  
  
• Then I tried to make it more lively and effective.
  
  
  Hidden text

  

11. When creating waiting animations, I usually work with a circular motion, trying to take into account the shape of the character and making it less flat and more three-dimensional. There are several key elements to achieve this result, for example, imitation of turning the nose and eye movement up and down, opening the upper part of the head.

The nose is divided into two images: nose_back and nose_front.



Another example of wait animation. Here I used a lot of deformation and exaggeration, making the character funny and reckless. Everything moves independently (deformation of the cheeks, opening of the mouth, eyebrows with through movement, nose with a circular effect and stretching of the body).


Another example of the usual and lively animation in this character's jump animation.


On the left - the usual jump, just moving and deforming the main bone of the character. This animation is not very attractive, everything looks very sharp and flat.

The right animation is improved by adding many details: the character's face moves in slow motion along with the main movement, creating a sense of rotation when jumping up and down. An overlap and a blurring effect of the nose when jumping up and down and a general cross-cutting reaction when the character strikes the ground, giving it weight and noting its effect on the ground are applied.


This character needed a special function for the “endless” stretching of its body upward, but the game engine does not support meshes, and I needed a way to implement it. The character was divided into three parts: upper, middle and lower. The lower part is fixed, the middle is absolutely stretchable, and the upper part contains the common elements of the face.


Thank you for reading the article. Hope you enjoyed it! Write if you have any questions or just want to chat about 2D animations and Spine.