An animation editor

In moving this game out of the Unity game engine and building it with SDL, OpenGL, and C++, I immediately discovered how much more tedious and time-consuming it was to setup simple things like Animations, tilesets, tilemaps, etc.

In order to make my life easier, especially for this game which has a ton of animations for both the British and German troops, I created my own super simple 2D Animation editor, using ImGui.

Let's take a look!

The basics

For starters, the animation editor shows all the frames that can be used in the clip. These frames can be reordered as needed, and even completely stripped out. The FPS can be set, and you can tap through each frame individually:

When an animation clip is loaded, the frame is rendered on the the right to zoom in/out of.

When a change is made, it can also be reverted or reapplied, and a save button appears for you to save those changes:

Creating a new animation clip

To create a new animation clip, I simply hit the create button, which brings up another tool I had to create, my janky file navigator ;-). 

That file navigator is used to select the source folder containing the sprite datas or textures to use in the animation clip. After doing so, a new animation clip is started for us to begin editing:

Editing an existing animation clip

To edit an existing animation clip, I simply hit the open button, which again brings up my custom file navigator tool that can be used to load the desired clip. After doing so, the clip should appear for us to make edits on, as seen here:

Deleting an animation clip

I can of course also delete an animation clip as seen here:

How is the animation clip saved though?

When an animation clip is saved, it's saved as JSON, as seen here:

{
    "fps":10,
    "frames":[
        {"textureOrSpriteDataIndex":0},
        {"textureOrSpriteDataIndex":0},
        {"textureOrSpriteDataIndex":0},
        {"textureOrSpriteDataIndex":1},
        {"textureOrSpriteDataIndex":2},
        {"textureOrSpriteDataIndex":3},
        {"textureOrSpriteDataIndex":4},
        {"textureOrSpriteDataIndex":5}],
    "loop":true,
    "texturesOrSpriteDatas":[
        1410981176456111833,
        1410981176341145016,
        1410981176382584475,
        1410981176267339130,
        1410981176309057373,
        1410981176194090556
    ]
}

That is the JSON for the idle standing animation clip on the British troop. Going line by line:

"fps": 10

This stores how fast the animation is - it's the frames per second: the higher this is, the faster the animation will be.

"loop":true

When true, the animation will replay itself over and over until the end of time. For the idle standing clip, we want that to be true because we want the troop to keep idling until told otherwise, like this:

"frames":[...]
"texturesOrSpriteDatas": [...]

These 2 arrays work hand in hand. "frames" stores all the frames to cycle through, and in what order. Each entry in the array is of the format: {"textureOrSpriteDataIndex": number}. This format tells what texture or sprite data to use for that given frame. 

That info is then combined with the texturesOrSpriteDatas array to match the correct texture or sprite data to render.

So for example: 

The first entry, {"textureOrSpriteDataIndex": 0}, tells us to use the first entry inside of the texturesOrSpriteDatas array. So when the game runs this animation, it will use the textureOrSpriteData with guid 1410981176456111833 for the first frame.

You'll also notice that there are dupe entries in the frames array. 

There's definitely a way to compress those dupe entries into a single entry for further optimization, but what those dupe entries are basically saying is to show the textureOrSpriteData with guid 1410981176456111833 for 3 frames, allowing us to achieve a hold this specific texture or sprite data for x amount of frames.

This holding feature is especially useful for say...

This melee animation, where I want the british troop to hold the stab for a certain amount of frames to make the melee a bit more impactful:

Or this throw grenade animations, where I need the troop to wait for the grenade to come back down:

Some more advanced features

Beyond the ability to hold a specific texture or sprite data for x amount of frames, I also added these additional features:

Linking other animation clips:

The ability to link other animation clips is especially useful for small projectile effects like a bullet casing flying after the troop fires their weapon, as seen here:

Basically, by having that ammo casing be its own animation on its own GameObject, I can immediately have the troop start running and the bullet's x position will not move with the troop, which would look pretty weird otherwise.

Firing events:

Firing off an event at a specific frame is especially useful for things like the troop firing their weapon, so that their target knows they've been shot at and enters the death to gunshot state, using an animation like this:

Linking an audio clip:

The ability to play an audio clip directly from an animation clip allows me to easily play sounds like a shooting effect, reload effect, or explosion effect without needing specialized code for each of those cases, as seen here:

And, as mentioned before - Holding a specific texture or sprite data for x amount of frames

Closing remarks

That's all for today.

In the next devlog, i'll be showing the tools I created to make working with tilesets much easier, which were used to setup the battlefield tilemap.

Thanks for stopping by!