The Importance of Keyframes  /  Run Cycles
Articles Blog

The Importance of Keyframes / Run Cycles

October 23, 2019

when it comes to 8-bit videogames of
the third generation of consoles you can’t often say that comprehensive
animation was something they were strong at, but then when you had to work with
the amount of space available which even a blank Word document can’t even shrink
down to, you’re going to have to come up with some very basic workarounds in
portraying your character movement. When it comes to animation, particularly run
or walk cycles, you have to have a minimum amount of frames in order to
convince your eye that there’s any movement at all. In animation, keyframes
are used to rough out a movement so you can see where the strongest poses are. In
this example your keyframes for a walk cycle will be on the up-and-down
movements. You’ll then fill in the frames between these key frames called
in-betweens and the motion will gradually look smoother depending on
your frame rate which is how many frames are shown in one second. But your
strongest frames are always the key frames which act as the foundation for
the structure of your animation. While games in the 16-bit era were able to
pull this off with some finesse, limited memory in the cartridges during the
8-bit era meant in-betweens were sacrificed leaving you with essentially
keyframes. This is why Mega Man’s run is made up of a mere three frames; this is
why Mario has one frame for jumping and this is why the Turtles had two frames
for climbing a ladder. If you’re going to portray a movement in as fewer frames
as possible you’re going to use the strongest poses In Mega Man’s case you
don’t necessarily notice that he only has three frames because your eyes fool
you into thinking there was movement between those frames as they happen so
quickly. This is also the case with Mario’s run, particularly in Super Mario
2 which has an impressive two frames of animation for running and it looks fine
because that’s all it needs. It’s not necessarily the case that
adding more frames enhances the animation either. If we look at the same
run cycle for Megaman in the wily Wars which is a 16-bit remake of the first
three NES games, we can see that the movement doesn’t really appear as strong
or dynamic it certainly adds a bit more life to the
movement but the in-betweens are so close to the key frames it softens the
impact of those poses making them look dynamically weaker. So it actually worked
to the designers favor having to work in such a limited capacity. Some first-party
NES games had that close-up artwork of 8-bit sprites for the cover and had that
one of Mario falling to his death in his jumping pose. Just this one frame alone
portrays 90% of the action and this has always been the case with Mario in
almost every iteration. Once you press that jump button he is immediately in
that air punching pose because in the end it’s the strongest most dynamic
frame. Nintendo didn’t mess around with adding in unnecessary in-between frames
before that one strong keyframe. Now, when you look at jumping in Mega Man 8 for the
PS1 there are eight frames before that one strong keyframe and it makes the
movement appear incredibly sluggish and weak. Indeed this is the case for much of
Megaman 8’s animation and probably subconsciously adds to the people’s view
of the general design of the game. That’s not to say the animation is incorrect
but it doesn’t give the movement much energy or excitement. So considering this
viewing the 8-bit animation keyframes certainly appears more exciting and
dynamic as it cuts out any in-betweens for the sake of smoother movement. You’ll
often find 16-bit games had gloriously animated run cycles, making full use of
more disk space to fit the animation in although you might sometimes find some
16-bit games has stuck to that bare-bones keyframe animation to give a
more energetic movement such as both Mario Worlds which share the design from
Super Mario Bros. 2 Retro styled indie games in the last 8 or 9 years
have a bit of a mixed bag in the understanding of this keyframe animation.
Some really tighten this design philosophy in a vice and you get some
gorgeously animated Indies while some merely reference the style
from the era without fully grasping the idea of dynamic poses. This doesn’t
necessarily mean that one game is better looking than another but you might be
able to feel the difference. So when we look at the spectrum of this keyframe
animation across the 8-bit era you’ll begin noticing patterns and techniques
in portraying movement and action in as few frames as possible. For instance all
these run cycles use three frames but some go back and forth and some loop,
some are fast and some are slow and you get different result each time all just
from three frames. Like the brilliant Adam Neely has said of facing a creative
block, limitation breeds creativity and I think this also applies to 8-bit
animation. Video game artist Keith Warrington said this of being shackled
by the limitations of two color 8×8 squares of pixels when designing the
character animation for school days for the ZX Spectrum
“You couldn’t do a normal person because they would have all looked the same
there had to be a little bald round headed teacher with specs, one needed to be
a smarmy bloke with a moustache another was bound to be an open
university guy, all beard, just so you could tell them apart
really” This helps reinforce the idea of being concise when animating on a small
scale while trying to be inventive. As an example in animation, children’s TV show
Pocoyo focuses heavily on this quick snappy energy using a limited number of
frames in some movements to give a real high paced entertaining piece of
animation. Personally I feel this is infinitely more interesting than some
other cheap and easy kids animation Anyway, before I wrap up I’d like to take
a look at some exceptional examples of animation in 8-bit games. Interestingly,
these first three examples all share the same technique; rotoscoping. Rotoscoping
is using real-life reference footage as a base for your animation and it’s the
reason games like Prince of Persia look so accomplished. Prince of Persia
Impossible Mission and Karateka all have some top-notch animation making
as much use as they can with as many frames as possible giving a realistic
sense of movement. This sort of animation was again carried over successfully into
the 16-bit era with games like Flashback but it’s interesting to note that the
same effect can be achieved on a lesser system. Next I’d like to showcase just
how bloomin marvelous the animation is in Little Samson. On the surface it still
has basic keyframes in run cycles and jumping but every character has a
complete rotation animation and little Samson jumps with a spin! I don’t
actually know if that is lil Samson himself I wasn’t really paying attention to any
story and this isn’t particularly common in
8-bit games to have a full rotation and it’s just such finesse. Finally, Batman
for the NES has some really nice animations for an NES game. Nearly every
action feels really considered; when you punch
Batman pulls back ever so lightly and quickly in anticipation much like how he
jumps. When you jump he’ll crouch first and then leap. Quite different to how many
other game characters jump. Enemies pull out weapons with a few frames animation
and have some reaction to actions but the cutest little touch is how Batman’s
cape has some follow-through animation when he moves and jumps lingering on
after he stopped moving it’s only a frame or two but it really
makes the difference and I’d like to just take this opportunity to quickly
contrast Batman to Robocop and just how different their movements are. I mean, I
know Robocop is part robot but most of the animation in this game is erratic and
poorly planned and stiff and has an inconsistent energy about it. I mean what
the heck is that, haha! So when anyone says old games look bad just say “NO THEY DON’T, SHUT UP!”
and walk away. Please consider sharing and rating this video, commenting your
thoughts and if you like these videos and want to keep up to date you can
subscribe and bell, and follow me on Twitter for updates and such……….loveyoubye!

