SpriteSheet and Animation

Introduction

Hey fellas, welcome back to another blog today. I am going to tell you how you can use SpriteSheet in Mini Micro.

So let's dive in by first understanding what a SpriteSheet is and then implementing one in Mini Micro.

SpriteSheet

A spritesheet is basically a single big image that contains multiple smaller images(aka sprites) used in 2D games.

The images contained by the sprite sheet are frames of individual animations of a sprite.

Let's say our game has a zombie sprite with the following animations:

• Hit (When it attacks the player)
• Hurt(When player attacks it)
• Die
• Walk
• Idle

Let's suppose each animation has 3 frames. So there are a total of 15 frames (Number of Animations * Frames in each animation)

Now, saving these 15 separate frames in separate image files is chaotic; your file system would either look complicated or have deep branches.

And let's say your each animation has more frames and your sprite has more animations, that is just impossible to imagine.

That's where spritesheets save us, all of your sprite animations in 1 single image. Even sometimes you can adjust most of your game's graphical sprites into 1 single image(But you don't need to do that)

Sprite sheets are mostly used in 3 ways:

All Your Games Animated Graphical Assets into 1 image

• Looks very complicated
• Gives sensations of suffocation
• Is the worst of all ways. (My opinion)

Per Sprite

Let's take the previous example of a zombie sprite. In this method, we would store all the animations of the zombie sprite in one image.

Suppose we have a player too in the same zombie game. Now we would create a new sprite sheet for our player.

In short, every new character in the game would have a different sprite sheet

I myself use this method

Per Animation

Fitting into the old example, this time each of your animations would have a different Sprite Sheet, like a Different Sprite Sheet

In this case, your filesystem would look like a chaos of branches. This method is the closest method to the NON SPRITESHEET way of handling animations in-game.

Implementations in Game Engine.

Most game engines of the time slice a part of your spritesheet (frame) and use it.

That's what is also done in mini micro.

In Mini micro file.getImage returns a sliced version of the image after taking the following arguments

• left
• bottom
• size_x
• size_y

Using a for loop, the functions can be repeated for the number of frames you have to extract.

The returned images can be stored in an array to keep the grouped images

These returned images can be used to play animations (Playing animation is a topic of someday else)

How do I create sprite sheets?

setSheet = function(frames, array, left, bottom, size_x, size_y,  file)
    for i in range(0, frames-1)
        array.push file.getImage(left + i * size_x, bottom, size_x, size_y)
    end for
end function

I use the following function in my library. This function helps me create sprite sheets faster and easier.

Outro

So guys, that's it for spritesheets. Drop down your thoughts/doubts in comment section till then stay awesome and bye.