More attack animations

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');

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;
+        const {
-        return {game, activeSkill, activeIncoming, account };
+            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);
             }
         }
     }

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.x = location;
-            this.proj.setVelocity(location, 0);
+            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;