How to create a blow up effect with Pico-8

Just added a simple blow up effect to the game!

When the boy turns a frog, the game only replaced his sprite, exactly like this:

Now it's doing an effect like a blow up, explosion, or magic:

I understand the same ideia could be used in other games, and I am sharing here how I did and some conclusions.

Step by step

The general idea is to use a white circle that grows and, in a given moment, clear the screen, giving the explosion feeling.  

Step 1.  Create the effects table

In the init function, create an empty table that will store all the active effects.  

effects={}

Step 2. Add the new effect to the collection

When the event happen, in my case when the boy hits the frog, add the effect to the table:

add(effects,{key="blowup",x=_x,y=_y,t=0})

Where:

• "key" is a name for the effect.
• "x" and "y" are the position in the map.
• "t" helps me to track the time since the effect was created.

Step 3.  Increase the effect time (t)

In the update function, I added a simple loop to increase the "t" attribute.

for e in all(effects) do
  if e.key=="blowup" then
    if e.t<8 then
      e.t+=1
    else
      del(effects,e)
    end
  end
end 

This will be used to track the frame of the animation.

Step 4. Draw the effect based on the time

The animation starts is composed by 3 elements:

1. It starts with a small circle filled with white that grows from the frame (variable t) 1 to the frame 7.
2. There is an explosion light in the frames 4 and 5, painting all the screen with the color white.
3. After the explosion the circle is not filled, to make the effect of dust.

The code:

for e in all(effects) do
  if e.key=="blowup" then
   if e.t<7 then
     circfill(e.x*8,y*8,e.t*3,7)
    else
     circ(e.x*8,y*8,e.t*3,7)
    end
  end
  if e.t==4 or e.t==5 then
    cls(7)
  end
end

The code details:

• If the size is less than time 7, we show a filled circle.
• After the 7, we show an empty circle, to bring an effect of dust.
• Between the 4 and 5 we clear the screen with 7 (color white), to make the light of the explosion.
• I decided to multiply "t" per 3 to make the circle grow faster than the time.
• In my case "x" and "y" are relative position in the map, so I needed to multiply per 8. 

In slow down, the result is this:

Conclusion

It's simple and enough. Matches with the simplicity of the game.

I hope you have liked. If so, feel free to comment this Tutorial.