From 3c2a7dbd4555b406b06926d350e0541f56bf0334 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 6 Dec 2018 22:08:48 +1000 Subject: [PATCH] revamped hitboxes --- client/src/scenes/combat.cryps.js | 27 +---- client/src/scenes/combat.hitbox.js | 112 ++++++++++++++++++ client/src/scenes/combat.js | 4 + .../src/scenes/combat.render.resolutions.js | 50 ++++---- 4 files changed, 148 insertions(+), 45 deletions(-) create mode 100644 client/src/scenes/combat.hitbox.js diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 83b0450f..13117d48 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -31,7 +31,7 @@ const crypAvatarText = (team, iter) => { const crypPosition = (team, iter) => { const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin(); - const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team; + const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team; const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter; return { crypAvatarX, crypAvatarY }; }; @@ -48,23 +48,6 @@ class CrypImage extends Phaser.GameObjects.Image { this.team = team; } - clickHandler() { - const gameId = this.scene.registry.get('game').id; - const skillScene = this.scene.scene.get('CombatSkills'); - const { activeSkill, activeTarget } = skillScene; - if (activeSkill) { - activeSkill.activate(); - skillScene.activeSkill = null; - this.scene.game.events.emit('SEND_SKILL', gameId, activeSkill.cryp.id, - this.cryp.account, activeSkill.skill.skill); - } - if (activeTarget) { - activeTarget.activate(); - skillScene.activeTarget = null; - this.scene.game.events.emit('SEND_TARGET', gameId, this.cryp.id, activeTarget.skill.id); - } - } - takeDamage(damage) { this.setTint(0xff0000); this.healthBar.takeDamage(damage); @@ -123,11 +106,6 @@ class CombatCryps extends Phaser.Scene { } create(game) { - this.input.on('pointerup', (pointer, obj) => { - if (obj[0] instanceof CrypImage) { - obj[0].clickHandler(); - } - }); this.cryps = this.add.group(); this.account = this.registry.get('account'); this.drawCryps(game); @@ -157,8 +135,7 @@ class CombatCryps extends Phaser.Scene { // Add cryp name const crypObj = new CrypImage(this, team, iter, avatar, cryp, healthBar); this.cryps.add(this.add.existing(crypObj) - .setScale(0.5) - .setInteractive()); + .setScale(0.5)); return crypObj; }; diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js new file mode 100644 index 00000000..ee63c958 --- /dev/null +++ b/client/src/scenes/combat.hitbox.js @@ -0,0 +1,112 @@ +const Phaser = require('phaser'); +const { POSITIONS: { COMBAT } } = require('./constants'); + +const CRYP_HEIGHT = COMBAT.height() / 7; +const CRYP_WIDTH = COMBAT.width() * 0.2; +const TEAM_MARGIN = COMBAT.width() * 0.775; +const Y_PADDING = COMBAT.height() * 0.1; + +const teamHitBox = (scene, size, team, cback) => { + const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1); + scene.add + .rectangle(TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', cback); +}; + +const crypHitBox = (scene, iter, team, cback) => { + const y = Y_PADDING + iter * (CRYP_HEIGHT + (Y_PADDING * 0.5)); + scene.add + .rectangle(TEAM_MARGIN * team, y, CRYP_WIDTH, CRYP_HEIGHT, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', cback); +}; + +class CombatHitBox extends Phaser.Scene { + constructor() { + super({ key: 'CombatHitBox' }); + } + + create(phase) { + this.phase = phase; + this.registry.events.off('changedata', this.updateData); + this.registry.events.on('changedata', this.updateData, this); + if (phase === 'animating') return true; + this.selectHitBox(phase); + return true; + } + + updateData(parent, key, data) { + if (key === 'game' && data && !this.started && data.phase !== 'Start') { + this.started = true; + this.selectHitBox(data.phase); + } + + if (key === 'gamePhase' && data) { + const shouldUpdate = data !== this.phase; + if (shouldUpdate) this.scene.restart(data); + return false; + } + return true; + } + + selectHitBox(phase) { + this.phase = phase; + const game = this.registry.get('game'); + if (phase === 'Skill') return this.skillHitBox(game); + if (phase === 'Target') return this.targetHitBox(game); + return false; + } + + skillHitBox(game) { + const account = this.registry.get('account'); + game.teams.forEach((t) => { + const cback = () => { + const skillScene = this.scene.get('CombatSkills'); + const { activeSkill } = skillScene; + if (activeSkill) { + activeSkill.activate(); + skillScene.activeSkill = null; + this.game.events.emit('SEND_SKILL', game.id, activeSkill.cryp.id, + t.id, activeSkill.skill.skill); + } + }; + const team = t.id === account.id ? 0 : 1; + const size = t.cryps.length; + teamHitBox(this, size, team, cback); + }); + this.scene.sendToBack(); + } + + targetHitBox(game) { + const account = this.registry.get('account'); + const group = this.scene.get('CombatCryps').cryps; + const skillScene = this.scene.get('CombatSkills'); + + game.teams.forEach(t => t.cryps.forEach((c) => { + const cback = () => { + const { activeTarget } = skillScene; + if (activeTarget) { + activeTarget.activate(); + skillScene.activeTarget = null; + this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill.id); + } + }; + + const crypSpawn = group.children.entries.find(s => s.cryp.id === c.id); + const team = c.account === account.id ? 0 : 1; + crypHitBox(this, crypSpawn.iter, team, cback); + })); + this.scene.sendToBack(); + } + + cleanUp() { + this.registry.events.off('changedata', this.updateData); + this.scene.remove(); + } +} + +module.exports = CombatHitBox; + diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 3cc18de6..33fb0e69 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -5,6 +5,8 @@ const { throttle } = require('lodash'); const CombatLog = require('./combat.log'); const CombatCryps = require('./combat.cryps'); const CombatSkills = require('./combat.skills'); +const CombatHitBox = require('./combat.hitbox'); + const renderResolutions = require('./combat.render.resolutions'); @@ -52,6 +54,7 @@ class Combat extends Phaser.Scene { this.scene.manager.add('CombatLog', CombatLog, true, game); this.renderedResolves = game.resolved.length; // In case you rejoin mid way this.scene.manager.add('CombatSkills', CombatSkills, true, game.phase); + this.scene.manager.add('CombatHitBox', CombatHitBox, true, game.phase); this.registry.set('gamePhase', game.phase); return true; } @@ -62,6 +65,7 @@ class Combat extends Phaser.Scene { this.scene.get('CombatLog').cleanUp(); this.scene.get('CombatCryps').cleanUp(); this.scene.get('CombatSkills').cleanUp(); + this.scene.get('CombatHitBox').cleanUp(); this.scene.remove(); return true; } diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index 6f50965b..28965a15 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -19,23 +19,12 @@ function findResolutionCryps(scene, group, resolution, game) { const targetCryp = game.teams.find(t => t.cryps.find(c => c.id === resolution.target_cryp_id)) .cryps.find(c => c.id === resolution.target_cryp_id); - - const targetSpawn = group.children.entries - .find(c => c.cryp.id === targetCryp.id); + const targetSpawn = group.children.entries.find(c => c.cryp.id === targetCryp.id); return { sourceSpawn, targetSpawn }; } -function animatePhase(scene, game, resolution, cb) { - // Iterate the log - // return early for disabled skills - if (resolution.resolution.disable.disabled) return cb(); - const group = scene.scene.get('CombatCryps').cryps; - const animations = new CombatAnimations(scene); - // Find cryps and targets - const account = scene.registry.get('account'); - const { sourceSpawn, targetSpawn } = findResolutionCryps(scene, group, resolution, game); - +function calculateTweenParams(sourceSpawn, targetSpawn, account) { const tweenParams = (targets, centreSpot) => { const enemy = targets.cryp.account !== account.id; let x = centreSpot ? COMBAT.width() * 0.3 : targets.x; @@ -43,23 +32,44 @@ function animatePhase(scene, game, resolution, cb) { const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y; const ease = 'Power1'; const duration = MOVE_CREEP; - return { targets, x, y, ease, duration }; + return { + targets, x, y, ease, duration, + }; }; const moveSourceBattle = sourceSpawn.cryp.account !== targetSpawn.cryp.account ? tweenParams(sourceSpawn, true) : null; const moveSourceOrig = sourceSpawn.cryp.account !== targetSpawn.cryp.account ? tweenParams(sourceSpawn, false) : null; - const moveEnemyBattle = tweenParams(targetSpawn, true); - const moveEnemyOrig = tweenParams(targetSpawn, false); + const moveTargetBattle = tweenParams(targetSpawn, true); + const moveTargetOrig = tweenParams(targetSpawn, false); + + return { + moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig, + }; +} + +function animatePhase(scene, game, resolution, cb) { + // return early for disabled skills + if (resolution.resolution.disable.disabled) return cb(); + const group = scene.scene.get('CombatCryps').cryps; + const animations = new CombatAnimations(scene); + const account = scene.registry.get('account'); + const animation = randomAnimation(); + + // Find cryps, targets + const { sourceSpawn, targetSpawn } = findResolutionCryps(scene, group, resolution, game); + const { + moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig, + } = calculateTweenParams(sourceSpawn, targetSpawn, account); // Move cryps into posistion if (moveSourceBattle) scene.tweens.add(moveSourceBattle); - scene.tweens.add(moveEnemyBattle); - // animate animation - const animation = randomAnimation(); + scene.tweens.add(moveTargetBattle); + scene.time.delayedCall(MOVE_CREEP, () => { const isAlly = resolution.target_team_id !== account.id; + // animate animation animations[animation](isAlly); // Target cryp takes damage @@ -72,7 +82,7 @@ function animatePhase(scene, game, resolution, cb) { // Move cryps back scene.time.delayedCall(DAMAGE_TICK, () => { if (moveSourceOrig) scene.tweens.add(moveSourceOrig); - scene.tweens.add(moveEnemyOrig); + scene.tweens.add(moveTargetOrig); // all done scene.time.delayedCall(MOVE_CREEP, () => {