🏃Animation Editor

Introduction

The AnimationEditor is a tool which simplifies the creation and editing of AnimationChainList files (.achx files). AnimationChainLists are the standard file format for sprite animations in the FlatRedBall Engine. Note that since the AnimationEditor produces plain XML files, these files can be consumed in any environment, so it can be used for any type of game, not just FlatRedBall games.

Opening the AnimationEditor

The AnimationEditor is distributed along FRB in the FRBDK.zip file. For info on downloading the FRBDK.zip file, see the Downloads page. You can open the AnimationEditor by either:

• Double-clicking an .achx file in the FRB Editor. Note that if you have not set up the Windows file association for .achx files, you may be asked how to open this file. You can select to use the AnimationEditor.exe, which is located in the place shown in the next point:
• Or opening the AnimationEditor.exe in the XNA 4 Tools folder

You can also add a new .achx file to your FlatRedBall project in any Screen, Entity, or in Global Content Files:

1. Right-click on the Files folder in any Screen or Entity, or in Global Content Files

2. Select Add File -> New File
3. Select Animation Chain List (.achx)

4. Click OK

Troubleshooting the AnimationEditor

If you are seeing a popup that tells you that XNA is not available, then you probably do not have the XNA runtimes installed. The text for this error might look like this: System.IO.FileNotFoundException: Could not load file or assembly 'Microsoft.Xna.Framework.Graphics.dll' or one of its dependencies. The specified module could not be found. To fix this problem, install the XNA 4 redistributable: https://www.microsoft.com/en-us/download/details.aspx?id=27598 Once you run AnimationEditor.exe you will have an empty animation project.

Creating an Animation

To create an animation:

1. Click the + icon on the left-side of the window
2. Enter the name "Idle" and click OK

Next we'll add a frame to our animation. To do this:

1. Right-click on the newly-added Idle animation

2. Select "Add Frame"

Setting the Texture

Now we have an animation with one frame, but the frame does not yet have a texture associated with it. Textures are image files which are displayed by the frame. To add a texture:

1. Save this file to your computer.

3. Click the button for the "TextureName" property \
4. Navigate to where you saved the Idle.png file and select it

5. You may see a window asking you if you want the file copied. In most cases you do; however you may not if in the future you are working with textures which are shared between multiple files which are not in the same location.

You should now see your art in the AnimationEditor: \

Alternative - Changing the Texture

A frame's texture is displayed in two places:

1. In the TextureName propert in the property grid

2. In the texture selection drop-down

The drop-down can be used to change a frame's texture to any png file that is part of your FlatRedBall project. This can be easier than navigating to find the file on-disk, and can save you from accidentally selecting files outside of your project resulting in duplicate copies.

To change a texture using the dropdown:

1. Select the frame that you would like to change

2. Use the dropdown to pick a different file\
3. Once you have changed the texture, you may need to adjust your X/Y/Width/Height coordinates on the frame

Setting the frame using SpriteSheet values

The FRB editor provides a number of ways to specify the region of a texture which will be displayed by a frame. If you are using separate image files for each frame of animation then you will not need to change the region values. However, if you are using a sprite sheet, then you will need to adjust the region that the frame displays.

What is a sprite sheet? In the context of the AnimationEditor plugin, a sprite sheet is a image file which contains multiple frames of animation. Although not necessary, many sprite sheets arrange each animation frame in a grid, and all frames are spread out evenly.

First we'll cover how to create animation frames using sprite sheets. To do this in the AnimationEditor plugin, the frames must be evenly spaced out. The Idle.png file supplied above is evenly spaced out, so it will work fine for this tutorial. First we need to tell the AnimationEditor plugin that we want to use sprite sheet coordinates. To do this:

1. Set the combo box value at the top of the property grid to "SpriteSheet"
2. Find and select where it says <UNTEXTURED> in the leftmost menu area. You should then see an option for editing the ce