diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js new file mode 100755 index 00000000..893b3116 --- /dev/null +++ b/client/src/scenes/combat.js @@ -0,0 +1,90 @@ +const Phaser = require('phaser'); +const fs = require('fs'); + +class PhaserCombat extends Phaser.Scene { + constructor() { + super('combat'); + } + + preload() { + /* Static Images */ + this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); + this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); + + 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', + url: 'http://labs.phaser.io/assets/sprites/explosion.png', + frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 }, + }); + } + + create() { + this.add.image(400, 300, 'sky');// Background image + this.createPlayers(); + this.createAnim(); + this.cursors = this.input.keyboard.createCursorKeys(); + this.combat = false; + this.registry.events.on('changedata', this.updateData, this); + + this.input.keyboard.on('keydown_S', () => { + this.scene.switch('passives'); // Switch to battle scene + }, 0, this); + } + + createPlayers() { + this.players = this.physics.add.staticGroup(); + const img = this.players.create(100, 300, 'alk'); + const imgTwo = this.players.create(500, 300, 'magmar'); + img.setScale(0.5); + imgTwo.setScale(0.5); + this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + } + + createAnim() { + const config = { + key: 'explodeAnimation', + frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), + frameRate: 20, + repeat: 0, + }; + this.anims.create(config); + } + + explode(proj) { + this.proj.disableBody(true, true); + this.emitter.stop(); + const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); + sprite.setScale(3); + } + + updateData(parent, key, data) { + if (key === 'playerCryps') { + this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`); + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 400, -150); + this.skills('wall', 'green', 400, -250); + } + } + if (key === 'enemyCryps') { + this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`; + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 180, 150); + this.skills('wall', 'green', 180, 250); + } + } + } +} +PhaserCombat.prototype.skills = require('./phaser.skills.js'); + +module.exports = PhaserCombat; diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js new file mode 100755 index 00000000..16b6b1c5 --- /dev/null +++ b/client/src/scenes/combat.skills.js @@ -0,0 +1,141 @@ +// Skill function called by phaser combat +const Phaser = require('phaser'); + +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 = 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 = 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; diff --git a/client/src/scenes/passive.node.js b/client/src/scenes/passive.node.js index b44f0b63..1a806d37 100755 --- a/client/src/scenes/passive.node.js +++ b/client/src/scenes/passive.node.js @@ -6,7 +6,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite { this.setTexture('eye'); this.scene = scene; this.alloc = alloc; - this.text = text; + this.text = (text.indexOf(',') > -1) ? text.split(',') : text; this.id = id; this.setPosition(x, y); @@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite { } allocate(alloc) { - if (alloc !== undefined) { - this.alloc = alloc; - } else { - this.alloc = !this.alloc; - } + this.alloc = (alloc !== undefined) ? alloc : !this.alloc; this.updateNode(); } diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js old mode 100644 new mode 100755 index 1869d8c9..6d4bade1 --- a/client/src/scenes/passives.js +++ b/client/src/scenes/passives.js @@ -7,29 +7,23 @@ const passiveDataEdge = require('./passive.data.edge'); // Mouse click hold to move, Q + E to zoom in and out // Press 'A' to reset allocated passive nodes -class Passives extends Phaser.Scene { +class PhaserPassives extends Phaser.Scene { + constructor() { + super('passives'); + } + preload() { this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); - this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg'); } create() { - this.background = this.add.image(0, 0, 'background'); - this.background.setScale(5); - this.background.setInteractive(); this.graphics = this.add.graphics(); - this.nodeText = this.add.text(10000, 10000, 'grep', { - fontSize: '32px', - fontFamily: 'Arial', - color: '#ffffff', - backgroundColor: '#000000', - }).setPadding(32); - this.passiveNodeData = passiveDataNode; this.passiveEdgeData = passiveDataEdge; this.addPassiveNodes(); + this.addCameraControl(); + this.addEvents(); this.drawPassiveEdges(); - this.addCanmeraControl(); } addPassiveNodes() { @@ -39,20 +33,32 @@ class Passives extends Phaser.Scene { new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text) ).setInteractive(); }); + } + addCameraControl() { + this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ + camera: this.cameras.main, + zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), + zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), + acceleration: 0.005, + drag: 0.0005, + maxSpeed: 0.001, + }); + } + + addEvents() { this.input.on('pointerover', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { - if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); - this.nodeText.x = pointer.x + this.cameras.main.scrollX; - this.nodeText.y = pointer.y + this.cameras.main.scrollY; - this.nodeText.text = gameObjects[0].text; - } else { - this.nodeText.text = ''; + if (!gameObjects[0].alloc) { + gameObjects[0].setTint(0xff00ff); + } + this.displayPassiveText(gameObjects[0], pointer); } }); this.input.on('pointerout', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); + this.nodeText.destroy(); } }); this.input.on('pointerup', (pointer, gameObjects) => { @@ -65,10 +71,20 @@ class Passives extends Phaser.Scene { } } }); - + this.input.on('pointermove', (pointer) => { + const zoomFactor = 2 / this.cameras.main.zoom; + if (this.pan) { + const points = pointer.getInterpolatedPosition(2); + this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x); + this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y); + } + }, this); this.input.keyboard.on('keydown_A', () => { this.updatePassives(); // Will update nodes from state }, 0, this); + this.input.keyboard.on('keydown_S', () => { + this.scene.switch('combat'); + }, 0, this); } drawPassiveEdges() { @@ -87,22 +103,18 @@ class Passives extends Phaser.Scene { }); } - addCanmeraControl() { - this.input.on('pointermove', (pointer) => { - if (this.pan) { - const points = pointer.getInterpolatedPosition(2); - this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; - this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; - } - }, this); - this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ - camera: this.cameras.main, - zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), - zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), - acceleration: 0.005, - drag: 0.0005, - maxSpeed: 0.001, - }); + displayPassiveText(node, pointer) { + if (this.nodeText) this.nodeText.destroy(); + this.nodeText = this.add.text(node.x, node.y, node.text, { + fontSize: '20px', + fontFamily: 'Arial', + color: '#ffffff', + backgroundColor: '#222222', + }).setPadding(32); + this.nodeText.setAlpha(0.8); + this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0); + this.nodeText.setWordWrapWidth(450); + this.nodeText.setScale(1 / this.cameras.main.zoom); } updatePassives() { @@ -123,4 +135,4 @@ class Passives extends Phaser.Scene { } } -module.exports = Passives; +module.exports = PhaserPassives;