Introduction
Building on top of the player we just defined. We can use the particle emitter built into Phaser to create the bubbles which originate from the player when the oxygen/ air bar isn’t empty. This provides a nice easy method of turning them on and off, when the player is out of oxygen and when he “refills” at the surface.
create() {
// Use a generated filled-in white circle as the bubble.
var bubble = this.add.graphics({ x: 0, y: 0 });
bubble.fillStyle(0xffffff, 1);
bubble.fillCircle(2, 2, 1);
bubble.generateTexture('bubble', 4, 4);
// Directly create the particle system and configure the emitter.
this.bubbleEmitter = this.add.particles(0, 8, 'bubble', {
// The bubbles move more rightwards, the longer they've been alive.
x: {
onUpdate: (particle, key, t, value) => {
return value + (t * 10);
}
},
// The bubbles move consistently upwards.
y: {
onUpdate: (particle, key, t, value) => {
return value - 4;
}
},
// This relates to where the surface of the sea is - kill the bubble when it reaches this.
deathZone: new Phaser.Geom.Rectangle(0, 8 * 7 * this.gameScale, config.width, 8 * this.gameScale),
// Allow enough lifespan for the bubble to reach the surface.
lifespan: 2000,
// Arbitrary frequency; just trying values until it feels right.
frequency: 500,
// One bubble at a time.
quantity: 1,
blendMode: 'ADD',
// Arbitrary speed; just trying values until it feels right.
speed: 2
});
// The bubbles originate from the player.
this.bubbleEmitter.startFollow(this.player);
}Use the cursor keys to move our player around. See how the bubbles are independent of the player - they just originate from where he is at the time of being created:
