We now want to create a dust particle effect that will appear whenever the player character runs on rocks. This effect will stop as soon as the player stops moving or if the player is no longer grounded on a platform.
First, we will need to design a custom particle effect that looks like dust. The following screenshot is an example of what we are aiming for:
Open the particle editor to begin with the default fire particle effect and apply the following modifications to the editor and emitter properties:
200
for Value0.75
for High, enter 0
for Low, and enter (0
,0
), (67
,28
), (100
,0
) for Chart1
to 5 for High, enter -1
to -5
for Low, and enter (0
,50
) for Chart100
for Value200
for High, enter 0
for Low, and enter (0
,100
) for Chart250
to 500
for High, enter 0
for Low, and enter (0
,100
) for Chart0
for High, enter 0
for Low, and enter (0
,100
) for Chart5
for High, enter -1
for Low, and enter (0
,0
), (67
,28
), (100
,0
) for Chart107
for R, enter 107
for G, and enter 107
for B0
,100
) (100
,0
) for ChartNext, click on the Save button to save the file and then place it at CanyonBunny-android/assets/particles
.
There is no official file extension for particle effects in LibGDX. Nonetheless, it does not do any harm to make things explicit and name files after their intended purpose. As sfx
is a well-known abbreviation for sound effect, it makes sense to follow this scheme and adapt it to the particle effect; hence, the file extension used in this book is .pfx
.
There is one more preparation required before we can start to implement the dust particle effect in Canyon Bunny. As you already know, particle effects are made out of images and so is our dust particle effect. You might have noticed that we skipped over that part to select a proper (another) image file for the dust particle in the editor. This is perfectly fine as we did not start from scratch, but instead used the already existing particle image from the default fire particle effect. Its file is called particle.png
and can be found in the assets
folder of the GDX tools. You can also download it from LibGDX's repository at https://raw.githubusercontent.com/libgdx/libgdx/master/tests/gdx-tests-android/assets/data/particle.png.
The particle.png
image basically contains just a small, white circle that smoothly fades out from the center. The image should look like this:
Place the particle.png
file in CanyonBunny-android/assets/particles/
folder.
Next, add the following two import lines to the BunnyHead
class:
import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.g2d.ParticleEffect;
After this, add the following new line to the same class:
public ParticleEffect dustParticles = new ParticleEffect();
This is the variable where we are going to hold a reference to our loaded and ready-to-fire dust particle effect. Next, make the following modifications to the same class:
public void init () { ... // Power-ups hasFeatherPowerup = false; timeLeftFeatherPowerup = 0; // Particles dustParticles.load(Gdx.files.internal("particles/dust.pfx"), Gdx.files.internal("particles")); } @Override public void update (float deltaTime) { super.update(deltaTime); ... dustParticles.update(deltaTime); } @Override public void render (SpriteBatch batch) { TextureRegionreg = null; // Draw Particles dustParticles.draw(batch); // Apply Skin Color ... }
As you can see, only a few changes were required to implement the dust particle effect in the game. The particle effect is loaded in init()
and is continuously updated and rendered in update()
and render()
, respectively. However, calling draw()
on a particle effect does not mean that it is always going to be rendered.
The particle effect needs to be triggered first to start playing. Furthermore, if it is a continuous particle effect, it also needs to be stopped explicitly to become invisible again.
To take care of this, make the following changes to the code in updateMotionY()
:
@Override
protected void updateMotionY (float deltaTime) {
switch (jumpState) {
case GROUNDED:jumpState = JUMP_STATE.FALLING;
if (velocity.x != 0) {
dustParticles.setPosition(position.x + dimension.x / 2, position.y);
dustParticles.start();
}
break;
...
}
if (jumpState != JUMP_STATE.GROUNDED) {
dustParticles.allowCompletion();
super.updateMotionY(deltaTime);
}
}
Here is a screenshot of the result in the game: