Before we get started with sprite animation, it's important to have a solid foundation in static pixel art creation. If needed, check out this page on Pixel Art Fundamentals first.

Animation Basics

Animation is a HUGE topic! It can be overwhelming, in fact, to consider all there is that goes into creating beautiful animation. The good thing is that we can keep it very simple and still learn a lot and get going fast.

At its most basic, animation is the illusion of motion our brains trick us into perceiving when we view multiple still frames of artwork played back in quick succession. A flipbook you can doodle in the corner of your notebook is a great example of how this works and how simple it can be.

Typical film animation is created with somewhere between 12 and 24 unique frames per second, which can give it an incredibly fluid look, but is a heck of a lot of work, too!

We can get away with using just two unique frames of animation and still perceive the effect of animation, particularly when we're also using the game engine to move the sprites across the screen as they are animating!

Game Animation Frames

Pixel sprite animation used in games is normally created with many fewer frames of animation. This means we can typically get away with creating just a handful of unique sprites to convey the action. 

If a one second action of a character swinging a sword is comprised of 24 frames in a feature film animation, the same action may contain just three frames/sprites in a very simple game style, and up to nine or so frames for a more fluid style.

Here's a beautiful example from Pedro Medeiros's MiniBoss Studios tutorial set available here.

Cycles

Unlike a feature animation, nearly everything a character does in a game (excluding cinematic cut scenes) can be broken down into repeating cycles. Walking, running, jumping, standing idle and breathing, swinging a sword, grabbing a prize, and on and on. These are all actions that can be considered looping cycles.

Here are some wonderful, short cycles created by Arks for his Dino characters. (You can purchase the sprites here if you like and use them in your own games, or even just to study them.)

This means we can focus on creating individual cycles, and then worry later about setting up the game engine to call on the appropriate cycle depending on what's going on in the game.

Player is moving the d-pad to the right? Play back the walking cycle. Player presses the 'A' button? Play the jump cycle. And so on.

Let's look at a typical, simple cycle, the "idle animation".

Idle Cycle

An idle cycle is an animation loop that plays back when the character is standing still. Rather than just holding on a single sprite, which can be a bit boring, an idle animation can be as simple as a few frames of breathing or blinking, and can get as complex as yawning, looking around, head scratching, etc. 

Walk Frames

Here's a walk cycle made of six frames:

Now, let's create our own animation cycles for Ruby, the red LED!