Combining Toon Boom Studio with XNA to create games

I will talk about my own experiences with the software, about what I was able to do and of course about integrating it with XNA.
By Catalin Zima

Over the last week or so, I had the chance to play around with Toon Boom Studio, which is a software for creating graphics and animations using a large range of techniques. I won't start to enumerate the whole feature set, which you can see in the video tour, or the detailed features list. However, I will talk about my own experiences with the software, about what I was able to do and of course about integrating it with XNA.

The first thing that needs to be said is the Toon Boom Studio is not just a software for drawing images, but has features designed specifically for creating animations, which lack in other drawing packages such as Photoshop, GIMP, or Paint.Net. So because they serve different purposes, you can't directly compare Toon Boom Studio with these tools.

The interface is nice and after a few hours of fooling around, and reading some tutorials, you get the hang of it and start being productive. After some experiments that are not really worthy of being shown, my first serious attempt was to try and draw the following image in Toon Boom Studio.

Creating Games

My favorite feature of Toon Boom Studio is the ability to take an image, and put it on the Static Light Table (semi-transparent background) so you can draw over it using the Toon Boom Studio drawing primitives. In less than an hour, I was able to create something similar to the source cat image, but all done with vector graphics.

Now it was time to animate it, and the technique that seemed easiest to me was the cut-out animation technique. In this technique, you can isolate areas of the image, creating body parts, and link them together to create a hierarchy of part, just like you would do a skeleton in a 3D modeling animation. Then, in order to animate, you simply set the keyframes with different position and rotation values for each body part, and Toon Boom Studio will take care of interpolating and animating your scene.

Since this was also a learning exercise, it took several hours, but in the end, I had the following animation: Considering it's my first jab at 2D animation, I was very satisfied with the results.

The whole cat drawing was based on someone else's art as a source image, so I felt like a little cheater :) This is why today I found one of my older “concept drawings” (if you can name it so), and decided to try and make the character in Toon Boom Studio.

Creating Graphics   Creating Animations

As you can see, my art skills are not something to be proud of. However, about 2 hours later, the result looked much better.

I'm sure a talented artist would have done this much faster, and with much better results, but from my point of view, it is a great progress. Some things I did to help me out:

  • all input images are the same size, and are rectangular
  • the output sprite will contain all input sprites arranged on a single row
  • the input files are all named similarly (cat1.png, cat2.png, …, cat14.png)

While definitely not an elegant solution, it did it's job, and I was quickly able to obtain the following image (click for larger size):

catWalk

The third option, which is the recommended one for a larger project, is to use a more complex program for creating sprite-sheets. You can either create one yourself, based on certain file formats you want to use internally, or around certain restrictions you want to impose on your engine; or you can use an existing one, such as Ziggyware's Sprite Sheet Creator (no longer available online). Note that if you go for this option, you'll have to follow certain conventions in your runtime code, imposed by your program used for creating the sprite-sheets.

That being said, we now have a sprite sheet with all the frames of the walking cat animation, and are ready to load this in XNA.

After creating a new XNA project, I read through Nick's article about Sprite Sheet Animations (no longer available online), and created the following class to hold all information needed for animations. For a detailed explanation, go ahead and read Nick's article.

  • class Animation
  • {
  • Rectangle[] frames;
  • float frameLength = 1f / 5f;
  • float timer = 0f;
  • int currentFrame = 0;
  •  
  • /// <summary>
  • /// Gets of sets the FPS of the animation
  • /// </summary>
  • public int FramesPerSecond
  • {
  • get { return (int)(1f / frameLength); }
  • set { frameLength = 1f / (float)value; }
  • }
  •  
  • /// <summary>
  • /// Gets the Rectangle containing the current frame of animation
  • /// </summary>
  • public Rectangle CurrentFrame
  • {
  • get { return frames[currentFrame]; }
  • }
  •  
  • /// <summary>
  • /// Creates an animation object
  • /// </summary>
  • /// <param name="width"> the total width of the input image</param>
  • /// <param name="height"> the height of the input image</param>
  • /// <param name="numFrames"> the number of frames in the sprite-sheet</param>
  • /// <param name="xOffset"> the X origin of the sprite-sheet</param>
  • /// <param name="yOffset"> the Y origin of the sprite-sheet</param>
  • public Animation(int width, int height, int numFrames, int xOffset, int yOffset)
  • {
  • frames = new Rectangle[numFrames];
  • int frameWidth = width / numFrames;
  • for (int i = 0; i < numFrames; i++)
  • {
  • frames[i] = new Rectangle(xOffset + (frameWidth * i), yOffset,
    frameWidth, height);
  • }
  • }
  •  
  • /// <summary>
  • /// update the animation
  • /// </summary>
  • /// <param name="elapsed"> seconds since the last frame</param>
  • public void Update(float elapsed)
  • {
  • timer += elapsed;
  •  
  • if (timer >= frameLength)
  • {
  • timer = 0f;
  • currentFrame = (currentFrame + 1) % frames.Length;
  • }
  • }
  •  
  • /// <summary>
  • /// resets the animation
  • /// </summary>
  • public void Reset()
  • {
  • currentFrame = 0;
  • timer = 0f;
  • }
  •  
  • }