Only registered users can comment.

  1. …Nez & Meh rio? I have to admit it sounds discordant to my U.S. style of English.
    Interesting how some games lost their impact when more frames were added.

  2. "nez" is just how me and my friends have said it, so just deal with it.

    'MA-rio' is how it's pronounced in UK adverts, so it's how I'm accustomed to saying it.

  3. Well that explains, I learned this unconsciously while I was animating my sprites, the thought that was going through my head was, Why don't I feel that Umph or "Power" to the movement, even it looked smooth

  4. NES Castlevania games walking animations are so satisfying to look at even thought there's just 3 frames, fits the horror theme perfectly.

  5. Cool, analysis. Your work must be for an animation studio or graduated fine arts in animation? It must be nice to be a good animator. God bless, Proverbs 31

  6. That was FANTASTIC. Top-notch in every way. And you actually taught me something new (beyond video games)! I didn't know that was the origin of the term "Key Frame." Now I do! Thanks.

  7. More accurate does not equal better. Animation NEEDS these "unrealisms", it lives off of it.
    Why do you think there are so many silly looking in-between-frames in cartoons and anime? Did the animator suddenly had a spasm or get lazy only to draw perfectly again a couple frames later? Nope. Try rotoscope animating with as many frames, as much accurate proportions, lighting and clean movements as possible without adding anything to it or making deviations and changes. Won't look so good.

  8. I think the turtles actually only have one frame for climbing; the NES ppu can flip sprites automatically before putting them on the screen, so you can make room for more sprites.

  9. Really glad I watched this video.
    Not being an animator. I've never once considered the idea of the time it takes to get to the "Powerful keyframe". But I definitely have always understood I didn't like something, but not why.

  10. Correction on that roto-scope bit.
    Roto-scoping is *directly traced footage*, not reference.
    All animation uses "reference" but most character animation (especially by the masters, and the most entertaining stuff) only use the reference as reference. Sorry but as a animator this is something that people get mixed up all the time.
    That "mirror" video and the hand holding are rotoscoping. The Disney Footage is *NOT*.
    That bit with Alice in Wonderland is the key case. Overlay and sync the two, and you'll notice they do not overlap exactly. The cases people bring up constantly of disney "reusing" animation (such as robin-hood, sword in the stone,etc) are a separate matter, those are technically traced, but only for the timing skeletons, they still fully drew Maid Marian in those shots.
    The reason rotoscoping looks wrong is the timing, proportion, perspective, and weight conveyed in the final product do not match the implied result. It either comes off as wrong(such as heavy character's moving like light actors, or the anatomy does not match up to the character.
    That's why the Prince of Persia case "works" because the actor(a young boy) and the animated character "match".
    It is still no where near as appealing as character animation exaggerating real reference, or the skill of an animator who has internalized the rules of motion, and no longer needs the reference.
    There is so much mis-definition in regards to techniques of animation!

  11. No mention of Moon Crystal for the famicom? That game had a uniqueness about it's animation of the main character AND the enemies!

  12. Okay, I can write off most of your mispronounciations as regional differences, but "Kara-teh-kuh"? No.

    It's "Karate-ka". As in "One who practices karate".

    Fix this.

  13. It's interesting how you have almost exactly the opposite preferences to me in terms of what you like from your animation. I''m somewhat confused how you can like both the low-key-frame dynamic style you are talking about and also love rotoscoping (which is to my mind the most sluggish feeling form of gameplay – Prince of Persia being a great example)

  14. Whenever someone tells me old games look bad, I show them the game they're talking about running on my PVM. They shut up fast.

  15. Incredible video. Real eye opening on some of those animation cycles only having 3 frames and looking so good!

  16. The Batman NES animations gets closer to the territory of sacrificing control for the sake of fancy graphics, which is bad design. Nice looking graphics should never come at the expense of gameplay, which happens all too often nowadays, eg. The Witcher 3.

  17. Amazing how keyframes makes a difference! Actually i like megaman 8 jump and running animations. For me, it looks the extras frases is used to calculate the height of the jumps more precisely and the run animations looks really cool. But, that was a amazing video! Congratulations!

  18. The turtles actually just have 1 frame of animation for climbing, it just alternates between toggling xflip on and off (native function, requires no memory). Same reason a lot of top-down games had 4 frames: 2 for walking sideways, 1 for walking up, and 1 for walking down, with the latter 2 using the flip trick.

  19. Woah! I wasn't expecting to see Adam Neely referenced here!

    Good stuff, I'm not interested in animation but I stayed captivated the whole way through!

  20. Technically, the turtles had one frame for climbing, it was just flipped. It's a really common trick. 😛

    I'm currently developing an RPG with Punch-Out styled battles, and the majority of the animations use simple keyframes, to keep things nice and snappy.
    You really don't want a fighting game, with sluggish animation.

  21. So more in between are not always better. Key frames alone show the action. Too many In-betweens slow down the look of the animation?

  22. I always thought that they were pretty good with animation and graphics back in the day, of course thats all we had and today i can't seem to stare at any old non remastered thing more than a long period of time, for some reason. And key-frames are still used today, as up until a decade ago flash and everything older is all we had. Including hand drawings. All use of key-frames in scenes.3-5 frames for every key-frame used last i knew was the standard, But it has been awhile since I've been in the game making area.

  23. I thougth "I'll just watch this video to lose some time before taking my car to the shop" … After I watched it… "Holy sheet… I'm lucky to know the existence of this video"

  24. I'm working on a small NES game as a hobby project and am benefiting your insights on animation. Thanks so much!

  25. It's hard for me to actually get around this, but I usually try to key frame some of the strongest poses and then try to fill in in-betweens while animating on twos. Still trying to test it out here.

  26. Great video! I have one nitpick though–the Alice footage wasnt actually rotoscoped. They used the live action footage to get ideas for gestures and movement, but not a single frame was traced, or wouldve worked if it was traced anyway because Alice and Kathyrn Beaumont have very different proportions. Disney's artists were advanced enough by this point to not have to fall back on tracing. Snow White wouldve been a better example to pick, given what they did in that film is closer to pure rotoscoping.

  27. How/why did you make the platformer footage ”tilted” like in the first 20 seconds of the video? Looks pretty rad, but is it also for a reason?

  28. You should check out Moon Crystal for the Famicom. It's another 8-bit game with really nice, probably rotoscoped animation for it's sprites.

  29. I feel like this is why Homestar Runner was and still is appealing to look at it. Very big and expressive keyframes.

  30. I always had that irk about the 8bit Megaman games vs the 16bit. The 16bit stuff always felt so slow even if they were doing the same thing at the same speed. NES megaman looks like he has shit to do, SNES megaman is out for a leisurely stroll. Also in seeing this, I understand why my animations look so slow. Stellar video my dude.

  31. 6:05 I miss Pocoyo, I wish I had seen that more as a kid. It only aired when I was growing out of the age of watching cartoons.

  32. i remember SkullGirl devs also talk bout chopping the inbetweens to make more impact for their game movements and makin it looks stronger

  33. I don’t know if this is a reference but on the thumbnail there are technically 7 sprites which could be a reference to how the nes could only display 8 sprites at a time. I really hope that that was a reference and that I wasn’t looking way to deep into it.

  34. "Limitation breeds creativity". It was Jack White, from the White Stripes, that said something like that during a interview about the limitations of blues music scales while playing only with a drummer.

    The less, the more. Nice video, indeed!

Leave a Reply

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