From c74782502ff38fd9df987e905e736ba572941a8c Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 28 Nov 2018 11:34:04 +1000 Subject: [PATCH] Cryps no longer constantly rerender, only update on phase change --- client/src/events.js | 2 +- client/src/scenes/combat.cryps.js | 68 +++++++++++++------ client/src/scenes/combat.js | 30 ++++---- .../src/scenes/combat.render.resolutions.js | 4 +- client/src/scenes/combat.skills.js | 31 ++++----- 5 files changed, 76 insertions(+), 59 deletions(-) diff --git a/client/src/events.js b/client/src/events.js index 543da492..768174e6 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -51,7 +51,7 @@ function registerEvents(registry, events) { ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id); } } - activeSkill.clearTint(); + activeSkill.setTint(0xff0000); registry.set('activeSkill', null); } }); diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index ac181aad..787a3da2 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -44,11 +44,11 @@ const crypPosition = (team, iter) => { }; class CrypImage extends Phaser.GameObjects.Image { - constructor(scene, team, iter, skills, avatar, cryp, healthbar) { + constructor(scene, team, iter, avatar, cryp, healthbar) { // Avatar will be a property of cryp const { crypAvatarX, crypAvatarY } = crypPosition(team, iter); super(scene, crypAvatarX, crypAvatarY, avatar); - this.scene = scene; this.cryp = cryp; this.skills = skills; + this.scene = scene; this.cryp = cryp; this.iter = iter; this.healthbar = healthbar; } @@ -66,14 +66,19 @@ class CrypImage extends Phaser.GameObjects.Image { } class CrypSkill extends Phaser.GameObjects.Text { - constructor(scene, x, y, team, skill, cryp) { + constructor(scene, x, y, skill, cryp) { // Avatar will be a property of cryp - - const CD_TEXT = skill.cd ? `(${skill.cd}T)` : ''; - const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`; - super(scene, x, y, SKILL_TEXT, TEXT.NORMAL); - this.cryp = cryp; this.skill = skill; this.scene = scene; - this.setInteractive(); + if (skill) { + const CD_TEXT = skill.cd ? `(${skill.cd}T)` : ''; + const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`; + super(scene, x, y, SKILL_TEXT, TEXT.NORMAL); + this.cryp = cryp; + this.skill = skill; + this.scene = scene; + this.setInteractive(); + } else { + super(scene, x, y, cryp.name, TEXT.HEADER); + } } clickHandler() { @@ -120,7 +125,7 @@ class HealthBar extends Phaser.GameObjects.Graphics { } } -function renderCryp(scene, group, cryp, skills, game, team, iter) { +function renderCryp(scene, group, cryp, game, team, iter) { // Add Image Avatar Class const avatar = team ? 'magmar' : 'alk'; // Add cryp hp @@ -129,26 +134,25 @@ function renderCryp(scene, group, cryp, skills, game, team, iter) { const crypHpText = scene.add.text(healthTextX, healthTextY, '', TEXT.NORMAL); const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText)); // Add cryp name - const crypSpawn = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar)) + const crypSpawn = scene.add.existing(new CrypImage(scene, team, iter, avatar, cryp, healthBar)) .setScale(0.5) .setInteractive(); group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]); return crypSpawn; } -function renderSkills(scene, group, cryp, game, team, iter) { +function renderSkills(scene, group, cryp, game, iter) { const skillList = []; - const nameTextPosition = skillTextPosition(iter, 0); - + // If the cryps have been spawned already put the skills in a corresponding pos + const namePos = skillTextPosition(iter, 0); const addSkill = (skill, i) => { - if (i === 0) group.add(scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER)); + // Draw skill group name as part of the "skill class" so we can destroy it later + if (i === 0) group.add(scene.add.existing(new CrypSkill(scene, namePos[0], namePos[1], false, cryp))); const skillTextPos = skillTextPosition(iter, i + 2); - const skillObj = new CrypSkill(scene, skillTextPos[0], skillTextPos[1], team, skill, cryp); + const skillObj = new CrypSkill(scene, skillTextPos[0], skillTextPos[1], skill, cryp); group.add(scene.add.existing(skillObj)); skillList.push(skillObj); }; - - if (scene.registry.get('resolve')) return true; if (game.phase === 'Skill' && cryp.account === scene.account.id) { if (cryp.hp.base === 0) return true; cryp.skills.forEach(addSkill); @@ -164,20 +168,40 @@ function renderSkills(scene, group, cryp, game, team, iter) { class DrawCrypTeams extends Phaser.GameObjects.Group { constructor(scene, game) { super(scene); - const account = scene.registry.get('account'); + this.scene = scene; + this.updateCryps(game, true); + } + + updateCryps(game, createCryps) { + // Setting gamePhase will stop redraw unless phase changes again + this.scene.registry.set('gamePhase', game.phase); + // Destroy skills currently shown as the game state has changed + this.removeSkills(); + const account = this.scene.registry.get('account'); const allyTeam = game.teams.find(t => t.id === account.id); // in future there will be more than one const [enemyTeam] = game.teams.filter(t => t.id !== account.id); const renderTeam = (cryp, iter, team) => { - const skillsObj = renderSkills(scene, this, cryp, game, team, iter); - const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter); + const crypObj = createCryps + ? renderCryp(this.scene, this, cryp, game, team, iter) + : this.children.entries + .filter(obj => obj instanceof CrypImage) + .find(c => c.cryp.id === cryp.id); + // Update to health bars wont be needed when dmg taken is done properly + crypObj.healthbar.hp = cryp.hp.base; + crypObj.healthbar.drawHealthBar(); + crypObj.skills = renderSkills(this.scene, this, cryp, game, crypObj.iter); const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team); - if (addKeys) scene.crypKeyHandler(crypObj, iter); + if (addKeys) this.scene.crypKeyHandler(crypObj, crypObj.iter); }; allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); } + + removeSkills() { + this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy()); + } } module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp }; diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 6c2ee8d2..59a949f5 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -7,6 +7,7 @@ const renderResolutions = require('./combat.render.resolutions'); const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE']; const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R']; +const CombatSkills = require('./combat.skills'); class Combat extends Phaser.Scene { @@ -40,13 +41,7 @@ class Combat extends Phaser.Scene { this.registry.set('activeSkill', null); } }); - - const logX = COMBAT.LOG.x(); - const logY = COMBAT.LOG.y(); - const logWidth = COMBAT.LOG.width(); - // this.skills = new CombatSkills(this); this.renderedResolves = 0; - this.registry.set('gameAnimating', false); this.account = this.registry.get('account'); this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); @@ -56,19 +51,25 @@ class Combat extends Phaser.Scene { updateData(parent, key, data) { if (key === 'game') { + if (!data) return false; + if (!this.registry.get('gamePhase')) { // Game hasn't started yet + this.crypTeamRender = new DrawCrypTeams(this, data); + } + this.redrawGame(data); } return true; } redrawGame(game) { - if (!game) return false; - - const updatedNeeded = !this.registry.get('activeSkill') && !this.registry.get('gameAnimating'); + // Only redraw if the game is animating or the phase has changed + const updatedNeeded = !this.registry.get('gameAnimating') && !(this.registry.get('gamePhase') === game.phase); if (!updatedNeeded) return false; // do we need to render resolution animations? if (game.resolved.length !== this.renderedResolves) { + // Turn skills off...in future we might get it to show something else instead + this.crypTeamRender.removeSkills(); const newResolutions = game.resolved.slice(this.renderedResolves); renderResolutions(this, game, this.crypTeamRender, newResolutions); this.renderedResolves = game.resolved.length; @@ -76,8 +77,8 @@ class Combat extends Phaser.Scene { } // If not animating resolutions render static skill / block phase - if (this.crypTeamRender) this.crypTeamRender.destroy(true); - this.crypTeamRender = new DrawCrypTeams(this, game); + // Update relevant parts of the game state without redrawing it all + this.crypTeamRender.updateCryps(game, false); // update log // shallow copy because reverse mutates @@ -86,13 +87,6 @@ class Combat extends Phaser.Scene { return true; } - iterateLog(game) { - this.logIter += 1; - this.renderedResolves += 1; - this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); - return this.resolvedIter === game.resolved.length; - } - crypKeyHandler(cryp, iter) { if (CRYP_KEY_MAP[iter]) { this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]); diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index ea0bd496..394a019d 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -8,8 +8,8 @@ const { } = require('./constants'); const randomSkill = () => { - const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; - return skills[Math.floor(Math.random() * 5)]; + const skills = ['chargeBall']; + return skills[Math.floor(Math.random() * 1)]; }; function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) { diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 477d2e8c..74e35ce8 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -22,7 +22,7 @@ class CombatSkills extends Phaser.GameObjects.Group { } wall(isAlly) { - const lifespan = DELAYS.EFFECT_DURATION; + const lifespan = DELAYS.ANIMATION_DURATION; const { spawnLocation, speed, img } = animationParams(isAlly); const particles = this.scene.add.particles(img); const emitter = particles.createEmitter({ @@ -32,14 +32,14 @@ class CombatSkills extends Phaser.GameObjects.Group { scale: { start: 0.4, end: 0 }, quantity: 4, blendMode: 'ADD', - lifespan, + lifespan: 2000, }); this.add(particles); - this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this.scene); + this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); } spit(isAlly) { - const lifespan = DELAYS.EFFECT_DURATION; + const lifespan = DELAYS.ANIMATION_DURATION; const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(isAlly); const particles = this.scene.add.particles(img); const emitter = particles.createEmitter({ @@ -58,13 +58,12 @@ class CombatSkills extends Phaser.GameObjects.Group { } gravBomb(isAlly) { - const lifespan = DELAYS.EFFECT_DURATION; + const lifespan = DELAYS.ANIMATION_DURATION; - const { spawnLocation, img } = animationParams(isAlly); + const { spawnLocation, img } = animationParams(!isAlly); const particles = this.scene.add.particles(img); - const location = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65; const well = particles.createGravityWell({ - x: location, + x: spawnLocation, y: COMBAT.height() * 0.25, power: 4, gravity: 500, @@ -82,7 +81,7 @@ class CombatSkills extends Phaser.GameObjects.Group { } gravBlast(isAlly) { - const lifespan = DELAYS.EFFECT_DURATION; + const lifespan = DELAYS.ANIMATION_DURATION; const WELL_END = lifespan / 2; const img = randomColour(); @@ -113,8 +112,8 @@ class CombatSkills extends Phaser.GameObjects.Group { } chargeBall(isAlly) { - const lifespan = DELAYS.EFFECT_DURATION; - const CHARGE_LIFESPAN = lifespan / 2; + const lifespan = DELAYS.ANIMATION_DURATION; + const CHARGE_LIFESPAN = lifespan / 3; const { img, spawnLocation } = animationParams(isAlly); const targetLocation = isAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width(); @@ -133,18 +132,18 @@ class CombatSkills extends Phaser.GameObjects.Group { }); const emitter2 = particles.createEmitter({ radial: false, - x: { min: spawnLocation, max: targetLocation, steps: 256 }, - y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 256 }, + x: { min: spawnLocation, max: targetLocation, steps: 90 }, + y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 90 }, quantity: 4, gravityY: 0, - scale: { start: 1.5, end: 0, ease: 'Power3' }, + scale: { start: 2, end: 0.1, ease: 'Power3' }, blendMode: 'ADD', active: false, - lifespan, + lifespan: CHARGE_LIFESPAN, }); this.add(particles); this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene); - this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter2.active = true; }, [], this.scene); + this.scene.time.delayedCall(CHARGE_LIFESPAN * 2, () => { emitter2.active = true; }, [], this.scene); this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene); }