Next, I created a class for the cat, holding a few members we need for the animation.

  • class Cat
  • {
  • Texture2D texture; //sprite-sheet containing the cat animation
  • Animation walkingAnimation; //animation object used for animating
  • Vector2 velocity; //movement direction
  • float movementSpeed; //movement speed
  • Vector2 origin; //origin of the image
  • bool isMirrored = false; //draw the image mirrored
  •  
  • public Vector2 Position { get; set; } //position on the screen

Nothing really special here… Maybe except the isMirrored variable. We use this because our image for the cat shows it facing left. So when we want it to move towards the right, rather than creating a separate sprite with the cat facing right, we mirror the existing sprite. Of course, you can't always use this trick (or a right-handed character suddenly becomes left-handed), but there are many cases when this trick is enough.

The constructor is straightforward, with some hard-coded values tweaked until I was satisfied with how things looked.

  • public Cat(Texture2D texture, int frameCount, Vector2 origin)
  • {
  • this.texture = texture;
  • //create a new animation object
  • walkingAnimation = new Animation(texture.Width, texture.Height, frameCount, 0, 0);
  •  
  • //tweak the FramesPerSecond and movementSpeed values until you’re satisfied with how things move
  • walkingAnimation.FramesPerSecond = 14 * 3;
  • movementSpeed = 256;
  •  
  • //reset position
  • Position = Vector2.Zero;
  •  
  • this.origin = origin;
  • }

For movement, input from both keyboard and gamepad is analyzed, and the velocity's value is updated.

  • public void HandleInput()
  • {
  • KeyboardState keyState = Keyboard.GetState();
  • GamePadState gamepadState = GamePad.GetState(PlayerIndex.One);
  •  
  • velocity = Vector2.Zero;
  •  
  • if (gamepadState.IsConnected)
  • {
  • velocity = gamepadState.ThumbSticks.Left;
  • velocity.Y *= -1;
  • }
  •  
  • if (keyState.IsKeyDown(Keys.Left))
  • velocity.X = -1.0f;
  • if (keyState.IsKeyDown(Keys.Right))
  • velocity.X = 1.0f;
  • if (keyState.IsKeyDown(Keys.Up))
  • velocity.Y = -1.0f;
  • if (keyState.IsKeyDown(Keys.Down))
  • velocity.Y = 1.0f;
  • }

In the Update function, we first look which way the cat is facing, and update the value of isMirrored. Then, if the cat is moving, we update the animation and position on the screen.

  • public void Update(GameTime gameTime)
  • {
  •  
  • //mirror the cat if we are moving towards the right
  • if (velocity.X > 0.1f)
  • isMirrored = true;
  • if (velocity.X < -0.1f)
  • isMirrored = false;
  •  
  • //normalize velocity vector
  • if (velocity.Length() > 1.0f)
  • velocity.Normalize();
  •  
  • //get elapsed seconds
  • float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
  •  
  • //only animate if we are moving
  • float speed = velocity.Length();
  • if (speed > 0.0f)
  • walkingAnimation.Update(elapsed * speed);
  •  
  • //update position
  • Position += velocity * elapsed * movementSpeed;
  • }

Finally, the Draw function takes as a parameter the active spriteBatch, and draws the current animation frame using it. Here we can see how to mirror the sprite using SpriteEffects.FlipHorizontally.

  • public void Draw(SpriteBatch spriteBatch)
  • {
  • SpriteEffects spriteEffect = SpriteEffects.None;
  •  
  • //mirror the image if necessary
  • if (isMirrored)
  • spriteEffect = SpriteEffects.FlipHorizontally;
  •  
  • spriteBatch.Draw(texture, Position, walkingAnimation.CurrentFrame,
    Color.White, 0.0f, origin, 1.0f, spriteEffect, 1.0f);
  • }

With this class created, using it in our Game class is trivial. Simply load the texture in LoadContent() and create a Cat object, update it's input and internal state in Update() and draw it in Draw().

  • public class Game1 : Microsoft.Xna.Framework.Game
  • {
  • GraphicsDeviceManager graphics;
  • Cat cat;
  •  
  • public Game1()
  • {
  • graphics = new GraphicsDeviceManager(this);
  • Content.RootDirectory = "Content";
  • }
  •  
  • protected override void LoadContent()
  • {
  • spriteBatch = new SpriteBatch(GraphicsDevice);
  •  
  • //load cat texture
  • Texture2D catTexture = Content.Load<Texture2D>("catWalk");
  •  
  • //create cat object
  • cat = new Cat(catTexture,14,new Vector2(64,128));
  •  
  • //place it in the center of the screen
  • cat.Position = new Vector2(400, 300);
  • }
  •  
  • protected override void Update(GameTime gameTime)
  • {
  • // Allows the game to exit
  • if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
  • this.Exit();
  •  
  • //update cat’s input
  • cat.HandleInput();
  • //update cat’s state
  • cat.Update(gameTime);
  •  
  • base.Update(gameTime);
  • }
  •  
  • protected override void Draw(GameTime gameTime)
  • {
  • GraphicsDevice.Clear(Color.CornflowerBlue);
  •  
  • spriteBatch.Begin();
  • //draw cat
  • cat.Draw(spriteBatch);
  • spriteBatch.End();
  •  
  • base.Draw(gameTime);
  • }
  • }

If you run the game now, you'll be able to move the cat around the screen with the keyboard or the mouse. As you can see, getting an animation from Toon Boom Studio into an XNA game is not difficult at all.

I hope you enjoyed this short post, and if you did, you can download the source for this sample here

Download the project file here: ToonBoomAnimationSample.zip