Hi Pure Bang Blog readers! My name is Will Gallagher, and one of the things I do here at Pure Bang Games is art and animation. As a technically minded artist, I’m always on the lookout for new things to help the company in regards to the asset pipelines.

Recently I funded a project on Kickstarter because I’m a huge hipster, but mostly because I thought the project was going to make a big splash in the 2D game development sector. As of the time of this post, 1,844 other people agree with me and the project has been successfully funded to almost $50,000 over its intended goal.

The project in question, Spriter, is a 2D modular animation tool developed by BrashMonkey. For some time, modular animation has been an expensive trick used in 2D games with bigger budgets. Now a full suite of modular animation tools is available to any developer with twenty-five bucks to spare.

Any game that is drawn in 2D will probably also have animation, but the distinction here is ‘modularity.’ A lot of 2D games in the independent world have always used sprite sheets because they’re cheap to create.

Sprite sheets are big images (or textures) containing multiple frames of animation that can be rendered in pieces over time to create the magical illusion we call animation. Figure 1 shows a standard sprite sheet.

JHpXF

The problem with the sprite sheet method has always been size and an unfortunate level of inflexibility. Sprite sheet animations can be layered, but generally speaking even small changes need to be recompiled and often require a lot of extra work in the name of mistakes and changes of mind. Sprite sheets also often repeat parts of images over many frames with very little change, so the file sizes of these textures can become quite large as animation complexity increases.

Now, here comes Spriter to save the day.

Spriter allows an artist to create modular animations by translating and swapping pieces of an image. If you are familiar with Flash or Toon Boom Studio, Spriter will make perfect sense because it uses a very similar tweening and symbol system. If not, just know that the animations have gone from a series of baked-in frames to single images stored in different positions.

The modular animation is rendered in-game by displaying each image at its stored translation values over each frame. This generally allows for a smaller asset footprint because there is no redundancy. The animation information is stored as a set of values in an XML file. When using sprite sheets, there need to be separate images for each possible frame of animation, even if there is little change or even no change in some pieces of the object. Modular animation allows an artist to break up objects into pieces and only make changes that need to be made each frame.

Figure 2 shows the necessary images required for the same animation using each technique. In this example the position, rotation, scaling, and tint will all be stored as XML values by Spriter instead of rendering each individual frame.

TPLXN

If you’re familiar with games like Rayman or Castle Crashers, you’ve seen modular animation in action. So why are sprite sheets still used so frequently by independent developers?

Until Spriter came along, if a studio or development group wanted to have a modular animation engine, they would have to write the tools themselves. Usually this involves some extension of Flash exporting, but sometimes it’s something a lot more involved like the UbiArt Framework. Writing tools costs a company a lot of time, and it’s less cost efficient than paying a lot of artists to export PNG sequences of their animations and re-package them into sprite sheets using existing free tools.

However, as previously stated, sprite sheets are costly in file size because there are so many large images required.

So, Spriter is going to open the floodgates for a whole new wave of developers to easily and cheaply get their hands dirty with modular animation, and it’s probably going to result in some very awesome looking games given the time savings. With features like adding variable changes and hit-box regions to frames, which are then exported in the animation’s XML, there’s even pressure taken off the programmers to some extent.

Thinking ahead, I’d like to see a tool (or a feature of Spriter) that combines the image loading benefits of sprite sheets with the low asset footprint benefits of modular animation. For instance, an artist might load a compiled sheet of pieces into Spriter instead of whole frames, then choose which section of the sheet they wanted to animate. This would reduce loading times because pieces of animations could be loaded as whole textures instead of individually, yet the engine would still see the benefit of loading less overall because of the loss of redundancy via modular animation.

In conclusion, if you can’t tell, I’m excited to start using Spriter and see other people using Spriter. I think it’s going to shake things up in 2D the game development world. If you’re an animator or 2D artist with any time saving tips, tricks, or tools, I would like to hear about them. Thanks for reading!