Animating guide by Jespone
Not many people spend time on animations for their games, well, let me tell you that they are more important than what you think. A good game shouldn’t miss having animations, if you want to do a game with a story you would need some animations that define the principal character. Or just doing default animations like an idle, a walk, jump, etc.
In this post, I will cover some stuff about Animating in Roblox, but first, let me introduce myself.
I’m Jespone and I’ve been on Roblox for more than 2 years, I started animating a year and half a year ago. From that point, I’ve learned many things from every developer I have been working with. At this post, I want to do a guide of what I’ve learned.
Once you read this post you should be able to:
- See if an animation is well done.
- Know how to improve your animations.
- Know how to bring the basics to Roblox.
- Know what you can do to improve.
Before we start
If you have never animated, or don’t know what plugins to use I will recommend you some:
- Roblox’ default animator. - This one is good to start with.
- Old Roblox’ animator. - Personally, the best one to start animating.
- Blender. (Importer/Exporter by @Den_S ) - You should get to know easing styles really well to use it.
- Moon Animator. (Plugin by @xsixx ) - The one I use and personally my favorite one.
Attention
From this point on, you should know how to do basic animation, with this I mean you should be able to do a simple animation like a character waving, so if it’s your first try you should play around with the animator you want.
I will talk about:
- The 12 Principles Of Animation
- Easing Styles & Directions
- Personal tips
- My experience animating at Roblox Studio I will talk about:
The 12 Principles Of Animation
Now read and learn every single word about these 12 principles, Disney is who made them. So you should listen to the masters of animation.
Squash & Stretch
You don’t want your animation to be solid, rigid and boring right? You want to give it that sparkle of life that makes it natural, then don’t forget this principle. In your environment and everywhere there’s Squash & Stretch, for example, when a character has a face.
Now, let me show you in Roblox.
As you can see, in this quick animation I did it squashes the whole body to then jump and stretch.
Anticipation
Before doing any action you have to let the player know that they are going to do something. You can’t just throw a punch without anticipation, you have to first anticipate the movement to then gain enough strength to do that move.
In the jump animation I just showed you, you can see that when it squashes it anticipates that the character is going to jump, and when the character gets on the floor it anticipates that it’s going to get up.
Staging
This applies more to 2D animation but it kind of can get to 3D animation.
So, you want the player to look at a point, then, you can do it with an animation, for example, a door that opens, when a boss is going to attack, and more.
Not really have more to talk about this principle.
Straight ahead & Pose to Pose
Once you start your animation you have to do the “essential” poses and then do the poses that will lead from one to another one doing the movement you want them to do. Let me do a video so you can clearly see:
First, you should move the character to the “goals” before telling the character how to do it.
Once you have told your character the goals, you have to tell the character how to get to them, for example, you want more anticipation, you want to exaggerate it more, you want it to do a summersault while doing it, or you want that moment to move slower…
Follow through and overlapping
Let me put you in situation… You are Batman. You go running to a place and you suddenly stop, your body has stopped… but what about the cape? the cape, before it has completely stopped, it will have to do its way to it, the cape is still going down until it really stops.
Let me do some examples on how can you use it, I will take some videos from AlanBeckerTutorials:
As you can see, this principle is about making the things moving flowy, if it weren’t like this, everything would be rigid like a rock.
Now, how can we really use this in Roblox?
That’s it! You can use it literally in any part of the body you want, I usually use this principle on every single part but not on the root. Remember to don’t make it too flowy or it will be way too much for a rig unless you want something really really cartoony which sometimes is really nice to see.
Now, let’s go back to Squash & Stretch’s video and look at how the head moves. If you understand this principle you will get it.
Slow In & Slow Out
It is proved that movements that go from easing direction “in” to “out” make the animation more natural, you can do this with a feature that all animators have or with another tip that I will talk you about later. If you ignore this principle then the animation will look like a robot did it so instead of giving life to whatever you are animating you are just giving an order to it. For now, here you have some examples:
As you can see it starts slowly, then gains more velocity and then loses velocity at the end.
What you see there it’s an easing direction, we will talk about that later.
Arcs
If the movement of your character makes arcs, you are doing it well. Otherwise, you are probably making a robot.
Let me explain this with another example:
It is proven that living beings’ movement is made of arcs. After doing an animation check that it is doing arcs while it is moving.
Secondary Action
It’s basically an action that supports the main action. Let’s say that your character is thinking, the main action would be in the head, right? Then why don’t you add a hand touching it’s chin while doing that?
As you can see, the character is lifting a box, but it looks like the character really goes for it but it looks boring… I mean, the character is only lifting a box. Now, how can we improve it? Let’s add a secondary action!
Now that the character rubs his hands together we have more things to watch, it has more life and personality now. Also, it has anticipation now, which was the second principle.
Timing
So, if in 2D animation this principle says that: Fewer frames, more speed. More frames, less speed. This principle applies too for 3D animation, the timing it’s defined by how far the keyframes are.
Exaggeration
This is my favorite principle! It’s about exaggerating the poses on your animation. This makes games fun since without exaggeration games would be boring. Let me do an example:
You want to express that the pan is really going to hurt the other character and that the character with the pan is putting a lot of strength on the action.
Roblox example of exaggeration:
As you can see, in real life you couldn’t jump that high, you couldn’t do this, this animation is exaggerated and that’s what makes it even better, the feeling that you can do extraordinary moves.
Solid Drawing
In 2D animation, it would be about drawing characters with 3D shapes to make them more natural, but in 3D animating you only have to worry about one thing…
ATTENTION THIS PLEASE, MOSTLY BEGINNERS.
Evade doing twinning, please.
Unless you are doing a robot.
Now, what’s twinning? Lemme do a quick animation and show you:
Do you see this?
That’s twinning: putting keyframes in a straight line without inbetweens (Passing keyframes). A tip for this is to do the important poses and then between them more things. Try to variate them, don’t make everything move at the same time, let me show you an example of an animation that doesn’t have twinning:
You can say “But there are straight lines of keyframes” but look well and you will see that it has a variety of keyframes, different easing styles, most of them aren’t positioned in straight lines only the main poses and then secondary actions and more compliments to the animation.
Appeal
Again, in 2D animations, it’s how to draw a character, but we are here for Roblox, for 3D animation. So, how can we apply this principle to Roblox? When talking about 3D animation it’s way different:
Let me do an example, your character is really brave and has a lot of confidence. Then make an idle of the character where the character’s torso stands out, and make the head look straight to the objective.
This principle is to animate the characters the way you want the character to be. This principle wouldn’t apply for most of the games on Roblox since there isn’t a story that lets you see how the character is.
With this, we end the principles of animations! I hope you get to understand them all and now know how to apply them all to Roblox.
Easing Styles & Directions
There are different easing styles and different easing directions, it’s basically when the animation will have more frames/will go faster or slower, since I don’t really know how to explain this, let me put some videos:
As you can see, they all get to the goal at the same time, but some of them start faster, other ones start slowly. In the first video, it shows a ball that lets you see how the graph works, more inclination in less time means more frames in less time. The inclination defines how fast/slow at some points will the part move from pose to pose. Each easing style has a name as you can see, but there are only 4 easing directions: In, Out, InOut, OutIn.
Now, what’s the easing direction? Let me explain.
For this, we will take a Sine easing style.
You can use this website: Ease Visualizer - Blog - GreenSock
“In” direction
Do you see the graph? As you can see the animation starts slow and then gets faster since there’s more inclination at the center and at the end of the graphic. That means that the animation goes faster at that points.
“Out” direction
Now, it starts fast and then gets slower since there’s more inclination at the start.
“InOut” direction
Now it starts slow, then gets faster, then gets slow again. This means that there’s more inclination at the center of the graph.
Every single animator lets you change of easing styles and directions. Blender even has its own graph to edit them, the only thing is that you have to graph X, Y, and Z separately of every single part. Moon Animator has variety and many easing styles that can help you. And Roblox animators have the basic easing styles and directions.
Now it’s up to you on how to do this. Sometimes, when I don’t like any easing style between two poses, I do my own easing styles, by doing the same taking some poses between the main poses and posing them in the way that at some point it goes faster than another point but it gets to the same position as before.
Personal Tips
- More linear
Linear keyframes are more powerful than how you think, but of course, easing styles are ALWAYS needed. Don’t do a full animation of linear keyframes if you haven’t mastered easing styles first. What I want to talk about is that you can even do “custom easing styles” with linear keyframes, let me show you:
As you can see, if an animation looks like this it will look like a robot did it, now, let’s apply the In-Out principle to the animation:
Sine In, Quad Out.
As you can see the head looks more natural now than before, now, what I wanted to show is this:
Sometimes you can do your own easing styles with linear animations, but be aware that sometimes easing styles will look better than only linear animations and will save you time. Also have in your head that with linear you can custom more your animations but you should do it when you are familiarized with the easing styles. This takes practice.
- How to get better
This is a tip for people that want to get better at animating.
Repeat. Take an old animation you have done, for example, a punching animation you did some weeks ago, do it again trying to make it more fluid and well looking.
Watch . Yes, watch animations from other games, or animations from an animated movie but don’t focus on the story, focus on how they use the keyframes, how they apply the principles, how do they move. Study the animations.
Copy . Get an animation somewhere or another game and do it, try to get the most similar possible to that animation.
Polish . You should do this in every animation you do. Ok, so you have everything well-posed, it looks good, now it’s time to polish it, with polishing I mean to make it the most fluid possible.
Try everything . Don’t make only attacking animations, or only animations with guns to pew pew all the way, or only dancing animations. Try doing them all, today you can try doing a meme animation, tomorrow an animation with a sword, then a dance. You can try to do the weirdest animation you can too, it’s an amazing practice sometimes.
- Do a cinematic
Yes! try doing a cinematic for example, a character fighting another character, a character screaming in a concert and also animate the person that is singing, maybe animate the public. You can animate a scene where a character has to run. And if you want you can do a character flying from a place to another place. This is probably the best practice you can do.
Also making long animations it’s an alternative and a good practice too.
My experience animating in Roblox Studio
I’ve been on Roblox for 2 years, 1’5 years of it animating and developing. I barely did animations first but then I started to practice more. In the future, I will fix this guide because obviously, I will have anything to add or to fix since I’m not the best one at this moment but not the worst.
What I like of animating on Roblox it’s how intuitive it is and how many things you can do with just animations, also Roblox let us freedom to animate lots of things!
And that’s it! I hope this article helped you all and I also hope you can improve your animations.
And now that you have the information, go and practice a bit
Hope this help and thank you for reading! 
Edits/Things to add:
The discord user#tag in every video is outdated.
No more ads on the videos.
