Animating in Roblox

Animating… There aren’t many developers in Roblox that take animating professionally, animations bring your game to life and they are as essential as scripting. You can make a really good game, but with a walk animation that looks like you were floating, that animation can ruin the whole experience since you don’t want your players and NPCs to look like they were glitching.

In this article I will cover some stuff about Animating in Roblox, but first, let me introduce myself.

I’m FireJxsus 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. But in today’s post, I want to do a guide of what I’ve learned.
Remember that I’m not the best animator but I’m not the worst so I hope this can help you all.

This is one of my latest animations.

Progress

Right now you probably are like “What do you mean with progress?”
Well, animating it’s like drawing, before you become a decent animator you have to practice a lot, you won’t make a good animation if you first don’t know how to do it or what techniques are there to animate.

One of my first animations.

As you can see it’s one of my first animations, some of you maybe see it and say “it’s good to be one of the first ones” and in my opinion, it’s not the best one I have done, in this article you will also learn to know if an animation is well done or badly done, you will be able to watch animated movies and see how they do this too!

Animators

In this point of the article, I’m going to talk about ways to animate in Roblox. If you already know all of them you can skip this. Links to the plugins/websites for the animators will be at the end of the article.

Blender
Blender is a program that it’s usually used for 3D modeling, renders, sculpture… But we are going to talk about Blender’s animator.

The blender’s animator can do wonders if you know how to use it. It has a graph editor that lets you do your own easing styles and it’s amazing to be honest, you can do custom animations, do animations at 60FPS or more/less FPS. If your game really needs amazing animations you can afford to have blender’ animations but the actual plugin that Den_S did imports way too many frames and it can lag the game.

So, if you want really good quality you should try Blender since it has even Inverted Kinematics. Remember that it’s really hard to learn but once you get used to it you can make your animations look even better.

PD: If you are a beginner at animating you shouldn’t start with Blender, it’s like not knowing how to drive and then driving a formula 1 car.

Roblox Default Animator/Roblox Old Animator Plugin

If you are a beginner, you should definitely start with any of these, preferably with the old animator since it’s easier to use this one. Once you get better you should move to a better one (Or stay with this one if you are comfortable with it) that will let you customize more your animations with more easing styles and more.

I don’t recommend the actual Roblox’ default animator to be honest… it’s hard to understand and probably not the best one I’ve seen (Sorry Roblox but it’s true) despite it supports Inverted Kinematics, which is really well so if you want to try IK (Inverted Kinematics) you should see it with this one. I don’t recommend it, but I’ve seen people that make great animations with it.

Moon Animator Suite (Made by xSIXx)

This is the animator I use and personally my favorite since you can customize everything really well. You can’t do custom easing styles like in Blender or use IK kinematics like the other ones, but it’s very intuitive. In this animator you can even move the Camera and if you are really inspired, you can even do a cinematic on it, also it has a feature where you can run a script at a point of the animation and more cool features like animation reflection.

This is probably (maybe I’m wrong) the best plugin for animating, but remember that you should have basic knowledge of animating before using it. It has more easing styles than the default animator but no more than Blender.

I highly recommend this animator but it’s up to you to decide.

How to animate

Here I will post some links to YouTube videos where you can see basic animation in each animator:
Blender 
How to set-up
Link1 Link2
Default Animator/Old Animator
Tutorial
Old Animator Plugin

Moon Animator Suite
Tutorial
Plugin

Right now you can say “Wait! I thought you were teaching us your ways!” Well, the only way it’s to practice, practice, practice and practice even more. Don’t worry, I will say some tips ahead.

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.

And now, ladies, gentlemen, potatoes, unicorns, or whatever you all are. Now is when the article really starts.

I will talk about:

1. The 12 Principles Of Animation
2. Easing Styles & Directions
3. Personal tips
4. My experience animating at Roblox Studio

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.

I will Link a video about these and then explain these by myself and tell you how can you actually apply them on a Roblox rig.

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 fun and natural, then don’t forget this principle. In your environment and everywhere there’s Squash & Stretch, for example, when a character has a face.

This is the first principle for a reason, it’s one of the most important ones in an animation. It makes the characters move more naturally.

Let me do an example in Roblox:

Do you see the head? As you can see in this animation the head does this principle, and if you look carefully the body does it too, first the whole body squashes to then stretch up and then squash again down to then stretch again to its original position.

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 to someone’s face without anticipation, you have to first anticipate the movement to then gain enough strength to do that move.

Anticipation applies too when a character fell somewhere on the floor and you are about to get up as you can see on the hero reference.

First I anticipated that the character is going to jump.

Then I anticipated that when the character falls, the character is going to get up.

Staging

I don’t really know how to bring this principle to Roblox (actually you can, I will explain now) so I will give you a link to a video where you can see how this principle works.
Video
^ If you want you can watch his full playlist of the principles which will help you more, but make sure you read this points too so I can tell you how to bring them to Roblox or how to use them well.

So I said you can’t bring it to Roblox right? Wroooong!, You can. Actually, this principle is different when we talk about games instead of animations itself. For example the environment, in a horror game you can animate a door by making it move fast to a side to get the player attention to it, moving an object around… Yeah, all of that can be made with animations (and tweening works too).

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 on 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 into 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, if it does: good job!

As you can see, first, this ball’s movement it’s totally linear and it doesn’t have any arcs, but when we actually add arcs and put in to practice the principle of in-out it’s more natural and it looks like there’s gravity. You can do arcs in literally everything you see, even in a wood stick.

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.

As you can see, the timing of 3D animations it’s usually defined by seconds and milliseconds at the top bar. But actually, it defines too how many frames are you using. The closer the keyframes are, the faster the animation will go, and the farther, the slower the animation will be since it will use more frames.

Exaggeration

This is my favorite principle! It’s about exaggerating the poses on your animation. This gives your characters that spark and make 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.

Here you want to transfer that the character is terrified, then don’t put the body straight because that’s a sign of confidence, instead make the character to be really scared. To do this you can make the character take long steps like the character wanted to really go out of that place, and then place the character’s back like the character were thinking that something is going to pop out from somewhere.

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, that exaggeration it’s what really gives the characters their lives. Remember to don’t over-exaggerate unless you want an epic animation.

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.

Don’t do twinning, never, please.
Unless you are doing a robot.

Now, what’s twinning? Lemme do a quick animation and show you:

Do you see this? If you don’t get what I mean let me take a picture to the keyframes of this animation.

That’s twinning: putting keyframes in a straight line. Please, don’t do that, a tip for this is animate everything separately ignoring the other parts while animating that part unless you have to adapt it to the root part or it’s a walking/running animation. Try to variate them, don’t make everything move at the same time, let me put 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: Click me!

“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.

3. Personal Tips

  1. 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 how to use 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.

2. 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.

3. 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.

4. 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.

I’ve done my own game that is pretty inactive and it's fully made by me, it helped me a lot on improving animation. It’s like a dance studio with about 40 animations at this moment, you can check it in HTD (My group).

A recommendation from me is to put a watermark somewhere in your animation videos because one day someone will claim it. Also, another recommendation is to put only one price to don’t get annoyed with some people.

Some of you may have said “but this is a basic guide that you can find anywhere”, well, I found many animators out there that didn’t even know the principles of animation which are essential to get this job done, some of them didn’t even know how to use easing styles.
___________________________________________________________________

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!

Social media:
Twitter: @
YeezuzRBLX
Roblox:
FireJxsus