Lightning Animation

I implemented the logic behind a lightning effect that visually connects the line a player clears to the destination of the garbage they send. I iterated on it to make sure that the effect remained immediately readable without being too distracting.

I was provided with the initial line shader and a concept GIF, and was responsible for turning these references into an actual implementation within the game.

How I Did This

• The first thing I did was defining the start and endpoints of the animation whenever garbage was sent, with the effect originating from the relevant cleared line and ending at each opponents' playingfields' garbage column's top most empty cell + amount of cells being sent.
• Then, I calculated a parabolic trajectory of the line between those two points. I made sure the parabole's maximum was calculated lower at larger distances, otherwise the animation would sometimes reach out of bounds.
• Afterwards I created an instance of the line shader for each garbage being sent, which follows a number of points on this parabole.
• I then proceeded to animate these lines using Cocos' tween function while making it appear as if the electricity is travelling towards its destination to make it feel directional. This was done using three sets of keyframes.
  • The first set of keyframes makes the line grow from it's starting point.
  • The second set of keyframes holds the line while it touches both ends of the trajectory.
  • The last set of keyframes completely retract the line before despawning.
• I also created a secondary animation which animates the line thicknesses on various parts of the line, to even further sell the illusion that it's travelling towards the destination.
• At this point, the line itself is done. All that is left are the particles.
  • A start particle with a decaying size.
  • An end particle that shows an impact effect with a random rotation, with a bunch of small electricity like spark particles flying off in random directions using a particlesystem.
• Finally, added a 9-sliced bar at the destination, positioned over the garbage indicator next to the opponent's playfield when the impact lands. This bar was stretched to fill all the garbage cells that were being sent

Levelling Up

After implementing the animation for sending garbage in the Battle mode, I also proposed and implemented the same animation for levelling up in the Marathon Mode, as I found that there was previously no visual feedback when the player reached a new level:

Old Iteration

I had to experiment a lot with the timing and duration, as it either felt unimpactful, unclear or too distracting.

Here's an old version where the animation was somehow ALL 3:

• The impact particles were boring, soft, randomized in ways that didn't matter, and mistimed, making the garbage sending part feel unimpactful.
• The electricity didn't gradually dash towards the destination, it only retracted, making it unclear who was sending it and why.
• The electricity line was too thick, making the animation wayy too distracting.