Active Frames in a sprite-based 2D Fighting Game in Defold?

I’m working on a 2D fighting game, and if you’re familiar with the genre (Street Fighter, Mortal Kombat, etc.), every attack animation in these games consist of 3 stages:

Start-Up > Active > Recovery

This is important because only the “active” frames cause damage to opponents. (Example: the full extension frames of a kick animation - if it hits an opponent earlier, it’s both “unfair” and also looks incredibly odd because the opponent would be hit before the foot even touches them.)

In Defold, the hacky way I’m currently implementing this is:

  1. player input triggers a “play_anim_startup” animation using sprite.play_flipbook – the complete function then triggers…
  2. a “play_anim_active” function, which changes state to do damage to opponents and shows the “Active” frames using sprite.play_flipbook which then triggers…
  3. a “play_anim_recovery” function, which changes state back to not doing damage.

It “works” but as you can imagine, it’s also incredibly cumbersome as the move set grows in this project since each and every attack is represented in a sprite atlas as “attack1_startup” (with only its startup frames), “attack1_active” (which only its active frames), and “attack1_recovery” (with only its recovery frames.)

In other words, every attack animation consists of three animations.

I’ve looked at some other projects in similar genres like the “Slasher” project in the asset portal and the “Librarian Barbarians” fighting game, but after hours of studying the source code of those projects, I can’t seem to understand what exactly they’re doing to achieve this without splitting every attack animation into three separate animations.

I’ve also searched every term I could think of here that could address this but didn’t find a clear indication of what approach to take with this.

Most of my experience has been on other engines and I’m still new to Defold, so I apologize if the approach I’m searching for is incredibly obvious and trivial.

Any help would be greatly appreciated!

I don’t have a full answer for you, but are you familiar with the sprite cursor?

Getting/setting the sprite cursor might be a key part of your solution.

1 Like

Short answer - I don’t split the animation, but time the attack mechanics independently of the animation. Long answer sent as a DM.

I very much agree these animation states, start-Up > active > recovery aka:( Anticipation>>Action>>Follow through/accent ) are very important in lots of games, specially in competitive fighting games which the animation will not only look better it also brings more strategy to the overall game dynamics.

If we take a closer look at your issue it seems very reasonable to separate these animation states and might be worth the work, although we should ask why? Does your game need this much control of these states and what are the benefits of separating animation state? Is it because you would like to use only one state “active” to enable damage to opponents?

If so, one possible way to simplify the process I would think about would be to bring these animations together into a single animation. Using a trigger for damage that you can enable/disable and set position according to attack/direction. And at the start of the attack you could use something like a timer in which you can enable and disable the attack trigger in sync with the action part of your animations that you want to inflict damage on opponents. Or something similar.

By speculation I can see a benefit from your current system would be if you want finer control on timing every attack state when balancing each fighter & attacks etc. This might be overkill for your situation though.

Thanks for your help! Also, based on a quick search of Mortal Kombat frame data, it does appear that they also only used one active frame per move (except for things like jump kicks/punches obviously.)

Not 100% sure if that’s accurate but the effect seems correct.

Also, in case anyone else is working on a game like this: after studying a few 2D fighting games frame by frame, from the original SF2 to UMK3, they all have their first active frame about 3 or 4 frames after the frame where the animation looks like it would hit.

Meaning the hitbox of the attack is purposely a few frames later than the first animation frame that appears to connect with an opponent.

This is probably to ensure that the reaction doesn’t look telegraphed (eg. opponent begins getting hit too early) which could happen if the hit registers on the very first frame that an attack connects.

This might apply to other action genres too but I just looked at Street Fighter II, SFIII 3rd Strike, Mortal Kombat 1, 2, and UMK3, and it looks like at least Capcom and Midway consistently did this.

2 Likes