Rebound's particle effects

For LÖVE 0.11.0 (nightly build)

Here's an explanation of how the particle effects work in Rebound by TechnoCat.

You can download the examples here.

Also the background is a dark grey:

love.graphics.setBackgroundColor(30/255, 30/255, 30/255)

And vsync is off.

Paddles

The paddle's particle systems use this image:

Here are the beginnings of the top part of a paddle:

function love.load()
    square = love.graphics.newImage('square.png')

    p = love.graphics.newParticleSystem(square, 200)
    p:setPosition(x, y)
    p:setDirection(math.pi/2)
    p:setParticleLifetime(0.6)
    p:setEmissionRate(10) -- Temporary!
    p:setSpeed(200) -- Temporary!
    
    love.graphics.setBackgroundColor(30/255, 30/255, 30/255)    
end

function love.update(dt)
    p:update(dt)
end

function love.draw()
    love.graphics.draw(p1, 0, 0)
end

The "200" in love.graphics.newParticleSystem means this particle system has a maximum of 200 particles.

The setDirection sets the direction in radians, and math.pi/2 points down.

setParticleLifetime(0.6) means the particles are removed after 0.6 seconds.

setSpread(math.pi/16) sets the initial direction to a direction within the angle of math.pi/16.

This arc shows the angle:

setSizes(1, 0) changes the particle size from full size (1 times the size) at the start of the particle's life, and no size at the end (0 times the size).

setEmissionRate(100) means 100 particles are emitted every second.

setSpeed(0, 400) sets a random speed between 0 and 400.

setColors(r/255,g/255,b/255,128/255, r/2/255,g/2/255,b/2/255,0/255) fades the colour from the paddle's colour at half transparency at the start of the particle's life, and half the paddle's colour value completely transparent at the end of the particle's life.

love.graphics.setBlendMode('add') sets the blend mode to additive.

I think the equation for additive blend mode is this, for each colour component (red, green and blue):

final colour = whatever is already there + (new colour component value * new colour alpha)

There is another particle system for each paddle which is pretty much identical except that it's further down and the direction is up. And that's it!

Ball

The ball, upgrades, and background all use this image in their particle systems:

So, here's a start:

p1 = love.graphics.newParticleSystem(ball, 200)
p1:setEmissionRate(10) -- Temporary!
p1:setSpeed(250) -- Just for demonstration!
p1:setParticleLifetime(0.5)

The ball has no speed, and the emitter itself is what moves. This means the direction has no effect.

The particles are alive for half a second.

setSizes(1, 0.5)

The particle sizes transition from full size to half size.

setEmissionRate(100)

There are 100 particles emitted per second.

setColors(220/255,105/255,20/255,255/255, 194/255,30/255,18/255,0/255)

The colour transitions from opaque orange to a fully transparent red.

And now with additive blending!

love.graphics.setBlendMode('add')

Now for the the ball's second particle system.

p2 = love.graphics.newParticleSystem(ball, 200)
p2:setEmissionRate(10) -- Temporary!
p2:setParticleLifetime(0.75)
p2:setSizes(0.25, 1)
p2:setColors(220/255,105/255,20/255,20/255, 194/255,30/255,18/255,0/255)
p1:setSpeed(250) -- Just for demonstration!
setSizes(0.25, 1)
setEmissionRate(50)
setColors(r/255,g/255,b/255,255/255, 194/255,30/255,18/255,0/255)

The colour fades from the colour of the paddle which it last bounced off, and the same transparent red as in the ball's other particle system.

love.graphics.setBlendMode('add')

And there's a circle too, also in the same colour as the last bounced paddle.

Here's everything together, it both colours.

Upgrades

p = love.graphics.newParticleSystem(ball, 200)
p:setPosition(x, y)
p:setEmissionRate(10) -- Temporary!
p:setParticleLifetime(0.5)
p:setSpeed(200)
setSizes(1, 0.5)
setEmissionRate(100)
setColors(r/255,g/255,b/255,255/255, 64/255,64/255,128/255,128/255)

Colours fade between green (0, 255, 0) or red (255, 0, 0) and a half transparent blue.

love.graphics.setBlendMode('add')
setTangentialAcceleration(500)
setRadialAcceleration(-1200)
setSpread(2)

The direction of the emitter is rotated in love.update.

d = d - (30*dt)
if d < 0 then
    d = d + 2*math.pi
end

p:setDirection(d)
p:update(dt)

And that's it!

Additive blend mode makes the upgrades looks super cool when they overlap.

Background

Here's one part of the background:

p1 = love.graphics.newParticleSystem(ball, 200)

p1:setSpread(2*math.pi)
p1:setParticleLifetime(5)
p1:setSpeed(0, 200)
p1:setColors(0/255,0/255,0/255,128/255, 50/255,50/255,50/255,0/255)

p1:setEmissionRate(20)
p1:setSizes(1, 4)
p1:setTangentialAcceleration(200)

There are 2 times pi radians in a circle, so setSpread(2*math.pi) makes the emitter emit particles in all directions.

Here's the other part:

p2 = love.graphics.newParticleSystem(ball, 200)

p2:setSpread(2*math.pi)
p2:setParticleLifetime(5)
p2:setSpeed(0, 200)
p2:setColors(0/255,0/255,0/255,128/255, 50/255,50/255,50/255,0/255)

p2:setEmissionRate(10)
p2:setSizes(0, 1)
p2:setRadialAcceleration(-10)

setRadialAcceleration(-10) sets some acceleration toward the emitter, making the particles slow down.

And here's the background with both layers: