From 79374a3cd56c43d3ec1192f0b98ef031909de2ad Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 5 Nov 2018 16:31:48 +1000 Subject: [PATCH] More attack animations --- client/src/components/phaser.combat.js | 7 +- client/src/components/phaser.container.jsx | 14 ++- client/src/components/phaser.skills.js | 122 ++++++++++++++++++++- 3 files changed, 134 insertions(+), 9 deletions(-) diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index 4904e9b6..98afa3be 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -10,6 +10,12 @@ class PhaserCombat extends Phaser.Scene { this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg'); this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); + this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png'); + this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png'); + this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png'); + this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png'); + + /* Spritesheets */ this.load.spritesheet({ key: 'explosion', @@ -61,7 +67,6 @@ class PhaserCombat extends Phaser.Scene { this.emitter.stop(); const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); sprite.setScale(3); - this.combat = false; } } PhaserCombat.prototype.skills = require('./phaser.skills.js'); diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 61a740ae..e9142205 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -5,8 +5,12 @@ const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { - const { game, activeSkill, activeIncoming, account } = state; - return {game, activeSkill, activeIncoming, account }; + const { + game, activeSkill, activeIncoming, account, + } = state; + return { + game, activeSkill, activeIncoming, account, + }; } ); @@ -25,9 +29,11 @@ class PhaserInstance extends preact.Component { this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); if (playerTeam.cryps[0].hp.value === 0) { - this.PhaserCombat.skills('blast', 400, -250); //Left Blast + // this.PhaserCombat.skills('blast', 400, -150); + this.PhaserCombat.skills('chargeBall', 'green', 400, -250); } else if (otherTeams[0].cryps[0].hp.value === 0) { - this.PhaserCombat.skills('blast', 180, 250); //Right Blast + // this.PhaserCombat.skills('blast', 180, 150); + this.PhaserCombat.skills('chargeBall', 'green', 180, 250); } } } diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js index 2f2902dc..16b6b1c5 100755 --- a/client/src/components/phaser.skills.js +++ b/client/src/components/phaser.skills.js @@ -1,27 +1,141 @@ // Skill function called by phaser combat +const Phaser = require('phaser'); -function skills(skill, speed, location) { +function skills(skill, img, location, spd) { if (this.combat) { return; } this.combat = true; + const particles = this.add.particles(img); switch (skill) { case 'blast': this.proj = this.physics.add.image(-100, 300, 'proj'); - this.emitter = this.add.particles('blue').createEmitter({ + this.emitter = particles.createEmitter({ speed: 25, scale: { start: 1, end: 0 }, blendMode: 'ADD', }); this.emitter.startFollow(this.proj); this.physics.add.overlap(this.proj, this.players, this.explode, null, this); - this.proj.x = speed; - this.proj.setVelocity(location, 0); + this.proj.x = location; + this.proj.setVelocity(spd, 0); + break; + + case 'wall': + this.emitter = particles.createEmitter({ + x: location, + y: { min: 200, max: 350 }, + lifespan: 2000, + speedX: { min: spd, max: spd * 2 }, + scale: { start: 0.4, end: 0 }, + quantity: 4, + blendMode: 'ADD', + }); + this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); + break; + + case 'spit': + if (location > 250) { + this.angleMin = 180; + this.angleMax = 220; + } else { + this.angleMin = 320; + this.angleMax = 360; + } + this.emitter = particles.createEmitter({ + x: location, + y: 300, + lifespan: 2000, + angle: { min: this.angleMin, max: this.angleMax }, + speed: spd * 2, + scale: { start: 0.4, end: 1 }, + gravityY: 250, + quantity: 4, + blendMode: 'ADD', + }); + this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); + break; + case 'gravBomb': + this.well = particles.createGravityWell({ + x: 150, + y: 150, + power: 4, + gravity: 500, + }); + this.emitter = particles.createEmitter({ + x: 150, + y: 150, + lifespan: 1500, + speed: 1000, + scale: { start: 0.7, end: 1 }, + blendMode: 'ADD', + }); + this.time.delayedCall(1000, () => { + this.emitter.stop(); + this.well.active = false; + }, [], this); + break; + case 'gravBlast': + this.well = particles.createGravityWell({ + x: 400, + y: 300, + power: 4, + gravity: 500, + }); + this.emitter = particles.createEmitter({ + x: 400, + y: 300, + lifespan: 2000, + speed: 1000, + scale: { start: 0.7, end: 1 }, + blendMode: 'ADD', + bounds: { + x: 0, y: 250, w: 450, h: 150, + }, + }); + this.time.delayedCall(1000, () => { + this.emitter.stop(); + this.well.x = 100; + }, [], this); + this.time.delayedCall(3000, () => { + this.well.active = false; + }, [], this); + break; + case 'chargeBall': + + this.emitter = particles.createEmitter({ + x: -400, + y: -100, + lifespan: 1000, + moveToX: 450, + moveToY: 150, + scale: 0.75, + quantity: 4, + _frequency: 20, + blendMode: 'ADD', + emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) }, + }); + this.emitter2 = particles.createEmitter({ + radial: false, + x: { min: 450, max: 50, steps: 256 }, + y: { min: 150, max: 300, steps: 256 }, + lifespan: 1000, + speedX: { min: 200, max: 400 }, + quantity: 4, + gravityY: 0, + scale: { start: 1.5, end: 0, ease: 'Power3' }, + blendMode: 'ADD', + active: false, + }); + this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); + this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this); + this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this); break; default: break; } } + module.exports = skills;