Delving Inside Wizard’s Tower, Part 3

This is Part 3 of a three part behind-the-scenes development series for Wizard’s Tower, my free game for Windows Phone.  Part 1 focused on the physics that drive the gameplayPart 2 focused on how the levels were created in GLEED2D, a free, generic level editor.  Finally, Part 3 will now focus on how the animations were created using Anime Studio Pro 8, and how those animations were then brought into the game.

First, the download link for Wizard’s Tower.

I also have a pay version here, without advertisements, for .99 cents.

What is Anime Studio?

The product page in the link above provides a detailed feature list, but in a nutshell, Anime Studio is a vector-based animation suite.  Although it can do frame by frame animation, it’s definitely not the preferred way to animate in the software.  It’s also much faster to animate using vectors because you simply push and pull points in your objects over time to make stuff happen.

Anime Studio also has a full inverse kinematic (IK) bone system which allows you to easily create limbs with joints, and animate them moving around and bending.  Pics or it didn’t happen, so observe the animation below that I exported to a Flash object.

If you’ve been reading the previous two articles or checked out the game, you will recognize Gork, the hero of Wizard’s Tower.  Anime Studio can export to a variety of formats.  To get Gork into the game, I exported the 14 frame animation to a PNG image sequence.  PNG will keep any transparency in your animation intact.  Please note I’m using the PRO version of the software.  The basic version does NOT support exporting to an image sequence, although you can manually export frame by frame – a tedious process.  Below is frame 14 from the sequence.  Note the nice shading that the exported Flash animation unfortunately does not support.

Once I have my individual frame cels rendered out, I load them all up into Photoshop.  Inside Photoshop, I arrange all of the individual frames in order into one sprite sheet.  See below.

SpriteBatch and Sprite Sheets

In Windows Phone games, SpriteBatch.Begin() and End() calls are CPU expensive.  If you are drawing a LOT of sprites, each with their own Begin and End call, your app will bog down badly.  To create the smallest amount of Begin/End calls as possible, I put all of my sprites and even whole animations into one huge sprite sheet, all together.  In this way, you can make one SpriteBatch.Begin() call to draw different sprites.  Since they are all from the same texture, no texture swapping is necessary by XNA, and the batch drawing process can blit blast them out really fast and in large quantities.  My game engine has functionality to find individual sprites and animation strips by the name given to them in my custom sprite sheet editor I wrote.

My sprite sheet editor is pretty simple.  You drag and drop sprites into the app and move them around, arranging them so they collectively consume the smallest amount of space as possible.  For convenience, edges of sprites snap to each other to make this process even easier.  Then it exports what you see out to one big PNG image that is loaded into my game.

An XML file is also generated which contains each unique name given to the sprites, along with the Rectangle which holds their position and dimension within the output texture.  My game engine uses this XML file to create a lookup table so it can find any sprite by name, along with its location and dimensions within the sprite sheet.  My Sprite2D class can then reference its sprite by name to get the proper Source rectangle required by SpriteBatch.Draw().

Anime Studio Pro

Every cel animation in Wizard’s Tower was created with Anime Studio, right down to the little torch flames.  Anime Studio proved itself to me in my previous game, Pirate’s Plunder, and it’s now a permanent fixture in my development toolbox.

This screen shot shows the main interface of Anime Studio with Gork’s walk cycle loaded up.  I highlighted his right arm so you can see the two bones that drive that arm’s animation.  To animate his arm, any area on either of the bones can be clicked on and dragged around.  The bones will bend correctly at the joint, depending on whether you grabbed at the end of the bone or at the joint itself.  It’s very intuitive.

Along the right is your Style toolbox and the Layers UI.  The left is populated by the drawing and animation tools.  The Tools UI is context sensitive, so only the appropriate tools for what is selected are ever available.

If you’re thinking it resembles Photoshop a little, you’re right.  Even some of the styles mimic Photoshop’s – glows, shadows, and gradients, for example.  Everything in Anime Studio is vector, though, although you can import bitmap images from a variety of formats.  Bitmap images can also be animated and manipulated.  A bitmap can even be rigged with bones and warped around.

Anime Studio has a huge community following, and since the software has a well documented plugin architecture, there are dozens of very useful (and free) plugin tools created by the community.

The real power is in the vector tools.  Each point in your vector shapes can be animated over time – individually, in groups of points, or however you see fit.  It also has some pseudo-3D tools that allow you to rotate the camera plane in 3 dimensions to create perspective effects.  Styles can be saved for later and applied to new shapes you create (and animated).  Effects can be applied to shapes, and any parameter of the effect can be animated.

If you’ve ever worked with vectors before (Inkscape, Illustrator), Anime Studio has many of the tools you’d expect from vector creation software.  With Anime Studio, however, literally every aspect of your vector shapes can be animated over time.  Need to animate the width of a shape’s stroke only at a specific point on the shape?  You can do that.

There are even tools to assist in creating a “cartoon” look, such as automatic toon shading and adjustable auto-outlines around your shapes.  To top it off, the software has tools for creating shadows, motion blur, and complex vector masking.

Animating in Anime Studio beats my old method (and here) to a pulp, hands down.  I highly, highly recommend this software to any Indie game developer.  It will really raise the bar of your work, and make it easy to do so.

About GlowPuff

GlowPuff is a Windows Phone 7 developer focusing on XNA game development.