Lets Learn Unity – Animation

Lets Learn Unity – Animation

For information and navigation, check out my post that introduces this Unity series here.


 

This Week

It’s been a month since I started the Udemy Course, and I have managed to make it to the halfway point. Hopefully, I will have finished it all by the end of next month. Now, I was planning to have finished Glitch Garden for this week’s post, but it is turning out to be a bit more intricate than the previous games. In the meantime, why not spend some time learning more about some the other useful mechanics of Unity. Indeed, Glitch Garden is full of animations, so now seems like an excellent chance to explore them more thoroughly. Let’s begin!

Animations

In this section of the course, Ben teaches use about two types of animations: Sprite Sheets and Bone-Based Animation.

Sprite Sheets are a series of separately illustrated frames that are played one after the other. In a similar way to how most cartoons are made.

Bone-Based Animation, on the other hand, uses a single image that is divided into multiple parts, which are then moved around but aren’t redrawn. You could compare this technique to stop-motion animations like Wallace and Gromit.

To make the differences between these two types of animations clearer, I have included some of the Udemy course characters below. Animations made using sprite sheets are on the left and bone-based animations are on the right. You may also notice that I have replaced the gravestone with a yellow hand. I did this because the gravestone seemed a bit boring, and what’s not to love about a giant hand!

All the sprites can be downloaded from glitchthegame.com, except the hand which you can be seen here and here (mine actually swaps to a second sprite during the pointing animation, but feel free to do what you like with it).

A cactus, a gnome, a lizard and a fox. It's a bit of a weird mix!
Sprite sheet animations.
A hand and a star trophy. This is an even weirder mix!
Bone-based animations.

 

 

 

 

 

 

So far in Glitch Garden, we have four defenders but only two attackers. I thought this seemed rather unfair, so I’ll go through how to create another pair of attackers using both sprite sheets and bone-based animation.

 

Setting up Animations

In order to start animating in Unity, you have to first make your way through a checklist. I’ve done my best to make this as clear as possible, but it might be a bit hard to remember at first (I certainly had trouble). But, after doing it a few times, it will become much easier.

1. Properly order your objects in the hierarchy. This is mostly for bone-based animation, but it’s always nice to be consistent. You can also add a sprite renderer to your object to see where it is when the game isn’t playing.

2. Add an animator component, not an animation, the highest part of the object’s hierarchy. This allows the animator to access the children below it, but if the animator is put on a child then it won’t be able to animate its parents.

Pro tip from Ben: If you can’t remember if you need to add an animator or an animation, you can look at their icons. The animation’s icon (a red play button) is contained within the animator’s icon (see below). Therefore we need the animator, as it may contain multiple animations.

3. Create and an animator controller from the create option at the very top of the hierarchy. Attach this controller to the animator component by simply dragging it to the right place in the inspector.

4. Finally, double-click on the animator in your project tab to open the animator tab, and select window > animation from the top of Unity (or press Ctrl + 6) to open the animation tab. Now, you’re all set!

Organise your objects, then attach an animator to it, and attach an animator controller to that.
1. Organise objects. 2. Attach an animator. 3. Attach a controller. 4. Open the animator and animation tabs.

 

Sprite Sheets Simplified

As anyone from the UK will tell you, if you want to have a fearsome attacker then there’s really only one choice…

I managed to find the perfect sprite sheet for such a terrifying beast on OpenGameArt.org and added an attacking sheet using Gimp. If, for some unimaginable reason, you decide not to use a rabbit for your game, you will still be able to add in another sprite sheet using the steps below.

1. Add the sprite sheet to your project.

2. Separate the sprites by selecting multiple in the inspector and apply, then open the sprite editor and click slice and apply.

3. In the animation tab, create a new clip (call it what you like), add new property > sprite renderer, select all the sprites for the animation and drag them into the animation tab.

4. If you play your game now, you should be able to see the animation, if not make sure that you have completed the all the steps in the above section on setting up animations. You can now change the number of samples in the animation tab to adjust the speed of the animation.

5. If you want your character to have multiple animations, then just create a new clip using the scroll down bar in the top left of the animation tab. You can then manipulate the order and transitions in the animator tab.

The most cruel and bad-tempered rodent!
That’s no ordinary rabbit!

 

Becoming a Bone-Based Boss

For the bone-based attacker, I was hoping to make something equally intimidating, and I believe that I have done just that. After searching through numerous images of dinosaurs, primates, and monsters, I eventually settled for a Darwin’s rhea. After finding out what these things actually are (turns out that they are flightless birds from South America), I divided one up into its various parts using Gimp. Here are the before and after images and another example: Dragon Bones.

As when using sprite sheets, you will need to set up the animation and animator correctly before starting to animate (see setting up animations section).

1. Add the dissected version of your character to your project.2. Set its sprite mode to multiple in the inspector, apply, and then use the sprite editor to slice the different parts to your liking (you can also change their points of rotation here).

3. In the animation tab, you can click add property to see a list of things that you can manipulate.

4. Now comes the slightly tricky bit, by pressing the red record button in the top left of the animation tab, you can start to animate your character in both the inspector (manually changing the values of position, rotation etc.) and in the scene tab (by moving your character into the desired position). This can be very fiddly and very frustrating if you make a mistake. Be sure to check where the vertical white line in the animation tab is, this indicates the timeframe that you are changing and unless it is set to the timeframe that you want to be changing, you may be undoing your own hard work. Trust me, it’s easily done.

5. If you want your character to have multiple animations, then just create a new clip using the scroll down bar in the top left of the animation tab. You can then manipulate the order and transitions in the animator tab.

As I said, bone-based animation can be a bit tricky. But if you keep at it, you’ll have it under control in no time! Finally, here is my rhea tearing apart a cactus.

Just a giant chicken scratching at a cactus with a face.
My animated rhea. It’s not as dirty as it sounds.

Leave a Reply

Your email address will not be published. Required fields are marked *