Recreating the HinterLands In Unity Part 2- Animating a Walk Cycle

(This is a multi part tutorial series, you can find part 1 here: Recreating the HinterLands In Unity)

Create a prefab

In the bottom, under your assets folder, add a new folder named ‘Prefabs’. Drag your Player down to the prefab folder. This creates a Prefab of your player- which is an object you can re-use mutliple times by just dragging it out from your prefabs folder. It also lets you make changes to any object you are working on, and instantly apply it to all other instance of that object! So if you had the player automatically walking around the level, you could drag out 10 of them, and they would all behave the same way (or you could modify them slightly). It can be super helpful if you want to improve the player in one scene, and have it update in all your scenes.

Resources for Animating in Unity

The official documentation has some info on animating:

https://docs.unity3d.com/Manual/AnimationEditorGuide.html

But this article is more helpful (at around the ‘Idle animation’ section):

http://pixelnest.io/tutorials/2d-game-unity/animations-1/

Walk cycles

We’ll want to start out with a walk cycle. At first it might be fine to just swing the legs back and forth, but it will look a bit ugly, and it doesn’t take that much more effort to get a slightly better looking walk cycle in.

The easiest way to find a reference for it is to just go to google images and search “walk cycle”

https://www.google.com/search?q=walk+cycle&safe=off&source=lnms&tbm=isch


The first one that comes up for me is:

Which is one I’ve seen for years, and is a great one to go off for seeing both legs, arms, and the head going up and down.

You’ll want to download this image, and put it into your Assets/images folder, so we can use it as a template for making our guy walk.

DOWNLOAD HERE

(right click on it and go to save link as, and it should save it as a jpg)

Since our guy is facing the opposite direction of the walk cycle, we’ll flip our guy (flipping the image instead makes him go through the walk cycle backwards). So click on the Player Game Object, and set his X scale to -1 to flip him horizontally.

Drag the image out into your scene on top of the guy. Set the order in layer to -10 so it’s now behind the guy, so we can see him completely. Then scale it down so that their guy is roughly the height of our guy (use the 3rd/ almost standing guy as the main one to align ours with- since he’s basically standing too). Make sure if you are using the last tool (‘t’ on your keyboard) for resizing the image, that you hold down ‘shift’ when grabbing the edge, which will force it to scale with the same aspect ratio (if you scale just vertically, it will mess up the proportions of the character).

Animation

Make sure your player object is selected.

Go to window->animation and hit the create button (check carefully you selected the ‘animation’ window- it’s kind of hidden in there with 2 other ‘animators’).

Create a new folder under the assets folder, called “Animations”, and save the animation as ‘walk_cycle’.

On the left hand side you have a red ‘record’ button, normal play/forward, ect controls. Under that it should say ‘walk_cycle’- if you click on that (even though it doesn’t look like a button), you can create more clips (which we’ll do later for jumping/ crouching).

On the right hand side you have the timeline. All animation is usually done on a timeline. The way it works, you make a change- say lifting the leg a little, you record that change, move to a spot further in time, and lift the leg more, record it again. If you play that back, it will smoothly ‘tween'(to make things move smoothly from one spot to the next) between the first position and the second one. And that is the beginning of animation!

Depending on what type of animation, usually it will play back at a rate of 30 frames per second (so you could potentially create 30 frames of movement, and it will play back in 1s- or you could create 1 at time 0, and the next at time 30, and it will take 1s to play it back, and tween smoothly between the first and last position).

Lets get to work!

Animating the walk cycle

So the red line on the left hand side should be at the 0:00 spot (if not you can move it there by dragging it at the very top).

Lets hit the red circle/ record button (so that it is highlighted/ lighter behind it), then move that window out of the way, click on your characters front/ right leg, and rotate the thigh + move it until it is roughly in position of the first frame of the walk cycle behind him. Then grab the calf, the foot, and position them the same way, until the whole leg looks close to the first frame of the walk cycle behind him.

