Fight – Collect – Upgrade

2D Animations

Leave a comment

So games have a lot of animations. Kinda goes with the territory. One thing our project needed at some point was a few polished animations, and until recently, we’ve not had the capability to do so. All that changed with a couple of days of work, when the 2D animation component was created.

Unity has some easy methods built-in to assist with animations, the main task though was to take those functions and abstract them so that the artists could understand them. Using Unity’s systems, I created two different abstract systems for animations, one designed for power, the other designed for simplicity.

The first system was designed to give an animator a great degree of flexibility when designing animations. The system consists of an object in code called Spritesheet, which is designed to take in a texture (.jpg file, .png file, etc.) of the entire sheet itself, the number of rows and colums that the spritesheet will be equally divided into, and a series of AnimationInfo objects (which will be discussed later).


The system will automatically divide the spritesheet into the specified number of rows and columns and allow the user to select sprites by giving the number of the row and column in which the sprite resides. This abstraction allows the user to interact with the spritesheet as if it was a spreadsheet in Excel or similar, where each cell holds a part of the sprite. This allows the game to load in only a single spritesheet for all of a character’s animations.

The AnimationInfo structure holds information about a SINGLE step in an animation. It holds values for the row, the column, and the amount of time in seconds (you can use a decimal number for this) for that particular sprite to display. The way this is used for complete animations is by linking them together. For example, the animation data for the NES character Mega Man’s running animation (which was chosen for its simplicity) can be illustrated as follows:


This allows the spritesheet to use only three columns and one row, despite the animation being four sprites long. The system of using metadata allows you to keep filesizes down while simultaneously boosting usability.

Additionally, the Spritesheet class can take in information for multiple animations. So for example, you could have animation information for idling, running, firing, etc. They’d all call on the same sprite sheet for their data, and switching between animations is fast and easy.

The simple version of this system takes things even further and is used for simple single animations. This allows the user to specify:
a spritesheet as usual
the number of columns (assuming the sheet is only a row large)
a series of numbers specifying the order of sprites to use
a series of numbers specifying how long each sprite is to be displayed

This simplified system will simply loop through the order of sprites, displaying it for the amount of time specified. The Mega Man example in this case would look like this:
columns = 3
order = 0 1 2 1
times = 0.4 0.4 0.4 0.4

This is by far the simplest way to utilize the system for simple animations. However it’s still worth knowing that the system was also designed to support more complex sprite animations as well.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s