Game Journal #181 - One More Layer

Hello!  So it's the end of the year and I got something fun to share.  The past few updates have been about working on effects animations, and this has been a learning process for me.  All my animation knowledge has sort of been self-taught, I've never had an animation class before, and while I learned to animate people from making comics VFX animation has been its own discipline and something I've been trying to master both on this project and on Kitsune Tails, my other project.  Tonight I figured out how to post non-gif video to Patreon so I can share the current milestone, finding the next piece of VFX juice to help sell our attack animations, and it came from a friend's recommendation.

The secret bit of tech I was missing before is, funny enough, exactly the idea I originally had when I started trying to colorize attacks.  My first attempt involved a static arc shape and then a second layer of effect that played overtop of it.  My first error was I made the arc shape involve like five animation frames each and the top layer involve like six frames, it ended up spiraling out into a -lot- of work and a lot of new assets, so in my process I ended up compressing the two arc layers into one arc with a dust effect, then I got rid of the dust effect, then I found myself unhappy with the high-fidelity arc shape that had like four frames that each lasted about 0.01 or 0.02 seconds.  The major change I made to this formula recently was to simplify these arcs from four frames to just two frames that imply stroke direction while also having a frame timing that more closely matches the animation fidelity of the rest of the game.  That's where we left off last week.

Where I arrived at this week was sharing the completed and implemented attack animations with a friend they observed what I had been struggling with: making the effects light colors and testing them on these pencil backgrounds, the effects got lost a bit and weren't popping like they ought to.  Said friend is a big MvC3 modder and observed that a lot of Capcom games resolve this problem by putting a light alpha black shape behind their effects so no matter where you use the attack, whatever the background brightness level, the effect will pop. I thought about this and I was like, you know what, I could implement that.

My goal coming away from a process of massively compressing my workload was to implement this dark alpha shape in a way that minimizes my workload and the inclusion of new assets in the game.  The approach I settled on is I would make one shape that plays behind the effects I just made- since all those effects have baked-in movement to them already, putting them on top of the arc shape would hide the fact that it is a static shape and still imply the movement direction.  As you can see in my Aseprite mockups above, it still looks like its moving even if the black shape is not.    So I popped that into the game and it was just the ticket I needed.

I wanted to find the right level of opacity to not make the shape itself too overbearing but also still provide the contrast that makes the bright effect colors pop.  Here was my first shot from the improvements in-engine and it makes a big difference from before, so I think I am on the right track.  I started with just Lizzie's three-hit combo to see if it would look good in the first place, and then afterwards I would work on her rhythm combo, which has another big challenge to resolve.

So Lizzie's attack 4 is this thrusting attack, we'll call it "Stinger" for now.  Stinger is an advancing move that is meant to close gaps to allow for additional combo extensions.  One of the quirks of Stinger is you can perform it straight or, if you hold up or down, do it on a diagonal.  The way our code framework is set up each animation plays as just one thing, one timeline of nodes with one set of values.  Stinger's diagonals are not variant moves, they are the core move being played within the engine's melee scooting function that allows movement up or down with any melee attack move, so I need to come up with a way to apply effects to it that works moving up or down.  The solution for the main effect, seen above, is to spawn four instances of a diamond-shaped set of attack shapes with short halflives so as they all spawn and move forward, the sequential spawning of all four nodes can create either a forward or a diagonal pattern.  This can be seen here and in the video at the top of this article.  This was a big deal problem to solve and I had it pieced together for the main effect, which I almost didn't apply an effect to, so I tried to apply that same formula to the darkening effect.

This is the abstract shadow shape I came up with for attack 4.  It's a roughly diamond shaped, uhh.. shape that has extensions for all the four shape positions of the main effect, and jagged edges on front and back so it will sorta blend into the background and not read as a hard-edged shape when printed in-game.

Since I'm printing four of these, same as the main effect, and they're all translucent, I needed a way to prevent overlaps from becoming more opaque and looking worse.  The solution I came up with was this effect would spawn dark and, as its half-life progressed, it would become more transparent and fade away, that way when the next one spawns the previous one will be much lighter.

And in this way, when Lizzie Stingers on a diagonal, the shadows track with the effects and with her movement, and it doesn't look half bad.  I tried this particular move a lot in the demo video at the top of this article specifically to try to capture both the forward-moving and the diagonal variants.  This was a big accomplishment for me!

When I worked out the fading effect for attack 4, I realized I could apply a similar idea to the entire moveset.  To recap, the way combos work is the later hits in a combo get progressively stronger in order to reward doing a big combo over just mashing jab a bunch or just divekicking.  The increasing damage was implied by both increasing range and the bigger animations, but with this shadow effect I could also imply the big damage by making the attacks themselves have higher contrast.  Also visible in the video at the top of the article, when attacks in the combo progress they become darker to help sell intensity, and this culminates in attack 6 hitting with a big dark slam that fades slowly, selling it as the strongest of Lizzie's main attacks.  Nice!

So I've got a good attack effect setup that uses three assets per attack. I can port this knowledge to ranged attacks easily, putting a dark shape around them should emphasize the muzzle flashes really nicely.  The funny part about all this is the formula for what I needed to make my attack arcs look good ended up being more or less the first thing I attempted, so I looped back to where I started.  Lesson learned.

I'll be setting up the rest of the cast with their new effects and shadow layers as soon as I can, and then I think I can move on to some other animations to round out their core movesets and/or I can start painting backgrounds to make the whole game really look like a game.  Like a real-live game.  Hitsparks for landing hits on enemies is coming, that's on our to-do list as well, but for now this is a satisfying small victory in figuring out VFX animation.

Thank you, sincerely, for following along on this project this year.  We have made a lot of progress in moving from pencil sprites to adding color this year, and for a two-person team we're doing what we can within our means.  The coming year should get us closer to a more feature-complete playable demo and I'm really eager to get that in people's hands and let them try it out.  It's been such a long road but we've come real far.  Let's see how far we can get in the year to come.