We’ll probably want to think how much time the walk cycle should take. It’s 2 steps, so lets go for 2 seconds total (at 30 frames per second, or 1 second for 30 frames, we’ll need 60 frames total to display 2s of our animation). There are 9 different frames behind him we’ll want to position everything for, so 60/9= 6.66, which we’ll round to 7. So we’ll re-position him every 7 frames to have our walk cycle last a total of 2s.

So drag the red line until you see that it is on frame 7 in the little tiny box on the left hand side. Now we’ll want to move that left/front leg to be in the rough position of the second frame in the walk cycle behind him.

When you get it to where you like it, try clicking and dragging on the top right where the numbers are, and dragging back and forth between 0:00 and 0:10. You should see the leg move smoothly between the 2 positions, and your character start coming to life!

So now that we can see how to actually get our character to start moving/ animating, we’ll want to create the entire animation. First go back to frame 0, and position your entire character to match the first frame.

* You can also flip the left arm in the X direction (changing it from -1 to 1, or 1 to -1) to make the arm joint go the correct way. Since our guy isn’t rendered from the side, you’ll have to try your best to make it look “right”.

To make it easier, you should first move your entire character down to match up with the head position of the background image. You don’t think about it, but you bob up and down significantly when walking. So if you get the body position done first, you can more easily estimate where the feet should land, and then the hands.

So first select the chest and hips (in the heirarchy click the chest, then holding down ‘ctrl’, click the hips), then move them both down to the right position (make sure you are at 0:00 on the time line too). Then position the feet (use the feet of the other character to roughly imagine where the ground should be/ the lowest point the feet should ever go). Then finally move the arms into the right position, and re-position the chest/ hips as needed, until everything looks right for the first frame.

Then move to frame 7 on the timeline, repeat, then frame 14,21,28,35, 42,49, 56 and repeat until you’ve finished all the frames! (Hint: it might be easiest to move the walk cycle frames behind your character to line it up better, just try to move only the X direction so the ground stays in the same spot- if you start moving it in a direction, hold down ‘shift’ to lock it to only move in that direction)

* Also with the arms, remember that the dark shaded one on the walk cycle sheet is the back arm, which is our guys left arm.

* Also, after you put the second frame, the animator re-scales to only show up to those frames. To see more, you can scroll over on the bottom scroll bar by hitting the right arrow, or you can zoom out by scrolling out the middle mouse button over the lower gray part (not over the timeline for some reason), or holding down the middle mouse button and dragging over the light gray area at the bottom. Not super intuitive.

WARNING: Save after every pose, and make sure you don’t save whenever unity messes up your animation. Unity animator seems exceptionally buggy. If you make a mistake and undo it, it will place your body parts in random spots, and will mess up all frames of your animation. Also, it will just randomly mess up the position of all your body parts for no reason. Whenever it does, just close Unity, and reopen your project (without saving), and it should be back to your previous save positions again. THIS IS VERY BUGGY.

NOTE: Frame 0:00 and frame 56/ the last frame in the walk cycle are the same, so you can highlight all the keys/ the diamond shapes for the first frame 0:00, hit ctrl+c to copy them, then move the red line to frame 56 and hit ctrl+v to paste them there!

It’s a long, painful process (especially with how buggy it is/ often it tries to screw up all your work), but when you’re finally done positioning all the poses, hit the play button on the animation window to see your walk cycle play!

Unity apparently doesn’t have the ability to save out your animation as a gif/ video, so you would have to use a separate program to record your animation to show it off to friends.

(NOTE: I originally did the tutorial with the walk cycle flipped- which ended with the guy walking backwards. So let me know if something doesn’t add up correctly XD)

Download the final finished Project(Only needed if you had issues getting your animation working) HERE: The HinterLandsUnityWalkCycle

Continue to Part 3: Making your character move with the arrow keys! (coming soon)

Leave a Reply

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