Overview

Have you ever wished your inanimate objects were animated?  Do you have some object you’d like to wiggle?  Have you ever needed to animate your UI and resorted to using scripts and a Tweening library?  Are you ready to create your own Unity Animations?

In this quick tutorial, I’ll cover how to create your own animations directly in Unity.

We’ll cover animating bones to make a skeleton wave, and we’ll do some renderer animation as well to make his eyes flash an evil red color.

Setup – Getting our Character

To get started, we’ll need something to animate.  Grab this skeleton from the asset store.

Link: http://u3d.as/kJe

After importing, you should see a “Proto_Skeleton” folder like this.

Preparing our Scene

Create a new Scene.

Add a Plane to the scene.

Drag the “proto_skeleton_01” prefab into the scene.

Your Inspector should look like this.

Our Scene View should resemble this.

 

The Animation Window

It’s time to open the Animation window.  You can find the Animation window under the Window menu.

I want to point out that there is also an “Animator” window.  That’s NOT the one we want.

Creating our First Unity Animation

The animator window looks like this.

Click the Create button.

You’ll be presented with a dialog similar to this.  Give your first animation a name “EyesGlowing”, and click Save.

The Animation window will change now to show our new empty animation.

Select the “skeleton_01” child in your Hierarchy.

This child has the Skinned Mesh Renderer on it.  The first thing we’re going to animate is a property of this renderer.

Look at the emissive property.  It should be empty.

The Emissive Texture

Save this texture into your “Proto_Skeleton\Textures” folder as “skeleton_texture_emissive”.

Assign your new texture as the Emission for the renderer by dragging it here.

The emission field allows you to specify a mask for where the renderer should emit light.  The color and float value next to it allow you to adjust that lights color and intensity.

Now try adjusting the Emission value like this.

Set the value back to 0.

Take another look at your animation window.  You should notice that it’s changed a bit.  Because you had the skeleton selected and the animation was in “record” mode, the changes you made to the renderer were actually added in as a key-frame in the animation.

If you happened to do other things like move the character, those may show up in here as well.  But don’t worry, you can just select and delete the properties you don’t want in your animation.

Adding Keyframes

Now let’s make this do some actual animation and change some values.

In the animation window, select a point further into the animation.  In my example below, I select right at 0:10.

Then click on the color picker for the Emission property.

Slide it all the way to bright red.

Let’s watch it!

Click the play button to watch your animation.

You should see some quick flashing eyes!  Great work so far!

Add another keyframe

In your animation window, you can control the zoom level with the mouse wheel.

Hover over the animation window and zoom out so you can see 1:00.

Select the 1:00 mark in the animator, then change the Emission value to 0.

Play your animation again and you’ll see it’s a bit better now.  It lights up fast then fades out.

Time to Smooth it out

Take the keyframe from the 0:10 mark and drag it over to 0:30.

This little change will smooth our eye flashing a bit, making it a more gradual glow.

Conclusion

You’ve already learned how to setup a simple animation for renderers, but don’t forget that you can do this for just about anything.

Here are some other examples of things I animate like this all the time:

• UI Components
• Particles
• Alpha channels
• Transform positions
• Entire GameObjects

On to Animating Bones!

Okay, enough of the renderer, let’s move onto more traditional unity animation.  It’s time to move some bones!

Create a new Unity Animation.

Name it “Skeleton Dance“.

Now let’s look in the Hierarchy.

If you expand out the skeleton completely, you’ll see a bunch of children.  These children are the bones of our character.

Most humanoid game characters have a very similar and standardized bone structure to make animating them easier.

Let’s move some bones!

Select “Character1_LeftArm” in the hierarchy.

In the animation window set the red line to the 0:30 mark.

Now move and rotate the LeftArm so that it’s raised and pointing to his side like you see below.

New Keyframes!

You’ll notice that we now have some key-frames in the unity animation window.

Press Play

Don’t forget to play your animations as we go along so you can see how they progress!

Let’s do another

We have a very simple bone animation, let’s expand on it.

Select the “Character1_LeftForeArm“. (it’s a child of the LeftArm you have selected)

Leave the red line at the 0:30 mark.

Now in your inspector window, adjust the potion and rotation of the forearm just a little away from the parent.

This will force key-frames to be added for the forearm.

We could have alternatively added properties using the add property button, but navigating that deep down the tree using the add property dialog is a bit more painful, so we took a shortcut.

In the Unity Animation window, move the red line to the 1:00 mark.

Remember you can use the mouse-wheel to zoom the Animation window scale.

Move the forearm up a bit and rotate it to look like this.

Repeat this 2 times, once at the 1:10 mark and again at 1:20, giving it a little rotation back and forth.

Great, we’ve got him doing a little wave!

Let’s extend that wave a bit though.

To do that, let’s copy and paste the keyframes from the 1:10 and 1:20 marks.

Select the 2 key-frames to be copied, then use your copy shortcut (ctrl-c or cmd-c).

Move the red line over to 1:30 and paste (ctrl-v or cmd-v).

Then move the red line over to 1:50 and paste again.

The Results!

Hit play and check out the animation.

Your skeleton is waving!!

Let’s clean it up!

When you play the animation, you’ll see it abruptly loops with the skeleton’s arm snapping back to the original position.

We need to make him animate out of the wave now.

To do that, we can copy the key-frames from the 0:00 mark then paste them at the 3:00 mark.

 

Now give that a play.

OH NO IT’S BROKEN!

The arm is coming down early now and completely breaking our wave.

That’s because we only have keyframes for the LeftArm position and rotation up to the 0:30 mark.
After that, the next key-frame is at 3:00, so it’s slowly animating back to it’s idle position right after it the 0:30 keyframes.

We can fix it!

Copy the “LeftArm : Rotation” and “LeftArm : Position” key-frames from the 0:30 mark and paste them at the 2:00 mark.

The end result should look something like this.

Going Further

We’ve created a nice simple wave animation, and we’ve animated some eye emission values, but this is really just the start of what you can do.

Play with the animation window some more and see what you can come up with.

For a little inspiration, here’s a short sample of what I put together while writing this post.