From 0a9040b4276e1f79a5081f6acefac07e8fb4c015 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 29 Nov 2018 01:48:13 +1000 Subject: [PATCH] scene restart stuff, doesn't spam rerender --- client/src/events.js | 4 +- client/src/scenes/combat.animations.js | 2 +- client/src/scenes/combat.cryps.js | 22 ++++-- client/src/scenes/combat.js | 73 +++++++++++++------ .../src/scenes/combat.render.resolutions.js | 9 +-- 5 files changed, 74 insertions(+), 36 deletions(-) diff --git a/client/src/events.js b/client/src/events.js index 768174e6..a8489202 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -50,8 +50,10 @@ function registerEvents(registry, events) { } else if (game.phase === 'Target') { ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id); } + activeSkill.setTint(0xff0000); + } else { + activeSkill.clearTint(); } - activeSkill.setTint(0xff0000); registry.set('activeSkill', null); } }); diff --git a/client/src/scenes/combat.animations.js b/client/src/scenes/combat.animations.js index 87d6a339..34765060 100644 --- a/client/src/scenes/combat.animations.js +++ b/client/src/scenes/combat.animations.js @@ -32,7 +32,7 @@ class CombatSkills extends Phaser.GameObjects.Group { scale: { start: 0.4, end: 0 }, quantity: 4, blendMode: 'ADD', - lifespan: 2000, + lifespan, }); this.add(particles); this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 1ea6e7cf..3960ae46 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -119,7 +119,8 @@ class HealthBar extends Phaser.GameObjects.Graphics { } takeDamage(damage) { - this.hp -= damage; + const takeDamage = (damage > this.hp) ? this.hp : damage; + this.hp -= takeDamage; this.clear(); this.drawHealthBar(); } @@ -134,7 +135,8 @@ function renderCryp(scene, group, cryp, 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, avatar, cryp, healthBar)) + const crypSpawn = new CrypImage(scene, team, iter, avatar, cryp, healthBar); + scene.add.existing(crypSpawn) .setScale(0.5) .setInteractive(); group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]); @@ -171,17 +173,20 @@ class CombatCryps extends Phaser.GameObjects.Group { this.scene = scene; } - update(game) { + update(game, createCryps) { // Setting gamePhase will stop redraw unless phase changes again - this.scene.registry.set('gamePhase', game.phase); + this.removeSkills(); // Destroy skills currently shown as the game state has changed 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 crypObj = renderCryp(this.scene, this, cryp, 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(); @@ -191,6 +196,11 @@ class CombatCryps extends Phaser.GameObjects.Group { }; allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); + return true; + } + + removeSkills() { + this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy()); } } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 8c7a119e..3528de41 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -15,22 +15,23 @@ class Combat extends Phaser.Scene { } 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('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'); + // Textures already loaded can do proper check in future when theres more textures + if (!(this.textures.getTextureKeys().length > 0)) { + 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('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'); + } } create() { this.registry.events.on('changedata', this.updateData, this); this.input.keyboard.on('keydown_S', () => { - this.scene.switch('CrypList'); // Switch back to cryp list - this.registry.set('game', null); + this.endGame(); }, 0, this); this.input.on('pointerup', (pointer, obj) => { @@ -42,9 +43,6 @@ class Combat extends Phaser.Scene { } }); - this.combatCryps = new CombatCryps(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); @@ -62,6 +60,22 @@ class Combat extends Phaser.Scene { return true; } + startGame(game) { + this.registry.set('gamePhase', game.phase); + this.renderedResolves = game.resolved.length; // In case you rejoin mid way + this.combatCryps = new CombatCryps(this); + this.combatCryps.update(game, true); + return true; + } + + endGame() { + this.scene.switch('CrypList'); // Switch back to cryp list + this.registry.set('game', null); + this.registry.set('gamePhase', false); + this.scene.stop(); + return true; + } + update() { this.fetchGame(); return true; @@ -70,30 +84,42 @@ class Combat extends Phaser.Scene { updateData(parent, key, data) { if (key === 'game') { if (!data) return false; + if (!this.registry.get('gamePhase')) { + this.startGame(data); + return true; + } this.redrawGame(data); } return true; } redrawGame(game) { - // Only redraw if the game is animating or the phase has changed - const updatedNeeded = !this.registry.get('gameAnimating'); - if (!updatedNeeded) return false; - // do we need to render resolution animations? + const isAnimating = this.registry.get('gameAnimating'); + if (isAnimating) return false; if (game.resolved.length !== this.renderedResolves) { const newResolutions = game.resolved.slice(this.renderedResolves); renderResolutions(this, game, this.combatCryps, newResolutions); this.renderedResolves = game.resolved.length; + this.combatCryps.removeSkills(); return true; } - - this.combatCryps.clear(true, true); - this.combatCryps.update(game); + // has the phase changed? + const phaseChange = (this.registry.get('gamePhase') === game.phase); + if (phaseChange) return false; + this.registry.set('gamePhase', game.phase); + this.combatCryps.update(game, false); // update log // shallow copy because reverse mutates - this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); + this.log.setText(Array.from(game.log).reverse()); + + // Game over? + if (game.phase === 'Finish') { + this.time.delayedCall(5000, () => { + this.endGame(); + }); + } return true; } @@ -113,7 +139,8 @@ class Combat extends Phaser.Scene { }, this); } } + return true; } } -module.exports = Combat; \ No newline at end of file +module.exports = Combat; diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index b5d89c59..4cadbac5 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -27,13 +27,12 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) { .filter(obj => obj instanceof CrypImage) .find(c => c.cryp.id === enemyCryp.id); - const target = allyCryp.id === resolution.target_cryp_id ? enemySpawn : allySpawn; + const target = allyCryp.id === resolution.target_cryp_id ? allySpawn : enemySpawn; return { allySpawn, enemySpawn, target }; } function animatePhase(scene, group, game, resolution, cb) { const animations = new CombatAnimations(scene); - // Find cryps and targets const tweenParams = (targets, centreSpot, enemy) => { let x = centreSpot ? COMBAT.width() * 0.3 : targets.x; @@ -59,16 +58,16 @@ function animatePhase(scene, group, game, resolution, cb) { // Move cryps into posistion scene.tweens.add(moveAllyBattle); scene.tweens.add(moveEnemyBattle); - // animate animation const animation = randomAnimation(); scene.time.delayedCall(MOVE_CREEP, () => { - const isAlly = resolution.target_team_id === account.id; + const isAlly = resolution.target_team_id !== account.id; animations[animation](isAlly); // Target cryp takes damage scene.time.delayedCall(ANIMATION_DURATION, () => { - target.takeDamage(100); + const damage = resolution.resolution.results[0][1].amount; + target.takeDamage(damage); // Move cryps back scene.time.delayedCall(DAMAGE_TICK, () => {