Full LibGDX Game Tutorial – Particle Effects

Sharing is caring!

Full LibGDX Game Tutorial – Particle Effects

Welcome to part 16 of our Full LibGDX Game Tutorial. This part will focus on adding a particle effects system in our Ashley ECS. If you haven’t seen the earlier parts of this tutorial I advise you to start at Full LibGDX Game Tutorial – Project setup as this tutorial continues from these earlier parts. For those of you who have come from part 15, you can continue on.

In this part, we will update our Asset Manager to load our Particle Effects, add a system and components for our particle effects, create a particle effect manager that will manage the creating of pools for our particle effects and finally, create some methods to spawn particle effects on certain events. If you want to create your own particle effects or learn how to use the editor, you can look at this Particle Effects Editor Tutorial.

The Particle Effect Component

The first item we will make is the ParticleEffectComponent which will store the particle effect, the attached state and if attached, the box2d body it is attached to. This is a pooled entity so will need the poolable interface and a reset method. In the reset method, we will also need to free the pooled particle effect. This pooled object inside a pooled object shouldn’t create any issues as long as it is understood that both objects need to be released once finished.

Particle Effect System

Next, we need a new system that will render the particle effects. We already have a system that renders entities with Texture and Transform components. All we need to do is make a copy of this and adjust it so it can render particles instead. To save on recreating the spritebatch and camera we will use the ones we already have since they are already set up to the right scale for our game. We will now make a new system called ParticleEffectSystem which takes the spritebatch and camera as parameters.

Here we have our system which has a processEntity method that is run once per entity. This will update the ParticleEffect position if attached to a body and remove any finished particle effects before adding them to the renderQueue. The update method is called once per frame and will render all particle effects. Here we use the timeTilDeath property to allow us to have effects that last longer than the object it is attached to. We also use the xOffset and yOffset to allow us to attach particle effects to bodies with an offset so all particle effects aren’t drawn in the centre of the body.

The Mapper class has an extra object for the ParticleEffectsComponent and is simply added to the mapper class with the following:

Particle Effect Loading

If you can remember way back to part 8, we added the loading screen and we planned ahead and added a section for loading particle effects. This means the queueAddParticleEffects() method is already being called in our loading screen and all we have to do is populate it with the files we require to load. So update the AssetManager with the particle effect paths and the particle effect load code below:

You can download the particle effects from here

Particle Effect Manager

We can load and render our particle effects now but we still need some sort of system to control the creation of particle effect pools and an ability to get particle effects. To do this we will make a ParticleEffectManager which will store all the pools which the particle effects are pulled from.

This manager is basically a store for all the pools needed for the particle effects where we use the addParticleEffect to initialise a new pool for that particle. Then user the getPooledParticleEffect to get a particle effect from the pool.

Implementing the Particle Effect Manager

The ParticleEffectManager needs to be added to our code. We will be adding it to our LevelFactory in the constructor so that it creates all the pools needed when the levelFactory is created.

Now, we need to add 2 new methods for creating the particle effects. One for particle effects that stay on one position and one that is attached to a box2dbody.

In order to attach the FIRE particle effect to the bullets we simply add this code in our createBullet method near the end.

Now every time a bullet is created our FIRE particle effect will be added to our bullet and attached to the body. We also want a reference to our particle effect in our bullet component so we can tell the particle effect to die once our bullet is dead. To add a reference to our effect we will update our bullet component to:

Now our bullet has a space for a reference to its particle effect we need to add the particle effect to it when the bullet is made. This is simply updating our levelFactory.createBullet method to add the effect to our bulletComponent

Now when a bullet dies in our bulletSystem we can set the particle to dead too with

We now have everything in our code to make, draw and release particle effects. All we need to do now is make sure our engine knows about the new systems.

Adding the ParticleEffectSystem to our Engine

In our MainScreen we need to update the constructor so it makes our new ParticleEffectSystem and adds it to the engine. We add it after our renderSystem so that particle effects are drawn on top of our normal texture renders.

That was quite a lot of work for a single particle effect however, now we have this system in place adding further particle effects is simple.

Adding more effects

With the system in place we can add some more effects to other areas of the game. We already have 3 effects loaded. Fire for the bullets, smoke will be for our teleporter and water will be for the water at the bottom. Our teleport/spring mechanic could use a nice effect so let’s add the smoke one now.

The teleporter doesn’t move so doesn’t need to have an effect attached, all we needed to do was to set the place for the effect to be drawn. That’s all that needs to be done to add an extra particle effect.

Next, we add the water effect. The water effect is a continuous effect and will never end. Its job is to look like the shimmering of light on the surface ripples. Granted it’s not the best effect and could do with some improving but we’re going to add it anyway so we can at least have something in place for the water. To add it we simply add this code to our createWaterFloor method in our levelFactory:

Here we attach the effect to the waterFloor body which is quite big and ends up in the centre of the waterFloor body. So we add the offset values -15 and 22 to increase the height of the effect and move it left a bit so it appears on the top on the water object.

 

As usual, the full project download is available from stormyvids. In the next part, Ashley & teering Behaviours Part 17 we will add the gdx-ai extension and use the steering behaviours to a new enemy.

 

← General Improvements

— Contents —

Ashley & Steering Behaviors →

Sharing is caring!