Flashcard Clash Development Update 7

SOUND UPDATES
This week Juhani Junkala came back with some new sounds for menus and the Adventurer. When adding them in game, I was reminded about how delayed the sound is in the web version of Flashcard Clash.

Sound is generated by the game engine and pushed out to the operating system to play, but in the web version I'm using an external library that helps simplify converting code to the web. The problem with this library is that when it takes in the sound from the game, it gets put into another buffer before then being pushed out to the web browser to play later. These extra steps were delaying the sound output a small amount, maybe 1/5th of a second, but enough to sound wrong.

So to reduce the lag time, I cut out the helper library, and wrote replacement code to directly output sound to the browser. It's mostly working well, although there are some issues with sample rate that currently make sound effects sound a little sped up.

The next issue I’ll need to fix in the future is that when the game does too much processing all at once, it might not generate the sound in time to push out, and when that happens there's a noticeable gap. But I’ll need to improve a few things before that can be fixed.

There were also some minor fixes to the fire goo animation that was not looping correctly and some card fixes.

ANIMATION FX

Over the week we've been completing the effects (FX) that accompany the attack animations of the Pyromancer, one of our hero characters. These three attacks are called Flash, Fireball and Firewall.

Our process of developing the FX for these attacks goes as follows:

1. A description of the effect is provided to the animator (written, or detailed with visuals).
2. The animator draws up the necessary frames to achieve the desired effect.
3. These frames are converted into vectors (using Image Trace and the Brush tool in Illustrator) and exported into SVGs.
4. The SVGs are imported into Spine to compose the final animation.

Let's have a closer look at these steps with the creation of the effects for Flash, Fireball and Firewall.

FLASH FX

Here we begin with the concept sheet. I created this page to visualise how I would like the FX to appear in association with the character movement.

From there, our animator Ariane Lapointe works up a test animation. This ensures we're on the same page before proceeding with the final animation.

Once approved, the frames are exported as PNGs, and are ready for vectoring in Illustrator. The frames are easily converted into vectors using the Image Trace function and then the Brush Tool for small edits. The frames are then exported as SVGs. We do this is to reduce overall game size, allowing the game to run faster.

Below is a folder view of all the Flash FX frames, ready for vectoring.

Once vectored and exported as SVGs, the files are sent back to the animator, where they'll be composed in Spine.

Here's the final Flash FX, in two parts:
1 - The start of the animation, where the ball of light lifts from the Pyromancer's hand.

And, 2 – The flash effect that appears over the enemy monster.

After reviewing the final animation, we decided to opt for three flashes over the enemy. Here's the final outcome.

That's all for this week. Until next time!