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

Cryps no longer constantly rerender, only update on phase change

Browse Source
This commit is contained in:
Mashy 2018-11-28 11:34:04 +10:00
parent bd7e56e8cc
commit c74782502f
5 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/events.js
View File

@ -51,7 +51,7 @@ function registerEvents(registry, events) {
ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id); ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id);
} }
} }
activeSkill.clearTint(); activeSkill.setTint(0xff0000);
registry.set('activeSkill', null); registry.set('activeSkill', null);
} }
}); });

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

@ -44,11 +44,11 @@ const crypPosition = (team, iter) => {
}; };
class CrypImage extends Phaser.GameObjects.Image { 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 // Avatar will be a property of cryp
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter); const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
super(scene, crypAvatarX, crypAvatarY, avatar); 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; this.healthbar = healthbar;
} }
@ -66,14 +66,19 @@ class CrypImage extends Phaser.GameObjects.Image {
} }
class CrypSkill extends Phaser.GameObjects.Text { 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 // Avatar will be a property of cryp
if (skill) {
const CD_TEXT = skill.cd ? `(${skill.cd}T)` : ''; const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`; const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
super(scene, x, y, SKILL_TEXT, TEXT.NORMAL); super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
this.cryp = cryp; this.skill = skill; this.scene = scene; this.cryp = cryp;
this.setInteractive(); this.skill = skill;
this.scene = scene;
this.setInteractive();
} else {
super(scene, x, y, cryp.name, TEXT.HEADER);
}
} }
clickHandler() { 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 // Add Image Avatar Class
const avatar = team ? 'magmar' : 'alk'; const avatar = team ? 'magmar' : 'alk';
// Add cryp hp // 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 crypHpText = scene.add.text(healthTextX, healthTextY, '', TEXT.NORMAL);
const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText)); const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
// Add cryp name // 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) .setScale(0.5)
.setInteractive(); .setInteractive();
group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]); group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
return crypSpawn; return crypSpawn;
} }
function renderSkills(scene, group, cryp, game, team, iter) { function renderSkills(scene, group, cryp, game, iter) {
const skillList = []; 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) => { 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 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)); group.add(scene.add.existing(skillObj));
skillList.push(skillObj); skillList.push(skillObj);
}; };
if (scene.registry.get('resolve')) return true;
if (game.phase === 'Skill' && cryp.account === scene.account.id) { if (game.phase === 'Skill' && cryp.account === scene.account.id) {
if (cryp.hp.base === 0) return true; if (cryp.hp.base === 0) return true;
cryp.skills.forEach(addSkill); cryp.skills.forEach(addSkill);
@ -164,20 +168,40 @@ function renderSkills(scene, group, cryp, game, team, iter) {
class DrawCrypTeams extends Phaser.GameObjects.Group { class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) { constructor(scene, game) {
super(scene); 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); const allyTeam = game.teams.find(t => t.id === account.id);
// in future there will be more than one // in future there will be more than one
const [enemyTeam] = game.teams.filter(t => t.id !== account.id); const [enemyTeam] = game.teams.filter(t => t.id !== account.id);
const renderTeam = (cryp, iter, team) => { const renderTeam = (cryp, iter, team) => {
const skillsObj = renderSkills(scene, this, cryp, game, team, iter); const crypObj = createCryps
const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter); ? 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); 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)); allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); 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 }; module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };

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

@ -7,6 +7,7 @@ const renderResolutions = require('./combat.render.resolutions');
const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE']; 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'];
const CombatSkills = require('./combat.skills');
class Combat extends Phaser.Scene { class Combat extends Phaser.Scene {
@ -40,13 +41,7 @@ class Combat extends Phaser.Scene {
this.registry.set('activeSkill', null); 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.renderedResolves = 0;
this.registry.set('gameAnimating', false); this.registry.set('gameAnimating', false);
this.account = this.registry.get('account'); this.account = this.registry.get('account');
this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); 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) { updateData(parent, key, data) {
if (key === 'game') { 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); this.redrawGame(data);
} }
return true; return true;
} }
redrawGame(game) { redrawGame(game) {
if (!game) return false; // Only redraw if the game is animating or the phase has changed
const updatedNeeded = !this.registry.get('gameAnimating') && !(this.registry.get('gamePhase') === game.phase);
const updatedNeeded = !this.registry.get('activeSkill') && !this.registry.get('gameAnimating');
if (!updatedNeeded) return false; if (!updatedNeeded) return false;
// do we need to render resolution animations? // do we need to render resolution animations?
if (game.resolved.length !== this.renderedResolves) { 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); const newResolutions = game.resolved.slice(this.renderedResolves);
renderResolutions(this, game, this.crypTeamRender, newResolutions); renderResolutions(this, game, this.crypTeamRender, newResolutions);
this.renderedResolves = game.resolved.length; this.renderedResolves = game.resolved.length;
@ -76,8 +77,8 @@ class Combat extends Phaser.Scene {
} }
// If not animating resolutions render static skill / block phase // If not animating resolutions render static skill / block phase
if (this.crypTeamRender) this.crypTeamRender.destroy(true); // Update relevant parts of the game state without redrawing it all
this.crypTeamRender = new DrawCrypTeams(this, game); this.crypTeamRender.updateCryps(game, false);
// update log // update log
// shallow copy because reverse mutates // shallow copy because reverse mutates
@ -86,13 +87,6 @@ class Combat extends Phaser.Scene {
return true; 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) { crypKeyHandler(cryp, iter) {
if (CRYP_KEY_MAP[iter]) { if (CRYP_KEY_MAP[iter]) {
this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]); this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]);

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

@ -8,8 +8,8 @@ const {
} = require('./constants'); } = require('./constants');
const randomSkill = () => { const randomSkill = () => {
const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; const skills = ['chargeBall'];
return skills[Math.floor(Math.random() * 5)]; return skills[Math.floor(Math.random() * 1)];
}; };
function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) { function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {

31
client/src/scenes/combat.skills.js
View File

@ -22,7 +22,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
} }
wall(isAlly) { wall(isAlly) {
const lifespan = DELAYS.EFFECT_DURATION; const lifespan = DELAYS.ANIMATION_DURATION;
const { spawnLocation, speed, img } = animationParams(isAlly); const { spawnLocation, speed, img } = animationParams(isAlly);
const particles = this.scene.add.particles(img); const particles = this.scene.add.particles(img);
const emitter = particles.createEmitter({ const emitter = particles.createEmitter({
@ -32,14 +32,14 @@ class CombatSkills extends Phaser.GameObjects.Group {
scale: { start: 0.4, end: 0 }, scale: { start: 0.4, end: 0 },
quantity: 4, quantity: 4,
blendMode: 'ADD', blendMode: 'ADD',
lifespan, lifespan: 2000,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this.scene); this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
} }
spit(isAlly) { spit(isAlly) {
const lifespan = DELAYS.EFFECT_DURATION; const lifespan = DELAYS.ANIMATION_DURATION;
const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(isAlly); const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(isAlly);
const particles = this.scene.add.particles(img); const particles = this.scene.add.particles(img);
const emitter = particles.createEmitter({ const emitter = particles.createEmitter({
@ -58,13 +58,12 @@ class CombatSkills extends Phaser.GameObjects.Group {
} }
gravBomb(isAlly) { 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 particles = this.scene.add.particles(img);
const location = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
const well = particles.createGravityWell({ const well = particles.createGravityWell({
x: location, x: spawnLocation,
y: COMBAT.height() * 0.25, y: COMBAT.height() * 0.25,
power: 4, power: 4,
gravity: 500, gravity: 500,
@ -82,7 +81,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
} }
gravBlast(isAlly) { gravBlast(isAlly) {
const lifespan = DELAYS.EFFECT_DURATION; const lifespan = DELAYS.ANIMATION_DURATION;
const WELL_END = lifespan / 2; const WELL_END = lifespan / 2;
const img = randomColour(); const img = randomColour();
@ -113,8 +112,8 @@ class CombatSkills extends Phaser.GameObjects.Group {
} }
chargeBall(isAlly) { chargeBall(isAlly) {
const lifespan = DELAYS.EFFECT_DURATION; const lifespan = DELAYS.ANIMATION_DURATION;
const CHARGE_LIFESPAN = lifespan / 2; const CHARGE_LIFESPAN = lifespan / 3;
const { img, spawnLocation } = animationParams(isAlly); const { img, spawnLocation } = animationParams(isAlly);
const targetLocation = isAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width(); 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({ const emitter2 = particles.createEmitter({
radial: false, radial: false,
x: { min: spawnLocation, max: targetLocation, steps: 256 }, x: { min: spawnLocation, max: targetLocation, steps: 90 },
y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 256 }, y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 90 },
quantity: 4, quantity: 4,
gravityY: 0, gravityY: 0,
scale: { start: 1.5, end: 0, ease: 'Power3' }, scale: { start: 2, end: 0.1, ease: 'Power3' },
blendMode: 'ADD', blendMode: 'ADD',
active: false, active: false,
lifespan, lifespan: CHARGE_LIFESPAN,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene); 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); this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene);
} }