feat: add more particles #10

src/Assets/Img/Sprites/Particles/Quadrados.piskel

@@ -0,0 +1 @@
+{"modelVersion":2,"piskel":{"name":"Quadrados","description":"","fps":1,"height":32,"width":32,"layers":["{\"name\":\"Layer 1\",\"opacity\":1,\"frameCount\":9,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4],[5],[6],[7],[8]],\"base64PNG\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAgCAYAAACy9KU0AAABfElEQVR4Xu3YwRGEQAwDQTv/D0Rsiij6M5eAWCG64PbubuBvd2H6DD38f3J9AWsvYM/ef34D8PGf56XP3wYQ7Z/vfwLIDiCAegOiC7QvIBNA+AYEUAAFkGugTzDX/Z/cJ1j/AdkF9gmG+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxARRAdoEBhPu38QEUQHaBAYT7t/EBFEB2gQGE+7fxGqAPAY5WEFN5awYAAAAASUVORK5CYII=\"}]}"]}}

src/Components/StarsBackground.js

@@ -1,3 +1,5 @@
+import { range } from "201flaviosilva-utils";
+
 import GlobalConfigs from "../Configs";
 
 export default class StarsBackground extends Phaser.GameObjects.TileSprite {
@@ -14,16 +16,16 @@ export default class StarsBackground extends Phaser.GameObjects.TileSprite {
 		this.setAlpha(0.75);
 		this.setDepth(-1);
 
-		// TODO: Update to a sprite sheet with all box sprite
-		const particles = scene.add.particles("Sprite");
+		const particles = scene.add.particles("SquaresParticles");
 		particles.createEmitter({
+			frame: range(0, 9),
 			x: scene.scale.width,
 			y: { min: 0, max: scene.scale.height },
-			lifespan: 2500,
+			lifespan: 10000,
 			speedX: { min: -600, max: -100 },
-			scale: { min: 0.1, max: 0.05 },
+			scale: { min: 0.2, max: 0.05 },
+			alpha: { start: 1, end: 0.5 },
 			quantity: 1,
-			blendMode: "ADD",
 		});
 	}
 

src/Objects/ShootUp/Enemy.js

@@ -1,5 +1,5 @@
-import { randomInt } from "201flaviosilva-utils";
 import EnemyShootGroup from "./EnemyShoot";
+import { generateEnemyParticles } from "./Particles";
 
 export class Enemy extends Phaser.Physics.Arcade.Sprite {
 	constructor(scene, x, y) {
@@ -15,23 +15,15 @@ export class Enemy extends Phaser.Physics.Arcade.Sprite {
 
 		this.shootTimer = scene.time.addEvent({
 			delay: this.shootDelay,
-			// callback: this.fire,
+			callback: this.fire,
 			callbackScope: this,
 			loop: true,
 		});
 
-		this.particles = scene.add.particles("Duke");
-		this.particlesEmitter = this.particles.createEmitter({
-			follow: this,
-			quantity: 1,
-			frequency: 100,
-			speedX: { min: 500, max: 250 },
-			speedY: { min: 250, max: -250 },
-			scale: { start: 0.5, end: 0 },
-			alpha: { start: 0.5, end: 0 },
-			rotate: { start: -90, end: randomInt(-360, 360) },
-			lifespan: { min: 100, max: 500 },
-		});
+		const { particles, particlesEmitter, deadParticlesEmitter, } = generateEnemyParticles(scene, this);
+		this.particles = particles;
+		this.particlesEmitter = particlesEmitter;
+		this.deadParticlesEmitter = deadParticlesEmitter;
 	}
 
 	fire() {
@@ -40,14 +32,36 @@ export class Enemy extends Phaser.Physics.Arcade.Sprite {
 	}
 
 	kill() {
+		this.setTint(0xff0000);
+		this.setVisible(false);
+		this.disableBody();
+
+		this.shootTimer.paused = true;
 		this.shootTimer.remove();
+
+		this.shoots.destroy();
+
 		this.particlesEmitter.stop();
-		this.particles.destroy();
-		this.destroy();
+		this.deadParticlesEmitter.explode();
+
+		const killTimer = this.scene.time.addEvent({
+			delay: 500,
+			callback: () => {
+				// End Destroy Enemy
+				this.deadParticlesEmitter.stop();
+				this.particles.destroy();
+
+				killTimer.remove();
+				this.destroy();
+			},
+			callbackScope: this,
+			loop: false,
+			repeat: 0,
+		});
 	}
 
 	preUpdate() {
-		if (0 > this.x) this.kill();
+		if (-this.width > this.x) this.kill();
 	}
 }
 

src/Objects/ShootUp/EnemyShoot.js

@@ -11,7 +11,7 @@ export class EnemyShoot extends Phaser.Physics.Arcade.Sprite {
 	}
 
 	preUpdate() {
-		if (0 > this.x) this.destroy();
+		if (-this.width > this.x) this.destroy();
 	}
 }
 

src/Objects/ShootUp/Particles.js

@@ -0,0 +1,137 @@
+import { range, randomInt } from "201flaviosilva-utils";
+
+// Player
+export function generatePlayerParticles(scene, player, x = 0, y = 0) {
+	const PLAYER_SHIP_PARTICLES = scene.add.particles("PlayerShip");
+	const SQUARES_PARTICLES = scene.add.particles("SquaresParticles");
+
+	// Explosion
+	const explosionEmitter = SQUARES_PARTICLES.createEmitter({
+		x: 0, y: 0,
+		frame: range(0, 9),
+		quantity: 1,
+		frequency: -1,
+		scale: { start: 0.5, end: 0 },
+		alpha: { start: 0.5, end: 0 },
+		speed: { min: 50, max: 150 },
+		rotate: { start: 0, end: 360 },
+		lifespan: { min: 250, max: 500 },
+	});
+
+	// Move Player Ship
+	const moveEmitter1 = PLAYER_SHIP_PARTICLES.createEmitter({
+		x, y,
+		follow: player,
+		quantity: 1,
+		speedX: { min: -500, max: -250 },
+		speedY: { min: -250, max: 250 },
+		scale: { start: 0.75, end: 0 },
+		alpha: { start: 0.5, end: 0 },
+		rotate: { start: 0, end: 360 },
+		lifespan: { min: 100, max: 500 },
+	});
+
+	// Move Sprite Sheet
+	const moveEmitterBaseConfig = {
+		x: 0, y: 0,
+		moveToX: 0,
+		alpha: { start: 0.5, end: 0.25 },
+		deathCallback: ({ x, y }) => {
+			explosionEmitter.setPosition(x, y);
+			explosionEmitter.explode();
+		},
+	}
+	const moveEmitter2A = SQUARES_PARTICLES.createEmitter({
+		...moveEmitterBaseConfig,
+		frame: range(0, 9),
+		moveToY: { min: scene.scale.height / 2 - 150, max: scene.scale.height / 2 + 150 },
+		scale: { start: 0.5, end: 0.25 },
+		quantity: 4,
+	});
+	const moveEmitter2B = SQUARES_PARTICLES.createEmitter({
+		...moveEmitterBaseConfig,
+		frame: [3],
+		moveToY: scene.scale.height / 2,
+		scale: 0.5,
+		quantity: 1,
+	});
+
+	return {
+		explosionEmitter,
+		moveEmitter1,
+		moveEmitter2A,
+		moveEmitter2B,
+	}
+}
+
+// Player Shoot
+export function generatePlayerShootParticles(scene, shoot, sprite, x = 0, y = 0) {
+	const moveParticles = scene.add.particles(sprite);
+	const moveParticlesEmitter = moveParticles.createEmitter({
+		x, y,
+		follow: shoot,
+		quantity: 1,
+		speedX: { min: -500, max: -250 },
+		speedY: { min: -250, max: 250 },
+		scale: { start: 0.33, end: 0 },
+		alpha: { start: 0.5, end: 0 },
+		rotate: { start: 0, end: 360 },
+		lifespan: { min: 100, max: 500 },
+	});
+
+	// Kill
+	const explosionParticles = scene.add.particles(sprite);
+	const explosionParticlesEmitter = explosionParticles.createEmitter({
+		x, y,
+		follow: shoot,
+		quantity: 100,
+		frequency: -1,
+		scale: { start: 0.75, end: 0 },
+		alpha: { start: 0.75, end: 0 },
+		speed: { min: 50, max: 150 },
+		rotate: { start: 0, end: 360 },
+		lifespan: { min: 250, max: 750 },
+	});
+
+	return {
+		moveParticles, moveParticlesEmitter,
+		explosionParticles, explosionParticlesEmitter,
+	};
+}
+
+// Enemy
+export function generateEnemyParticles(scene, enemy, x = 0, y = 0) {
+	const particles = scene.add.particles("Duke");
+	const particlesEmitter = particles.createEmitter({
+		x, y,
+		follow: enemy,
+		quantity: 1,
+		frequency: 100,
+		speedX: { min: 500, max: 250 },
+		speedY: { min: 250, max: -250 },
+		scale: { start: 0.5, end: 0 },
+		alpha: { start: 0.5, end: 0 },
+		rotate: { start: -90, end: randomInt(-360, 360) },
+		lifespan: { min: 100, max: 500 },
+	});
+
+	const deadParticlesEmitter = particles.createEmitter({
+		x, y,
+		follow: enemy,
+		quantity: 32,
+		frequency: -1,
+		scale: { start: 0.75, end: 0 },
+		alpha: { start: 0.75, end: 0 },
+		angle: { start: 0, end: 360, steps: 32 },
+		rotate: { start: -90, end: 270 },
+		tint: 0xff0000,
+		speed: 200,
+		lifespan: 500,
+	});
+
+
+	return {
+		particles, particlesEmitter,
+		deadParticlesEmitter,
+	};
+}

src/Objects/ShootUp/Player.js

@@ -1,6 +1,7 @@
 import { arrayChoice } from "201flaviosilva-utils";
 
 import GlobalConfigs from "../../Configs";
+import { generatePlayerParticles } from "./Particles";
 
 import ShootGroup from "./Shoot";
 
@@ -19,19 +20,10 @@ export default class Player extends Phaser.Physics.Arcade.Sprite {
 		this.shootGroup = new ShootGroup(scene.physics.world, scene);
 
 		// Move particles
-		this.moveParticles = scene.add.particles("PlayerShip")
-			.createEmitter({
-				x, y,
-				follow: this,
-				quantity: 1,
-				// moveToY: { min: this.y - 100, max: this.y + 100 },
-				speedX: { min: -500, max: -250 },
-				speedY: { min: -250, max: 250 },
-				scale: { start: 0.5, end: 0 },
-				alpha: { start: 0.5, end: 0 },
-				rotate: { start: 0, end: 360 },
-				lifespan: { min: 100, max: 500 },
-			});
+		const { explosionEmitter, moveEmitter1, moveEmitter2A, moveEmitter2B, } = generatePlayerParticles(scene, this, x, y);
+		this.moveEmitter1 = moveEmitter1;
+		this.moveEmitter2A = moveEmitter2A;
+		this.moveEmitter2B = moveEmitter2B;
 
 		// Keys
 		this.keys = scene.input.keyboard.addKeys(GlobalConfigs.controllers.shootUp);
@@ -45,6 +37,9 @@ export default class Player extends Phaser.Physics.Arcade.Sprite {
 		const keys = this.keys;
 
 		if (keys.shoot.isDown && time > this.timeNextFire) this.fire();
+
+		this.moveEmitter2A.setPosition(this.x, this.y);
+		this.moveEmitter2B.setPosition(this.x, this.y);
 	}
 
 	fire() {

src/Objects/ShootUp/Shoot.js

@@ -1,3 +1,5 @@
+import { generatePlayerShootParticles } from "./Particles";
+
 export class Shoot extends Phaser.Physics.Arcade.Sprite {
 	constructor(scene, x, y, sprite) {
 		super(scene, x, y, sprite);
@@ -16,34 +18,16 @@ export class Shoot extends Phaser.Physics.Arcade.Sprite {
 			onUpdate: () => this.refreshBody(),
 		});
 
-		this.moveParticles = scene.add.particles(sprite);
-		this.moveParticlesEmitter = this.moveParticles.createEmitter({
-			x, y,
-			follow: this,
-			quantity: 1,
-			speedX: { min: -500, max: -250 },
-			speedY: { min: -250, max: 250 },
-			scale: { start: 0.33, end: 0 },
-			alpha: { start: 0.5, end: 0 },
-			rotate: { start: 0, end: 360 },
-			lifespan: { min: 100, max: 500 },
-		});
+		// Particles
+		const { moveParticles, moveParticlesEmitter, explosionParticles, explosionParticlesEmitter } = generatePlayerShootParticles(scene, this, sprite, x, y);
+		this.moveParticles = moveParticles;
+		this.moveParticlesEmitter = moveParticlesEmitter;
 
-		// Kill
-		this.explosionParticles = scene.add.particles(sprite);
-		this.explosionParticlesEmitter = this.explosionParticles.createEmitter({
-			x, y,
-			follow: this,
-			quantity: 100,
-			frequency: -1,
-			scale: { start: 0.75, end: 0 },
-			alpha: { start: 0.75, end: 0 },
-			speed: { min: 50, max: 150 },
-			rotate: { start: 0, end: 360 },
-			lifespan: { min: 250, max: 750 },
-		});
+		this.explosionParticles = explosionParticles;
+		this.explosionParticlesEmitter = explosionParticlesEmitter;
 		this.explosionParticlesEmitter.explode();
 
+		// (Kill) Timer
 		this.killTimer = scene.time.addEvent({
 			delay: 500,
 			callback: () => {
@@ -64,13 +48,13 @@ export class Shoot extends Phaser.Physics.Arcade.Sprite {
 	}
 
 	kill() {
+		this.setVisible(false);
+		this.disableBody();
+
 		this.moveParticlesEmitter.stop();
 		this.moveParticles.destroy();
 		this.initialAnimation.stop();
 
-		this.disableBody();
-		this.setVisible(false);
-
 		this.explosionParticlesEmitter.explode();
 		this.killTimer.paused = false;
 	}

src/Scenes/GamePlay/Web.js

@@ -24,19 +24,6 @@ export default class Web extends Phaser.Scene {
 		// World
 		const background = new StarsBackground(this);
 
-		this.cursors = this.input.keyboard.createCursorKeys();
-		const particles = this.add.particles("Sprite");
-		const emitter = particles.createEmitter({
-			x: 0, y: 0,
-			moveToX: 0,
-			// moveToY: { min: this.scale.height / 2 - 100, max: this.scale.height / 2 + 100 },
-			moveToY: this.scale.height / 2,
-			scale: 0.5,
-			alpha: { start: 0.25, end: 0 },
-			quantity: 4,
-		});
-		this.input.on("pointermove", ({ x, y }) => { emitter.setPosition(x, y); });
-
 		this.createPlayer();
 
 		// Enemies

src/Scenes/Preload.js

@@ -20,6 +20,7 @@ import Duke from "../Assets/Img/Sprites/Enemy/Duke/Duke.png";
 
 // -- Sprite --
 import Sprite from "../Assets/Img/Sprites/Sprite.png";
+import SquaresParticles from "../Assets/Img/Sprites/Particles/Quadrados.png";
 
 // ---- Objects ----
 import Bush1 from "../Assets/Img/Sprites/PlatformerBundle/Object/Bush1.png";
@@ -101,6 +102,7 @@ export default class Preload extends Phaser.Scene {
 		this.load.image("Duke", Duke);
 
 		this.load.image("Sprite", Sprite);
+		this.load.spritesheet("SquaresParticles", SquaresParticles, { frameWidth: 32, frameHeight: 32 });
 
 		// Objects
 		this.load.image("Bush1", Bush1);