tutorial on how to use the love2d particle system

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
eqnox
Prole
Posts: 44
Joined: Fri Jul 31, 2015 2:36 pm

tutorial on how to use the love2d particle system

Post by eqnox »

This is a tutorial on how to use the love2d particle system.
I made this to help new people learn how to use the particle system.
Please leave a comment with your opinion.
please excuse any typos or grammar mess ups. All the code should be working.

Basic tutorial

I will start by explaining how to set up a particle system so that we can to start to work with particles.

Code: Select all

--copy this

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
end

function love.draw()
  --this draws our particles
  --in just a second I will explain why we are getting the mouses position
  love.graphics.draw(pSystem, love.mouse.getX, love.mouse.getY)
end

function love.update(dt)
  --this will update our particle system
  pSystem:update(dt)
end
Alright that is the skeleton for our particle system. If you were to run this right now it would do nothing but we are going to change that.
We are going to set up a way to get particles to spawn where we click our mouse.

Code: Select all

--for this is the code from above but now has a way to spawn in particles

--copy this

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
  --this sets the particles lifetime to between 1 and 5 seconds
end

function love.draw()
  --this draws our particles
  love.graphics.draw(pSystem, love.mouse.getX(), love.mouse.getY())
end

function love.mousePressed()
  --this checks if you are left clicking, and if you are it runs the code under it
  if love.mouse.isDown("l") then
    --this says if the user is left clicking then emit 32 particles and since the particles are drawn where the mouse is they come out of the mouse
    pSystem:emit(32)
end

function love.update(dt)
  --this will update our particle system
  pSystem:update(dt)
  --you need to add this so that it also updates the mouse clicked checker
  love.mousePressed()
end
Now what you get from this is just your image that sticks to you're mouse button and dosen't look very good but, with a few more lines
of code we can make it look a whole lot better

Code: Select all

--in this part of the code I will only be showing the code that has been changed to it dosen't look as confusing 

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
  --this sets the particles lifetime to between 1 and 5 seconds
  --that will make the particals disappear within 1 to 5 seconds
  pSystem:setParticleLifetime(1,5)
  --this will make your particals shoot out in diffrent directions
  --this will make your particles look much better
  --you can play with the numbers to make them move in diffrent directions
  pSystem:setLinearAcceleration(-20, -20, 20, 20)
end
so now that we have added this we have particles that can move around and disappear after a few seconds, which looks pretty cool.
But as of now when the particles are moving they are a bit slow so lets give them some speed

Code: Select all

--once again I will only show the area of code that is being modified

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
  pSystem:setParticleLifetime(1,5)
  pSystem:setLinearAcceleration(-20, -20, 20, 20)
  --by doing this it makes our particles shoot out a bit faster
  --you can play with the number to change how fast the particles move out
  pSystem:setSpeed(20)
end

Alright cool, now we have particles that can shoot out at a decent rate of speed. So now lets add some more variation to them.

Code: Select all

--once again I will only show the area of code that is being modified

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
  pSystem:setParticleLifetime(1,5)
  pSystem:setLinearAcceleration(-20, -20, 20, 20)
  pSystem:setSpeed(20)
  --this will set the rotation of the particles between 10 and 20
  --change the numbers for diffrent outcomes
  --they will not continue to rotate but they will emit at a rotated angle
  pSystem:setRotation(10,20)
end
Now your particles come out at a rotated state but, what if we want to keep them rotating? Well lets see.

Code: Select all

function love.load()
  --it does not matter what your picture for the particle is named I just like to use index.
  local img = love.graphics.newImage("index.png")
  
  --this is us setting our new particle system
  pSystem = love.graphics.newParticleSystem(img, 32)
  pSystem:setParticleLifetime(1,5)
  pSystem:setLinearAcceleration(-20, -20, 20, 20)
  pSystem:setSpeed(20)
  --the last bit of rotation code has been removed and this will take it's place
  --this will keep rotating the particles
  --this will make the particles rotate at a speed between 20 and 50
  --change the numbers for diffrent outcomes
  pSystem:setSpin(20, 50)
end
Now you have some really cool moving spinning sprites!
This is the end of the basic tutorial this was just to kind of give you the jist of how particles in LOVE work.
You can now move onto the more advanced parts of the tutorial.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


How to make particles activate when a player does something

This section will show how to activate particles when a player does something.
So let's begin.


this is the main lua file for the player that can emit particles
this first code block dosen't look much different from what the basic tutorial shows but it does have a few things added

Code: Select all

require "player"

--we have removed the mouseclick function and replaced it with the player

