ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revamped hitboxes

Browse Source
This commit is contained in:
Mashy 2018-12-06 22:08:48 +10:00
parent eb12e4c568
commit 3c2a7dbd45
4 changed files with 148 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/scenes/combat.cryps.js
View File

@ -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;
};

112
client/src/scenes/combat.hitbox.js Normal file
View File

@ -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;

4
client/src/scenes/combat.js
View File

@ -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;
}

50
client/src/scenes/combat.render.resolutions.js
View File

@ -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, () => {