Hello again. After my last blog about face emoji animation about creating a happy/laugh emoji, I am back with some additional face emojis for us to animate. So, let us dive into it without further ado.
Today we are going to do an emoji which is "Cry". We will go through a step-wise animation process where we discuss properly setting up the images and GameObject hierarchy in the Unity editor for those animations.
Step 1: Setup
First, let's import and set up the sprite atlas of the cry and angry emoji as we had seen in my previous blog.
Okay, now, we have our sprite, which is further sliced into multiple images like in my previous blog.
Accordingly, let's create a hierarchy and put the "head", "eyes", "eyebrows", and "mouth" of our emoji in place.
Since we have set up the image for animation. Now let's dig into the animating phase.
Step 2: Animation, Phase 1
When we think about someone's crying face, the central feature is the tears. How can we say that someone is crying if there are no tears? So, let's first animate the tears falling down from the eyes.
For the falling of tears, we have a little water effect which we can see in our hierarchy. The water effect is the highlight of our emoji's tears. For a more realistic look, we will move it down while scaling it more on the Y-axis.
Step 3: Animation, Phase 2
Now that the tears are in place, we can focus on other aspects of facial expressions when people cry.
Other crucial details that we need to consider are the eyes and eyebrows. As people cry, their eyebrow constantly moves up and down according to their breathing and their eyes clench and open from time to time. Let's incorporate that into our animation and see what changes.
Step 4: Animation, Phase 3
We can see that the emoji is crying very well, and it looks far better than in the first phase. But, we are missing an important part of our emoji face, i.e. the mouth of our emoji.
While crying, people also often open/close their mouths. The opening/closing of the mouth while crying gives an effect of more "sad crying". So, let us see how our emoji looks after incorporating the opening/closing of the mouth inside our emoji animation.
We can see the difference between this crying emoji's last and current phase. The mouth opening and closing give a subtle effect of realistic animation.
Keep in mind that I have opened the mouth more when the eyebrows are coming down and closed the mouth a little when the eyebrows move up. Animating the animation elements in relation to each other gives a more realistic or visually pleasing appeal to our animation.
Step 5: Animation, Phase 4
This phase deals with the overall content of the emoji, i.e. the face. In the case of our emoji, I have created a parent object of all components of the emoji's head except for the "head" image.
I have arranged it in such a way because while animating faces, sometimes we need to move the overall parts of faces together to create a better facial expression. So, making a GameObject as a parent (in our case, "Face" GameObject in our hierarchy) can achieve that purpose in Unity.
Let's move the face slightly up and down and see how it affects our emoji animation.
The face movement is also relative to the up and down of the eyebrow, giving better visual impact to our animation.
Done!
Okay, this is the final animation for our crying emoji. We can see the drastic change it underwent from the first to the last phase of our animation.
In fact, you can stop at any phase and say that you have a simple crying emoji animation. But, curiosity and creativity have no limits, and so is the need to go further into making the animation better.
We can go further and change the eye image or make a horizontal face shake, stop the tear flow, and then continue the falling tears and many other details. This can make our animation more and more beautiful.
I hope that I also get to see how your emoji animation goes. Leave a comment and feel free to ask any questions.