Thinking about game sprites naturally leads us to think about sprite animation. Let's add that now! Traditional 2D animation in games is usually implemented with something called a sprite sheet, so we'll do the same here!

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!

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. 

One cycle of a character walking may contain just six frames/sprites in a simple game style, and up to twelve or so frames for a more fluid style.

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

Let's take that example and animate it to walk across the screen. I'll use Aseprite to create the animation, adding left-to-right translation so it doesn't happen standing in place, then we'll look at how to turn it into a sprite sheet for use on the Matrix Portal.

Sprite Sheet

Now, let's create a sprite sheet for use on the Matrix Portal display. A sprite sheet is a lot like a traditional film strip, it is a long (or wide, or gridded) strip of images, with each image representing a frame of animation.

In Aseprite, I've used the File > Export Sprite Sheet command to take the entire animation and stitch it into a long, vertical sprite sheet.

Get ready to do some scrolling! Because, this is what the exported sprite sheet looks like:

Now, when the Matrix Portal uses the TileGrid code, it will essentially march through and display each "frame" of this single image in order to play back the animation! You can think of it like a film strip moving in front of the bulb and shutter of a film projector.

LED Matrix Version

Here's a version of the walk that I've adapted for the LED Matrix Portal display. It is now 64x32 pixels in size and on a black background to keep the current draw low.

And here it is being played on the LED matrix display.

Conversion Process Video

Next, we'll code the Matrix Portal for sprite sheet animation playback.