Personal Blog - Basic Sprite Tutorial

This is more or less a poor tutorial about how I put together a spritesheet. For drawing spritesheets is one thing, but ensuring that each frame is in sync with the other frames is something else entirely. I'm going to stress that there is probably a quicker and easier way then the way I'm going to be showing today, but providing a starting point for further exploration is beneficial in itself, so~

This will also feature some animation principles which I think will prove useful and informative.

Starting out

Right. So. Sprites. The first thing I'm going to say is to start out with considering the size of your game window and how large you want your sprites to be. Working with pixel art, a single pixel is obviously going to be tiny.

As you can see, this is my first sprite drawn with single pixels. Far too small.

 In my own effort, I decided to work with 3x3 pixel squares to maintain a simple look while increasing the size just enough to make the sprite look right. You don't want to make your sprites TOO large for your game window size, otherwise you'll be limiting how much screen the player can see beyond the player sprite (and enemies, if applicable)

Still not very large, but in a 800x600 screen, it'll be the right size.

Colour is very important to consider also. If you think about Mario or Megaman, those sprites feature very simple but contrasting colours, which is important to stop a sprite looking like a block of pixels rather than a character. I'm using largely monochrome colours, but I've made the shades distinctive enough that they don't blend together.

Starting to make your sprites

The next thing to consider before getting into the work itself is to consider in advance WHAT sort of actions your game will allow the player to perform. In this example, the player is able to walk and jump, as well as be hit by enemies or the environment.

At this point, I wouldn't be too precious about how aligned your sprites are. I tend to make copies of one sprite as a measuring point for height, and a line to keep the sprites on an even level... but that is about it.

An example of drawing most of the sprites I'll be using in my project. Also included are earlier iterations of the Bill Dup sprite.

Another pro tip at this point is to break up your sprites into seperate body parts on different layers so that you can experiment and recycle different pieces of body. This will save you time in the long run.

Animatimg Your Sprites

Ooooh. Animating. Because a single picture isn't going to be good enough in most games. This is where I will be hitting on some animation theory, so buckle up.

In terms of traditional animation, a rate of 24 frames is the standard for movie quality animation while modern standards mostly hover around 12 frames per second. Depending on how fluid and how quickly you want your animated sprite to be, you can easily get away with even less frames... for example, in the original Super Mario Brothers, Mario and Luigi only have three sprites to represent their run cycle.

In my case, I'm sticking with six frames of animation. Animated at a sufficient speed, it will still look fairly smooth without too much work. One must also keep in mind that making individual movements vary too much will make the sprite look like it is moving far too fast. Equally important is to remember to treat the first frame of your animation as also being the seventh frame. Because after the sixth frame, the loop starts all over and so to keep your animation smooth it should flow back to the starting image. Gosh I can't write.

This is also where having copies of seperate pieces of your character will come in handy. And again, I don't consider this point to be especially important in terms of syncing all of the sprites into precise frames. You will want line to keep your character's level consistant, but that is about it.

Animation in progress.

 And yes, the above should show why it isn't that important to keep your sprites in frames just yet. Some will take up more space than others. Hopefully it also shows why it is a good idea to draw an individual sprite for each state before you try and animate them - you have an automatic starting point to use as a basis for the rest of the frames you'll be animating.

Making Consistant Frames

Because it is really easy to end up with each picture accidently jumping left and right during an animation cycle.

My way of countering this is to find which of my sprites takes up the most space, which will then become the standard point for the rest of the sprites to fit into.

In photoshop, I cut and paste this sprite into a new file, and then changed the canvas size to the size I want to animate at. In this case, I'm sticking to 160x160 pixels. The sprite should remain in the centre of the file, and voila. I change the colour of the background so I can place multiple copies of the same image into rows and columns.

Then it becomes a case of aligning the other sprites over the newly created template. In my case, I mostly used the head as the basis for where I wanted to place each sprite.

This isn't 160 by 160. I can't seem to open the file with the correct size, but the principle remains the same.

With this done, I can then delete the template and be left with a clear background and all my sprites perfectly placed so they don't bounce about between frames. Success!

The mostly finished spritesheet

Of course, now you can stick it in game and see how it animates. You may find some small mistakes that need correcting or iterating on, but you know what to do now, so. V: