New PixelGameEngine Extension for Animating 2D Sprites

One of the things I struggled with when using the PixelGameEngine was using animated sprites. It wasn’t immediately obvious how to get it to work, so over the Christmas break I decided to make a concerted effort to figure it all out.

The end result was a brand new extension for Javidx9’s PixelGameEngine. So, I would like to present the olcPGEX_AnimatedSprite with a small tutorial on how to use it.

For this tutorial I’m going to use the Animated Pixel Adventurer sprite set, which was made by rvros on itch.io and is available for free. I’ll also be using the single frame images that are included in it.

Setting Up Your Game

The AnimatedSprite extension requires the Graphics2D extension and is included in a similar way, so the boilerplate isn’t vastly different to a usual PGE application.

#define OLC_PGE_APPLICATION
#define OLC_PGEX_GRAPHICS2D
#define OLC_PGEX_ANIMSPR

#include "olcPixelGameEngine.h"
#include "olcPGEX_Graphics2D.h"
#include "olcPGEX_AnimatedSprite.h"

class Example : public olc::PixelGameEngine
{
public:
    olc::AnimatedSprite sprite;

public:
    Example() {}
    OnUserCreate() override {}
    OnUserUpdate(float fElapsedTime) override {}
}

With the above definitions and includes, the olc::AnimatedSprite class is now available for you to use, and there is a sprite variable for you to use

Setting up the sprite

When using an animated sprite, there is a little bit of setup required to ensure that it works as expected; let’s take a look at how to do this. Add the following inside the OnUserCreate function

// define a state name and the images for each frame of the animation
sprite.AddState("idle", {
    "gfx//adventurer-idle-00.png",
    "gfx//adventurer-idle-01.png",
    "gfx//adventurer-idle-02.png",
    "gfx//adventurer-idle-03.png"
});

sprite.SetSpriteSize({ 50, 37 });
sprite.SetSpriteScale(2.0f);
sprite.SetState("idle");

Using the sprite

Drawing the sprite is really simple. In your OnUserUpdate function, just call the following:

sprite.Draw(fElapsedTime, {100.0f, 100.0f});

This will draw the sprite and use the appropriate frame as time goes on, resulting in something like this:

And that’s the basics of using the AnimatedSprite extension!

We’ve only scratched the surface!

Defining multiple states means that you can switch between animations whenever you want to, and you can use single-file spritesheets as well. You can even flip the sprites vertically or horizontally, giving you lots of control over how your sprites are used.

This is all well-documented in the GitHub repo so I haven’t covered all the features here.

Feel free to help

I made this extension to make my life easier and I hope it will do the same for others!

I’m happy for people to contribute by reporting bugs or making feature requests, or even submitting their own changes and improvements via Pull Requests on GitHub.

If you have any questions about the extension or helping to improve it, I’m usually around on the community Discord so feel free to drop me a message.