Spritesheets - introduction

  • what is a spritesheet
  • look like: grid arranged, non grid arrangementd, polygons

What is a sprite sheet?

A sprite is a single image. On a spritesheet there are many sprites put together into one big image file. The single sprites may or may not be grouped. For an animation sequence the sprites would be grouped. Often one line or column in a spritesheet represent an animation. But the arrangement is actually up to the artist or who ever defines and or actually makes the spritesheet itself.

hero.png, hero running animation

The single images of the hero running animation saved in a spritesheet with a single image strip.

As one can see, there are many images needed for a smooth animation (31 for the running hero). As more animations are involved the spritesheet gets bigger. This can be seen in the following example where there is a walking animation (1st row) and a running animation (2en row). The other (single) images are for a jump.

othelia_256x256.png

The othelia spritesheet.

As one can see, there are many different ways to arrange the sprites. The animation sequences do not need to be organized in rows, they could be in columns too. Or the sprites are placed just somewhere, but that is rather rare I guess. Maybe the images should not be loaded as a rectangular area. Imagine a polygon drawn around what should be displayed.

_images/polygon_shaped.png

One could imagine that sprites are tightly packed to save some space. In this case loading them as rectangles would generate some unwanted artifacts. I put together an example with hexagonal shaped tiles. The hexagonal shapes could be loaded as rectangles as indicated by the red and green rectangle. There is an overlapping area that should not be loaded into the sprite that is used (this would be an artifact). Therefore one could use a 6 sided polygon and only load the part within that polygon.

_images/polygon_packed.png

If a polygon is defined, only the part within the polygon will be loaded discarding the artifacts.