Two weeks ago, in my latest post, I mentioned a list with some things I wanted to know about. One of these things was 2D animation using sprites, and the way I did it may not be the most optimal and easy way to do it, but for once I did it from scratch, by moving every part of the character by hand and redrawing what was needed frame by frame. On the other hand I can say every animation I worked on wasn’t very complicated, mainly due to the short time available to finish them.
There are some things you should know before start moving arms and legs. Your game will update the screen several times per second, based on the machine specifications where it’s being executed. This is called framerate, and since it is not equal between machines, a fixed time between tour animation frames will be needed. If you update your animation on each game update, your animation will show faster than light in newer machines and slower and sloppy in the older ones, even if the machine’s hardware is enough to run your game. In my game this is implemented with a constant called “millisecondsPerFrame”, which stores a fixed time in milliseconds (200 in my case). The game will update the screen as fast as possible, but the animation frame won’t change until the actual frame has been active for at least the time stored in that variable.
This amount of time is the base for your animation, every frame should be designed to be active that amount of time, and changing it while creating your sprites may end up with huge problems. The best way is to test which framerate fits your game using prototype textures and animations, and once it’s done, leaving the constant unchanged during the whole development. It’s the Holy Constant that rules your game graphics!
Another topic to keep in mind while animating a model is how many frames we should create. In my case I always try to create as few as possible. You should create a frame for each noticeable change in the model, considering how it should feel: for a smooth transition, it’ll need more frames, while a sharp one could be done by a few.
For example, if we’re animating a bouncing ball, we can choose from a slower and smooth animation or a fast and sharp one only by creating four frames more for the slower one:
Let’s move it
For this project I created every frame from scratch, using only Photoshop as main tool, even though this may not be the faster and optimal way to work. I haven’t tried any other alternatives like 3D flats with textures in 3D software like Blender or Maya. Feel free to make a comment with your thoughts about any other 2D animation process you know! maybe I’ll learn about it for the next project.
The first step is drawing the full character in a base state. He can be as complex as you want for your game, using vector graphics or maybe pixel art, but in case your choice is not pixel art, try to create your base character in a document with a high pixel per inch rate and a good size, as much as your computer can handle.
Yeah! you have your main character yet? Time to slice him into pieces! That may hurt a bit, but it’s going to make everything easier from now on.
Make some cuts on your character’s joints and give some space between them. There are several tools to achieve this in Photoshop, like the lasso tool, or the ellipse marquee tool, but in mi opinion the pen tool is the best option. Check this link if you want to know how it works: Pen tool tutorial!
At this point you will be in need of a huge amount of patience. For each frame you have to move every part of your character to the correct place, and sometimes, redraw every joint that not fits well. Your character sheet will need 40 frames? well, you just need to create 40 different puzzles using the slices as pieces. I told you, patience is the key to success.
If your Photoshop is not so old, you can use the timeline feature through the Window menu -> Timeline. You’ll see a frame where you can create frames and play them, which is a useful tool to test your process and tweak every position without getting the texture into your game. Here is a timeline tutorial if you’re having problems dealing with it.
Once you have every frame, you’re almost there. Put every frame in a sprite sheet. I’m usually using a grid, mainly because it’s easier to code, but there are some other options that optimizes the document sizes but makes it hard to code, like the angry bird example:
And there it goes! Your spritesheet is finished and ready to be included in your project. As I said earlier, this way may not be the faster way, and there are some tools that may help you at some point:
See you in the next article and feel free to share what you want with us!