Friday, February 3, 2017

Updated Rotoscoping Tutorial: Walk Cycles

When I first started this blog a few years ago, I decided to make a small tutorial for rotoscoping walk cycles, as that is my primary method of animation. Back then, I did a few things differently, and truth be told, they weren't particularly refined or useful. So I wanted to update my tutorial to give more useful information and avoid teaching people to make the mistakes I was making.

For those of you who are unfamiliar with the previous tutorial, or rotoscoping in general: rotoscoping is the process in which an animation is done by filming a model performing an action, and then the footage is painted over. You can look up famous examples such as the films of Ralph Bakshi, Eadweard Muybridge's photography experiments, or Jordan Mechner games like Prince of Persia or The Last Express.

Personally, I find rotoscoping lends itself very well to pixel art, since the lower detail of the sprites allows you to focus more on the complexity of the animations. To get convincingly life-like and fluid animations with rotoscoping, the frame count will generally be on the high side, so working with a sprite that's 80 pixels tall will be quicker than one at a higher resolution.

As a side note, recently a program came out called Paint of Persia which specializes in rotoscoping. I haven't tried it myself, but it seems like a viable alternative if you don't have access to Photoshop or Premiere.

Now then, in the last tutorial I explained the process of filming your model (or yourself) walking. I used this example:

Now, the first thing I want to point out is that this was done outside, in a grassy yard, which creates two problems. First, the ground was at a very minor slope, so the side walk cycle wasn't on a straight line, and second, the grass obscures a good portion of my shoes, which makes proper foot placement a matter of guesswork. So, the first correction is: film your footage somewhere flat where you can see everything. I have since moved, and now film my stuff in a part of my apartment where there is little clutter and ample space. If you have access to a blue or green screen, that's even better.

I use a very basic method of filming: I place my iPhone on a tripod, and then take video of myself walking, which I then transfer to my PC. Loading it into Adobe Premiere, I move the video window to the center and resize it for consistency, then go frame by frame and export 10 frames to make a successful loop. Working with 10 frames, it's usually a good idea to capture every 2nd frame to achieve this.

Use the handy "export frame" button to capture each frame.

After the frames are exported, open them up in Photoshop. Ideally they'll all be the same size, as shown below.

Now to crop them. As mentioned in the previous tutorial, front, back, and diagonal walk cycles (if you choose to do those) will be slightly more tricky since you'll be moving away from/towards the camera. The trick to successful cropping is to keep a consistent point at the top and bottom. I usually make sure to keep the top just above the head and the bottom just below the point of the foot which is closest to the bottom.

Make sure the width is more or less the same too, although that isn't strictly necessary.

Once you've cropped all your frames, you're ready to prep your base model. But as they're all slightly different sizes, now is the time to scale them down to the size your in-game sprite is going to be.

All cropped, but different sizes.

Resized and ready to prep!
Now for the second update which has made my life so much easier: the Photoshop Animation Window. You'll notice it's that little bar at the bottom of the screen with one frame in it. You can access it by going to the Window tab. Before, I used to use the navigator on the top right to sort of eyeball if everything was in the correct position, which led to less than optimal results. But using the Animation Window makes things much much easier, since it's possible to see frame by frame how the animation looks before you even put down a pixel.

In order to do this, you need to paste each of the other frames into your first one. I've named each of my frames "frontwalk#.png" so in this case we're going to use frontwalk1.png as our main frame. So first we would select frontwalk2.png, then click on the small arrow button on the tab at the right of the Animation Window, bringing up a popup menu. From those options, we click on "Copy Frame"

Then, close frontwalk2.png so things don't get confusing, and select frontwalk1.png again. Click the arrow and this time choose "Paste Frame." When the options appear, make sure "Paste After Selection" is chosen.

Repeat this step until all 10 frames have been pasted into frontwalk1.png

Hooray, your base model is complete!
Now you can click on the "Play" button at the bottom of the screen to see your animation come to life! Since it's been cropped at different widths and there might be some slight differences in the framing of the height, it will probably look somewhat jerky at first.

At this point, you can select each frame and nudge it around a bit until you get it mostly centered and smoothed out, so it will look closer to something like this:

So now the fun starts. Make sure to create a New Layer over each frame, then draw your sprite over your model. I generally like to paste the head from the standing sprite on each of the frames first, to account for head bob as well as to have a good point of reference.

Now for side walk cycles, the same principles apply, except it's slightly easier because the height will always be the same. You don't really need to resize your frames before putting together your base animation. Again, because width will probably be different, the initial result will probably be a bit jerky:

To fix this, it's a good idea to keep the head centered and fixed during the entire animation, allowing for bob of a few pixels.

Also don't be too concerned about the sudden jerk at the loop point of the animations if you have a background, since that's what our eye is going to focus on. Just make sure that the character's position doesn't snap too awkwardly between the last and first frames, and you'll be fine (and if you're filming on a blue or green screen, this is a moot point)

So once you've gone through and painted over your base models, you should hopefully be left with some nice smooth walking animations! You can export these animations as individual frames in Photoshop, which also makes it much easier than saving them individually as I used to do.

Final results:

And yes, since you're able to get pretty detailed animations using rotoscoping, it's always fun to give characters a little swagger when the need calls for it :)