As it may (or may not) become clear in the coming months, I'm attempting to build a fighting game engine with... *checks notes* ...zero experience, save for a cursory knowledge of state machines.

One thing I do know for certain is that character actions can become very complex, due to the nature of hitboxes, hurtboxes, and pushboxes. I mean, just look at Guile's frame data for SSF2T. Let's take one frame from his standing sobat as an example:

The blue boxes are his hurtboxes, the green box is his pushbox, and the red box is his hitbox.
(You can read more about the Super Combo SSF2T's Wiki Diagram Conventions here)

Pretty simple to understand once you've seen it, right? However, that's just one frame of one attack animation. I gotta do this for every frame of every animation. 😰 Not to mention assigning damage values for each hit/hurtbox... Sheesh. To streamline the process, I need a visual tool that can output the frame data in an easily parsable format, like JSON. I know of one tool that can do that, but, uhhhhh... 🤔

This is where Tiled comes in.

From their About page: "Tiled is a 2D level editor that helps you develop the content of your game. Its primary feature is to edit tile maps of various forms, but it also supports free image placement as well as powerful ways to annotate your level with extra information used by the game. Tiled focuses on general flexibility while trying to stay intuitive."

That, uhhhhh, doesn't sound like what I need at all. After all, want to edit a character's frame data, not a level. Still, having used Tiled for previous experiments in game dev, I know it has a pretty decent tileset editor. After a little bit of experimenting, I stumbled onto a workflow that works for me.

Disclaimer: I'm currently using Kim Kaphwan sprites from Fatal Fury F-Contact for the purposes of engine development. I plan to work with a pixel artist in the future! 😅

I created a tileset based on a collection of images. Rather than using map tiles, like you would when developing an RPG, I'm instead using each frame of Kim's axe kick animation as "tiles". It's a bit weird, but it works for me. Let's dissect this screenshot a bit. At the top, you can see each sprite for this animation, a.k.a. all of the "tiles".

Below that, to the left, you can see the Properties of the selected "tile". This panel is contextual; you can set also set the properties for the entire tileset, or even specific collisions. As you can see, I'm declaring some custom properties, such as whether this frame can be cancelled into something else, like a move action, or another attack. This will eventually play into a combo system, later on. I, uhhhhh, haven't gotten there, yet... 😅 I'm also declaring how many frames this specific animation frame will last.

Moving along, to the right of the Properties, you can see the Tile Collision Editor. This is where I define my hitboxes, hurtboxes, and pushboxes. Since I'm using Tiled's custom classes, each box is color coded based on the class. Each one of these boxes can also have their own Properties, like so:

In this case, since I'm editing a hitbox, I have "damage" values in the form of "velocityX" and "velocityY". Really, all this is doing is setting how much the ball's velocity will increase when this attack hits it. This may change in the future, but it works, for now. Did I forget to mention I'm making a fighting pong...? It's, uhhhhh... nevermind, I'll get to that in future devblog...

Once I do all of my box editing, I can export this "tileset" as a JSON file:

All of my frame data is under "tiles.objectgroup.objects". I need to massage this a bit so it can be used as a proper Lua table, but other than that it works pretty well.  In my game code, I define an image table for each animation, and I use my handy dandy JSON file to provide all the necessary data for each frame.

I've grown pretty comfortable in this workflow, so unless something very specific comes out that satisfies all of my use cases, I'll be sticking with Tiled: the right best tool (that I've found) for the job™.