Infinite Runner Devlog #4 – Player Spritesheets, Animations and Texture Packer

nelson · Posted on

I know I haven’t posted in a while, but the Infinite Runner project continues! Today I’ll be adding a character sprite sheet to the game. No more default libGDX happy smiley face Texture 🙂

To do this, we need to know a little about Animation.

The Basics of Animation with Sprite Sheets

2D Animation, like in Television and Film, works by displaying images (each called a frame) in quick succession.

This sequence of images can be collated into one image, called a sprite sheet. An example is shown below, taken from OpenGameArt – link here

This sprite sheet contains frames for standing, running, jumping and falling. Perfect for my infinite runner game!

Player Animation with LibGDX

LibGDX supports Animation rather simply. An Animation object can be instantiated with an Array of the textures that make up an animation.

When it’s time to draw, I can call the .getKeyFrame() method which will return the frame in the sprite sheet that is to be drawn at that point in time. Drawing process as usual.

To simplify drawing, I created a PlayerDrawer class, which chooses which animation and which frame to draw based on the time and player state. In order to split up the one sprite sheet into four separate animations easily, I created a Texture Atlas for the sprite sheet.

Creating a Texture Atlas for LibGDX

A texture atlas can basically define regions on your sprite sheet. It’s defined in an *.atlas file and sits alongside the image in the libGDX assets folder.

Unfortunately, there is no .atlas file provided with most sprite sheets (understandably, since who knows what kind of game engine programmers want to use). This means I had to create my own.

There are two ways to go about this generally:

  • Type out your own .atlas file. Follow the examples and note that the coordinate system is where (x, y) = (0, 0) is the top left corner and positive in the right and down directions.
  • Slice up your sprite sheet manually and repack it using a repacking tool, for example:

After this was done, I hooked it all up and ended up with a player sprite running, jumping and falling around the screen like this!

I’ll be developing my Infinite Runner further, so visit again soon for more.

 

 

Leave a Reply