Animating sprites for videogames

Each development team has its methodology and techniques, usually tailored to the general needs of each project. As developers and designers, we always feel curious about how other people work in the sector.

In this post, we’ll explain how we face the animation process for characters, items or other graphics, using our own method which will be familiar for many people, while others may think it’s strange or particular.

Tools

For our debut project, Go Deeper, we esentially used two tools to design and animate all the sprites, from characters and enemies to items and backgrounds: Adobe Illustrator and Adobe Photoshop. Both are leader tools in their sector and we know and have been using them for more than 15 years. When we decided to face the artistic part of Go Deeper, we thought it was important to use tools we were comfortable with.

Process

1. Vector elements creation

Vector graphics are different from those created with bitmaps in that they do not depend on a particular resolution. They are fully scalable and easy to manipulate and edit, generating files with a very low weight. Recycling items between different sprites is easy by using this type of graphics.

Go Deeper‘s characters were created using very simple geometrical shapes, as you can see in the image above. In order to optimize the production, all the elements were designed with a level of detail adequate to a mobile game, where the dimensions of the screen are very reduced. As the graphics will be rasterized later, it’s important to work using the final size of the sprites.

2. Separating all the sprite elements

Before animating the sprite it’s also important to have a clear idea of what you want to do with it exactly. It will be necessary to group elements as independent parts, having in mind how they will be animated.

Plan ahead and separate each part of your design before exporting to Photoshop.

3. Exporting the elements to Photoshop

Fortunately, exporting elements to Photoshop couldn’t be easier. It will be enough with a simple copy-paste action to let Photoshop recognize every imported element as a vector graphic and convert them into smart objects that we’ll be able to scale and edit later. Copy and paste the elements on Illustrator, generating an independent layer for each one. Order them on the canvas, rebuilding the original graphic. We recommend you to copy and paste the full Illustrator composition in order to have a clear reference for each element’s position.

4. Frame-to-frame animation

Once all the elements are in place, we use the Animation panel in Photoshop to move them, creating as many frames as we need to represent the movement. In each frame, we will move the items so that played in sequence, they produce the desired animation.

Do not hesitate to constantly use the ‘Play’ button to see the result in real time and without any rendering waiting time.

5. Exporting the result

The final step is to export the animation once everything is in its place. To do this, we export each frame as 24 bits PNG files, creating a complete sequence for each animation, which will be included in the final project later. Although we use Game Maker Studio, the process is valid for almost any other game development framework. You can accelerate the export of frames by using Photoshop’s ‘Render video’ option:

However, we usually export every frame independently, using the ‘Save for web’ option because we detected a better transparency on PNG files. Most of the development tools will allow a subsequent control over the animation’s rythm, in case it needs adjustments.

Summary

Here you have a short video where you’ll see how we use the whole process explained in this post. It surely will help visualize everything! Hope you find it useful.

Do you want to see this process applied into a real project?

And what about you? How do you animate the characters for your games?