function love.load()
  player.load()
  local img = love.graphics.newImage("index.png")
  
  pSystem = love.graphics.newParticleSystem(img, 32)
  pSystem:setParticleLifetime(1,5)
  pSystem:setLinearAcceleration(-20, -20, 20, 20)
  pSystem:setSpeed(50)
  pSystem:setSpin(20, 50)
end

function love.draw()
  --we now draw the particles to our player
  love.graphics.draw(pSystem, player.x, player.y)
  player.draw()
end

function love.update(dt)
  pSystem:update(dt)
  --this is where we update things from the player
  player.physics(dt)
  player.move(dt)
  player.collision(dt)
  player.emitP()
end
This is the player file of the program that will make the player emit particles when it hits the left wall
much of this you don't need to understand because it just handles things that make the player move but,
at the bottem there is a function called player.emitP() and it is the function that controls the player
emitting particles.

Code: Select all

--this is our player and if you look at the botten you can see where the particles are emitted

player = {}

--this is where we set atributes of the player
function player.load()
  player.x = 10
  player.y = 10
  player.width = 10
  player.height = 10
  player.xvel = 0
  player.yvel = 0
  player.friction = 1
  player.speed = 500
end

--this is where the player is drawn from
function player.draw()
  love.graphics.setColor(255,0,0)
  love.graphics.rectangle("fill",player.x,player.y,player.width,player.height)

end

--this is where the physics are handled
function player.physics(dt)
  player.x = player.x + player.xvel * dt
  player.y = player.y + player.yvel * dt
  player.xvel = player.xvel * (1 - math.min(dt*player.friction, 1))
  player.yvel = player.yvel * (1 - math.min(dt*player.friction, 1))
end

--this is where the movement is handled
function player.move(dt)
  if love.keyboard.isDown("d") and
  player.xvel < player.speed then
    player.xvel = player.xvel + player.speed * dt
  end

  if love.keyboard.isDown("a") and
  player.xvel > -player.speed then
    player.xvel = player.xvel - player.speed * dt
  end

  if love.keyboard.isDown("s") and
  player.yvel < player.speed then
    player.yvel = player.yvel + player.speed * dt
  end

  if love.keyboard.isDown("w") and
  player.yvel > -player.speed then
    player.yvel = player.yvel - player.speed * dt
  end
end

function player.collision(dt)
  if player.x < 0 then
    player.x = 0
    player.xvel = 0
  end

  if player.y < 0 then
    player.y = 0
    player.yvel = 0
  end

  if player.x + player.width > love.graphics.getWidth() then
    player.x = love.graphics.getWidth() - player.width
    player.xvel = 0
  end

  if player.y + player.height > love.graphics.getHeight() then
    player.y = love.graphics.getHeight() - player.height
    player.yvel = 0
  end
end    

--this is the function that emits the particles
--the rest above this is just for player movement and collision with the walls
function player.emitP()
  if player.x == 0 then
    pSystem:emit(30)
  end
end

I know in this section i didn't do a lot of explaining but that is because this just shows a basic idea of how you can
use the particle system. And this isn't the best looking example in the world but it works.
paul54000
Prole
Posts: 22
Joined: Mon Nov 28, 2016 12:19 am

Re: tutorial on how to use the love2d particle system

Post by paul54000 »

thanks but this code don't work for me, i have a black screen
User avatar
Positive07
Party member
Posts: 1014
Joined: Sun Aug 12, 2012 4:34 pm
Location: Argentina

Re: tutorial on how to use the love2d particle system

Post by Positive07 »

Sorry but first this is a post from 2015 so most likely was done for 0.9.2 and not the latest version of LÖVE that is 0.10.2.
The code should be compatible anyway and I don't know why you are having problems with it. You should provide a LÖVE file of what you attempted. Also note that this example is missing the index.png image used for the particle system
for i, person in ipairs(everybody) do
[tab]if not person.obey then person:setObey(true) end
end
love.system.openURL(github.com/pablomayobre)
User avatar
Jack Dandy
Prole
Posts: 49
Joined: Mon Sep 08, 2014 4:26 pm

Re: tutorial on how to use the love2d particle system

Post by Jack Dandy »

This seems really useful - thank you, will look into this. :)
User avatar
erasio
Party member
Posts: 118
Joined: Wed Mar 15, 2017 8:52 am
Location: Germany

Re: tutorial on how to use the love2d particle system

Post by erasio »

Please don't necropost.

Necroposting is when you comment on an old thread (months or years old). It bumps the thread to the top while it is probably outdated and not relevant anymore.

If you have a similar question just make a new thread! And thanking while honorable can just be ignored in such cases in favor of more current topics.

Cheers
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot] and 45 guests