From 98d8c7e29b7c3c9821096bf734506202fa361b00 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 26 Nov 2018 21:26:34 +1000 Subject: [PATCH] Cryps move for combat --- client/src/scenes/combat.cryps.js | 10 +++- client/src/scenes/combat.js | 7 +-- client/src/scenes/combat.render.js | 79 ++++++++++++++++++++++-------- client/src/scenes/combat.skills.js | 29 +++++------ client/src/scenes/constants.js | 10 ++++ 5 files changed, 94 insertions(+), 41 deletions(-) diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 19291c91..e5698e1c 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -1,6 +1,6 @@ const Phaser = require('phaser'); -const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants'); +const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants'); const calcMargin = () => { const CRYP_MARGIN = COMBAT.height() / 5; @@ -72,6 +72,14 @@ class CrypImage extends Phaser.GameObjects.Image { this.scene.registry.set('activeCryp', null); } } + + takeDamage(damage) { + this.setTint(0xff0000); + this.healthbar.takeDamage(damage); + this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => { + this.clearTint(); + }); + } } class CrypSkill extends Phaser.GameObjects.Text { diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index c04f59c5..a98fe285 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -5,8 +5,9 @@ const { POSITIONS: { COMBAT }, TEXT } = require('./constants'); const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps'); const combatRender = require('./combat.render'); const CombatSkills = require('./combat.skills'); + const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE']; - const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R']; +const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R']; class Combat extends Phaser.Scene { @@ -68,10 +69,10 @@ class Combat extends Phaser.Scene { while (game.log.length !== this.logIter) { if (game.log[this.logIter] === '') { this.registry.set('resolve', true); - this.crypTeamRender.destroy(true); this.logIter += 1; + this.crypTeamRender.destroy(true); this.crypTeamRender = new DrawCrypTeams(this, game); - combatRender(this, game); + combatRender(this, game, this.crypTeamRender); return true; } this.logIter += 1; } diff --git a/client/src/scenes/combat.render.js b/client/src/scenes/combat.render.js index ddd6effc..b0730f9d 100644 --- a/client/src/scenes/combat.render.js +++ b/client/src/scenes/combat.render.js @@ -1,5 +1,8 @@ -const Phaser = require('phaser'); -const { renderCryp } = require('./combat.cryps'); +const { CrypImage } = require('./combat.cryps'); +const { DELAYS, POSITIONS: { COMBAT } } = require('./constants'); + +const MOVE_CREEP = 1000; +const DAMAGE_TICK = 750; const randomSkill = () => { const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; @@ -7,6 +10,7 @@ const randomSkill = () => { }; function animatePhase(scene, group, game, account, delay) { + // Find cryps and targets const resolved = game.resolved[scene.resolvedIter]; const allyCryp = scene.cryps.filter(c => c.account === account.id).find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id @@ -14,43 +18,78 @@ function animatePhase(scene, group, game, account, delay) { const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find( c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id ); - const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1); - const enemySpawn = renderCryp(scene, group, enemyCryp, game, 1, 1); + const allySpawn = group.children.entries + .filter(obj => obj instanceof CrypImage) + .find(c => c.cryp.id === allyCryp.id); + const enemySpawn = group.children.entries + .filter(obj => obj instanceof CrypImage) + .find(c => c.cryp.id === enemyCryp.id); const target = allyCryp.id === resolved.target_cryp_id ? allySpawn : enemySpawn; - const targetCrypData = allyCryp.id === resolved.target_cryp_id ? allyCryp : enemyCryp; + const allyCrypX = allySpawn.x; const allyCrypY = allySpawn.y; + const enemyCrypX = enemySpawn.x; const enemyCrypY = enemySpawn.y; + // Move cryps into posistion + scene.tweens.add({ + targets: allySpawn, + x: COMBAT.x() + COMBAT.width() * 0.3, + y: COMBAT.height() * 13.25 / 35, + ease: 'Power1', + duration: MOVE_CREEP, + }); - scene.time.delayedCall(delay, () => { - targetCrypData.hp.base -= 100; // Mutates stored cryp data - target.healthbar.takeDamage(100); - target.setTint(0xff0000); + scene.tweens.add({ + targets: enemySpawn, + x: COMBAT.x() + COMBAT.width() * 0.7, + y: COMBAT.height() * 13.25 / 35, + ease: 'Power1', + duration: MOVE_CREEP, + }); + // Target cryp takes damage into posistion + scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => { + target.takeDamage(100); + }); + // Move cryps back + scene.time.delayedCall(delay + DELAYS.MOVE_CREEP + DELAYS.DAMAGE_TICK, () => { + scene.tweens.add({ + targets: allySpawn, + x: allyCrypX, + y: allyCrypY, + ease: 'Power1', + duration: MOVE_CREEP, + }); + + scene.tweens.add({ + targets: enemySpawn, + x: enemyCrypX, + y: enemyCrypY, + ease: 'Power1', + duration: MOVE_CREEP, + }); }); } -function combatRender(scene, game) { - let delay = 0; +function combatRender(scene, game, group) { const skill = randomSkill(); const resolved = game.resolved[scene.resolvedIter]; const account = scene.registry.get('account'); - const animatedGroup = new Phaser.GameObjects.Group(scene); const target = resolved.source_team_id === account.id; - - delay = scene.skills[skill](target); - // animatePhase(scene, animatedGroup, game, account, delay[0]); + const delay = DELAYS[skill]; + scene.time.delayedCall(DELAYS.MOVE_CREEP, () => { + scene.skills[skill](target); + }); + animatePhase(scene, group, game, account, delay[0]); if (scene.iterateLog(game)) { - scene.time.delayedCall(delay[1], () => { + scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => { scene.registry.set('resolve', false); scene.skills.cleanup(); - animatedGroup.destroy(true); scene.renderLog(game); }); } else { - scene.time.delayedCall(delay[1], () => { + scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => { scene.skills.cleanup(); - animatedGroup.destroy(true); - combatRender(scene, game); + combatRender(scene, game, group); }); } return true; diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 8be4e7d6..a90df64f 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -7,7 +7,7 @@ const randomColour = () => { }; const animationParams = (target) => { - const spawnLocation = target ? COMBAT.width() * 0.175 : COMBAT.width() * 0.55; + const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65; const speed = target ? 250 : -250; const img = randomColour(); const angleMin = target ? 320 : 180; @@ -26,7 +26,7 @@ class CombatSkills extends Phaser.GameObjects.Group { const particles = this.scene.add.particles(img); const emitter = particles.createEmitter({ x: spawnLocation, - y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 }, + y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 }, lifespan: 2000, speedX: { min: speed, max: speed * 2 }, scale: { start: 0.4, end: 0 }, @@ -35,7 +35,6 @@ class CombatSkills extends Phaser.GameObjects.Group { }); this.add(particles); this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); - return [1500, 3000]; } spit(target) { @@ -43,7 +42,7 @@ class CombatSkills extends Phaser.GameObjects.Group { const particles = this.scene.add.particles(img); const emitter = particles.createEmitter({ x: spawnLocation, - y: COMBAT.height() * 0.5, + y: COMBAT.height() * 0.35, lifespan: 2000, angle: { min: angleMin, max: angleMax }, speed: speed * 2, @@ -54,7 +53,6 @@ class CombatSkills extends Phaser.GameObjects.Group { }); this.add(particles); this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this); - return [1500, 3000]; } gravBomb(target) { @@ -77,26 +75,25 @@ class CombatSkills extends Phaser.GameObjects.Group { }); this.add(particles); this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene); - return [1000, 2500]; } gravBlast(target) { const img = randomColour(); - const spawnLocation = target ? COMBAT.width() * 0.2 : COMBAT.width() * 0.45; - const targetLocation = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1; + const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65; + const targetLocation = target ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3; const particles = this.scene.add.particles(img); const bounds = target - ? { x: COMBAT.width() * 0.15, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 } - : { x: 0, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 }; + ? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 } + : { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }; const well = particles.createGravityWell({ x: spawnLocation, - y: COMBAT.height() * 0.5, + y: COMBAT.height() * 0.35, power: 4, gravity: 500, }); const emitter = particles.createEmitter({ x: spawnLocation, - y: COMBAT.height() * 0.5, + y: COMBAT.height() * 0.35, lifespan: 2000, speed: 1000, scale: { start: 0.7, end: 1 }, @@ -106,19 +103,18 @@ class CombatSkills extends Phaser.GameObjects.Group { this.add(particles); this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene); this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene); - return [1500, 3000]; } chargeBall(target) { const { img, spawnLocation } = animationParams(target); - const targetLocation = target ? 0.7 * COMBAT.width() : 0; + const targetLocation = target ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width(); const particles = this.scene.add.particles(img); const emitter = particles.createEmitter({ x: 0, y: 0, lifespan: 1000, moveToX: spawnLocation, - moveToY: COMBAT.height() * 0.2, + moveToY: COMBAT.height() * 0.1, scale: 0.75, quantity: 4, _frequency: 20, @@ -128,7 +124,7 @@ class CombatSkills extends Phaser.GameObjects.Group { const emitter2 = particles.createEmitter({ radial: false, x: { min: spawnLocation, max: targetLocation, steps: 256 }, - y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.6, steps: 256 }, + y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 256 }, lifespan: 1000, quantity: 4, gravityY: 0, @@ -140,7 +136,6 @@ class CombatSkills extends Phaser.GameObjects.Group { this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene); this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene); - return [3000, 4000]; } cleanup() { diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 3ab91dd2..a7b52d58 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -103,6 +103,16 @@ module.exports = { WHITE: 0xffffff, }, + DELAYS: { + MOVE_CREEP: 1000, + DAMAGE_TICK: 750, + wall: [1500, 3000], + spit: [1500, 3000], + gravBomb: [1500, 3000], + gravBlast: [1500, 3000], + chargeBall: [3000, 4000], + }, + SKILLS: { LEARNABLE: [ 'Attack',