rework combat animations cycle

This commit is contained in:
ntr 2018-11-27 23:26:34 +11:00
parent c0eac36e9f
commit cc60c1f003
7 changed files with 150 additions and 117 deletions

View File

@ -13,6 +13,7 @@
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@orange-games/phaser-input": "^2.0.5", "@orange-games/phaser-input": "^2.0.5",
"async": "^2.6.1",
"borc": "^2.0.3", "borc": "^2.0.3",
"docco": "^0.7.0", "docco": "^0.7.0",
"izitoast": "^1.4.0", "izitoast": "^1.4.0",

View File

@ -169,14 +169,18 @@ class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) { constructor(scene, game) {
super(scene); super(scene);
const account = scene.registry.get('account'); const account = 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 renderTeam = (cryp, iter, team) => {
const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter); const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter);
const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter); const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, 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) scene.crypKeyHandler(crypObj, iter);
}; };
scene.allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
scene.enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
} }
} }

View File

@ -3,8 +3,8 @@ const fs = require('fs');
const { POSITIONS: { COMBAT }, TEXT } = require('./constants'); const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps'); const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
const combatRender = require('./combat.render');
const CombatSkills = require('./combat.skills'); const CombatSkills = require('./combat.skills');
const renderResolutions = require('./combat.render');
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'];
@ -45,9 +45,10 @@ class Combat extends Phaser.Scene {
const logX = COMBAT.LOG.x(); const logX = COMBAT.LOG.x();
const logY = COMBAT.LOG.y(); const logY = COMBAT.LOG.y();
const logWidth = COMBAT.LOG.width(); const logWidth = COMBAT.LOG.width();
this.skills = new CombatSkills(this); // this.skills = new CombatSkills(this);
this.logIter = 0; this.resolvedIter = 0; this.renderedResolves = 0;
this.registry.set('resolve', false);
this.registry.set('gameAnimating', false);
this.account = this.registry.get('account'); this.account = this.registry.get('account');
this.log = this.add.text(logX, logY, '', TEXT.NORMAL); this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
this.log.setWordWrapWidth(logWidth); this.log.setWordWrapWidth(logWidth);
@ -56,44 +57,39 @@ class Combat extends Phaser.Scene {
updateData(parent, key, data) { updateData(parent, key, data) {
if (key === 'game') { if (key === 'game') {
if (!this.registry.get('activeSkill') this.redrawGame(data);
&& !this.registry.get('resolve')) {
this.renderLog(data);
}
} }
return true; return true;
} }
renderLog(game) { redrawGame(game) {
if (!game) return false; if (!game) return false;
// Check game status first
while (game.log.length !== this.logIter) { const updatedNeeded = !this.registry.get('activeSkill') && !this.registry.get('gameAnimating');
if (game.log[this.logIter] === '<Resolve Phase>') { if (!updatedNeeded) return false;
this.registry.set('resolve', true);
this.logIter += 1; // do we need to render resolution animations?
combatRender(this, game, this.crypTeamRender); if (game.resolved.length !== this.renderedResolves) {
return true; const newResolutions = game.resolved.slice(this.renderedResolves);
} this.logIter += 1; renderResolutions(this, game, this.crypTeamRender, newResolutions);
this.renderedResolves = game.resolved.length;
return true;
} }
game.teams.forEach((t) => {
if (this.account.id === t.id) { // If not animating resolutions render static skill / block phase
this.allyTeam = t; if (this.crypTeamRender) this.crypTeamRender.destroy(true);
} else { this.crypTeamRender = new DrawCrypTeams(this, game);
this.enemyTeam = t;
} // update log
});
// If not animating render static skill / block phase
if (this.crypTeamRender) {
this.crypTeamRender.destroy(true);
} this.crypTeamRender = new DrawCrypTeams(this, game);
// shallow copy because reverse mutates // shallow copy because reverse mutates
this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
return true; return true;
} }
iterateLog(game) { iterateLog(game) {
this.logIter += 1; this.logIter += 1;
this.resolvedIter += 1; this.renderedResolves += 1;
this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse()); this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
return this.resolvedIter === game.resolved.length; return this.resolvedIter === game.resolved.length;
} }

View File

@ -1,84 +1,105 @@
const { eachSeries } = require('async');
const CombatSkills = require('./combat.skills');
const { CrypImage } = require('./combat.cryps'); const { CrypImage } = require('./combat.cryps');
const { DELAYS, POSITIONS: { COMBAT } } = require('./constants'); const {
DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK },
POSITIONS: { COMBAT },
} = require('./constants');
const randomSkill = () => { const randomSkill = () => {
const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
return skills[Math.floor(Math.random() * 5)]; return skills[Math.floor(Math.random() * 5)];
}; };
function findResolveCryps(scene, group, game) { function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
const resolved = game.resolved[scene.resolvedIter]; const allyCryp = allyTeam.cryps.find(
const allyCryp = scene.allyTeam.cryps.find( c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
);
const enemyCryp = scene.enemyTeam.cryps.find(
c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
); );
const allySpawn = group.children.entries const allySpawn = group.children.entries
.filter(obj => obj instanceof CrypImage) .filter(obj => obj instanceof CrypImage)
.find(c => c.cryp.id === allyCryp.id); .find(c => c.cryp.id === allyCryp.id);
const enemyCryp = enemyTeam.cryps.find(
c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
);
const enemySpawn = group.children.entries const enemySpawn = group.children.entries
.filter(obj => obj instanceof CrypImage) .filter(obj => obj instanceof CrypImage)
.find(c => c.cryp.id === enemyCryp.id); .find(c => c.cryp.id === enemyCryp.id);
const target = allyCryp.id === resolved.target_cryp_id ? allySpawn : enemySpawn; const target = allyCryp.id === resolution.target_cryp_id ? enemySpawn : allySpawn;
return {allySpawn, enemySpawn, target }; return { allySpawn, enemySpawn, target };
} }
function animatePhase(scene, group, game, delay) { function animatePhase(scene, group, game, resolution, cb) {
scene.skills = new CombatSkills(scene);
// Find cryps and targets // Find cryps and targets
const tweenParams = (targets, centreSpot, enemy) => { const tweenParams = (targets, centreSpot, enemy) => {
let x = centreSpot ? COMBAT.width() * 0.3 : targets.x; let x = centreSpot ? COMBAT.width() * 0.3 : targets.x;
x = (enemy && centreSpot) ? x + COMBAT.width() * 0.4 : x; x = (enemy && centreSpot) ? x + COMBAT.width() * 0.4 : x;
const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y; const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y;
const ease = 'Power1'; const ease = 'Power1';
const duration = DELAYS.MOVE_CREEP; const duration = MOVE_CREEP;
return { targets, x, y, ease, duration }; return { targets, x, y, ease, duration };
}; };
const { allySpawn, enemySpawn, target } = findResolveCryps(scene, group, game);
// find the teams
const account = 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 { allySpawn, enemySpawn, target } = findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam);
const moveAllyBattle = tweenParams(allySpawn, true, false); const moveAllyBattle = tweenParams(allySpawn, true, false);
const moveAllyOrig = tweenParams(allySpawn, false, false); const moveAllyOrig = tweenParams(allySpawn, false, false);
const moveEnemyBattle = tweenParams(enemySpawn, true, true); const moveEnemyBattle = tweenParams(enemySpawn, true, true);
const moveEnemyOrig = tweenParams(enemySpawn, false, true); const moveEnemyOrig = tweenParams(enemySpawn, false, true);
// Move cryps into posistion // Move cryps into posistion
scene.tweens.add(moveAllyBattle); scene.tweens.add(moveAllyBattle);
scene.tweens.add(moveEnemyBattle); scene.tweens.add(moveEnemyBattle);
// Target cryp takes damage into posistion
scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => { // animate skill
target.takeDamage(100); const skill = randomSkill();
}); scene.time.delayedCall(MOVE_CREEP, () => {
// Move cryps back const isAlly = resolution.target_team_id === account.id;
scene.time.delayedCall(delay + DELAYS.MOVE_CREEP + DELAYS.DAMAGE_TICK, () => { scene.skills[skill](isAlly);
scene.tweens.add(moveAllyOrig);
scene.tweens.add(moveEnemyOrig); // Target cryp takes damage
scene.time.delayedCall(ANIMATION_DURATION, () => {
target.takeDamage(100);
// Move cryps back
scene.time.delayedCall(DAMAGE_TICK, () => {
scene.tweens.add(moveAllyOrig);
scene.tweens.add(moveEnemyOrig);
// all done
scene.time.delayedCall(MOVE_CREEP, () => {
scene.skills.cleanup();
scene.skills.destroy();
return cb();
});
});
});
}); });
} }
function renderResolutions(scene, game, group, resolutions) {
scene.registry.set('gameAnimating', true);
function combatRender(scene, game, group) { eachSeries(
const skill = randomSkill(); resolutions,
const resolved = game.resolved[scene.resolvedIter]; (resolution, cb) => animatePhase(scene, group, game, resolution, cb),
const account = scene.registry.get('account'); (err) => {
const target = resolved.source_team_id === account.id; if (err) return console.error(err);
const delay = DELAYS[skill]; scene.registry.set('gameAnimating', false);
scene.time.delayedCall(DELAYS.MOVE_CREEP, () => { return true;
scene.skills[skill](target); }
}); );
animatePhase(scene, group, game, delay[0]);
if (scene.iterateLog(game)) {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
scene.registry.set('resolve', false);
scene.skills.cleanup();
scene.renderLog(game);
});
} else {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
scene.skills.cleanup();
combatRender(scene, game, group);
});
}
return true; return true;
} }
module.exports = combatRender; module.exports = renderResolutions;

View File

@ -1,17 +1,17 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
const { POSITIONS: { COMBAT } } = require('./constants'); const { POSITIONS: { COMBAT }, DELAYS } = require('./constants');
const randomColour = () => { const randomColour = () => {
const colours = ['green', 'blue', 'red', 'white', 'yellow']; const colours = ['green', 'blue', 'red', 'white', 'yellow'];
return colours[Math.floor(Math.random() * 5)]; return colours[Math.floor(Math.random() * 5)];
}; };
const animationParams = (target) => { const animationParams = (isAlly) => {
const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65; const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
const speed = target ? 250 : -250; const speed = isAlly ? 250 : -250;
const img = randomColour(); const img = randomColour();
const angleMin = target ? 320 : 180; const angleMin = isAlly ? 320 : 180;
const angleMax = target ? 360 : 220; const angleMax = isAlly ? 360 : 220;
return { spawnLocation, speed, img, angleMin, angleMax }; return { spawnLocation, speed, img, angleMin, angleMax };
}; };
@ -21,44 +21,48 @@ class CombatSkills extends Phaser.GameObjects.Group {
this.scene = scene; this.scene = scene;
} }
wall(target) { wall(isAlly) {
const { spawnLocation, speed, img } = animationParams(target); const lifespan = DELAYS.EFFECT_DURATION;
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({
x: spawnLocation, x: spawnLocation,
y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 }, y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 },
lifespan: 2000,
speedX: { min: speed, max: speed * 2 }, speedX: { min: speed, max: speed * 2 },
scale: { start: 0.4, end: 0 }, scale: { start: 0.4, end: 0 },
quantity: 4, quantity: 4,
blendMode: 'ADD', blendMode: 'ADD',
lifespan,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this.scene);
} }
spit(target) { spit(isAlly) {
const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(target); const lifespan = DELAYS.EFFECT_DURATION;
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({
x: spawnLocation, x: spawnLocation,
y: COMBAT.height() * 0.35, y: COMBAT.height() * 0.35,
lifespan: 2000,
angle: { min: angleMin, max: angleMax }, angle: { min: angleMin, max: angleMax },
speed: speed * 2, speed: speed * 2,
scale: { start: 0.4, end: 1 }, scale: { start: 0.4, end: 1 },
gravityY: 250, gravityY: 250,
quantity: 4, quantity: 4,
blendMode: 'ADD', blendMode: 'ADD',
lifespan,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this); this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
} }
gravBomb(target) { gravBomb(isAlly) {
const { spawnLocation, img } = animationParams(!target); const lifespan = DELAYS.EFFECT_DURATION;
const { spawnLocation, img } = animationParams(isAlly);
const particles = this.scene.add.particles(img); const particles = this.scene.add.particles(img);
const location = target ? COMBAT.width() * 0.65 : COMBAT.width() * 0.35; const location = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
const well = particles.createGravityWell({ const well = particles.createGravityWell({
x: location, x: location,
y: COMBAT.height() * 0.25, y: COMBAT.height() * 0.25,
@ -68,21 +72,24 @@ class CombatSkills extends Phaser.GameObjects.Group {
this.emitter = particles.createEmitter({ this.emitter = particles.createEmitter({
x: spawnLocation, x: spawnLocation,
y: COMBAT.height() * 0.25, y: COMBAT.height() * 0.25,
lifespan: 1500,
speed: 1000, speed: 1000,
scale: { start: 0.7, end: 1 }, scale: { start: 0.7, end: 1 },
blendMode: 'ADD', blendMode: 'ADD',
lifespan,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene); this.scene.time.delayedCall(lifespan, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
} }
gravBlast(target) { gravBlast(isAlly) {
const lifespan = DELAYS.EFFECT_DURATION;
const WELL_END = lifespan / 2;
const img = randomColour(); const img = randomColour();
const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65; const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
const targetLocation = target ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3; const isEnemyLocation = isAlly ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
const particles = this.scene.add.particles(img); const particles = this.scene.add.particles(img);
const bounds = target const bounds = isAlly
? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 } ? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }
: { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }; : { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 };
const well = particles.createGravityWell({ const well = particles.createGravityWell({
@ -94,25 +101,27 @@ class CombatSkills extends Phaser.GameObjects.Group {
const emitter = particles.createEmitter({ const emitter = particles.createEmitter({
x: spawnLocation, x: spawnLocation,
y: COMBAT.height() * 0.35, y: COMBAT.height() * 0.35,
lifespan: 2000,
speed: 1000, speed: 1000,
scale: { start: 0.7, end: 1 }, scale: { start: 0.7, end: 1 },
blendMode: 'ADD', blendMode: 'ADD',
bounds, bounds,
lifespan,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene); this.scene.time.delayedCall(WELL_END, () => { emitter.stop(); well.x = isEnemyLocation; }, [], this.scene);
this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene); this.scene.time.delayedCall(lifespan, () => { well.active = false; }, [], this.scene);
} }
chargeBall(target) { chargeBall(isAlly) {
const { img, spawnLocation } = animationParams(target); const lifespan = DELAYS.EFFECT_DURATION;
const targetLocation = target ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width(); const CHARGE_LIFESPAN = lifespan / 2;
const { img, spawnLocation } = animationParams(isAlly);
const targetLocation = isAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width();
const particles = this.scene.add.particles(img); const particles = this.scene.add.particles(img);
const emitter = particles.createEmitter({ const emitter = particles.createEmitter({
x: 0, x: 0,
y: 0, y: 0,
lifespan: 1000,
moveToX: spawnLocation, moveToX: spawnLocation,
moveToY: COMBAT.height() * 0.1, moveToY: COMBAT.height() * 0.1,
scale: 0.75, scale: 0.75,
@ -120,22 +129,23 @@ class CombatSkills extends Phaser.GameObjects.Group {
_frequency: 20, _frequency: 20,
blendMode: 'ADD', blendMode: 'ADD',
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) }, emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
lifespan: CHARGE_LIFESPAN,
}); });
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: 256 },
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: 256 },
lifespan: 1000,
quantity: 4, quantity: 4,
gravityY: 0, gravityY: 0,
scale: { start: 1.5, end: 0, ease: 'Power3' }, scale: { start: 1.5, end: 0, ease: 'Power3' },
blendMode: 'ADD', blendMode: 'ADD',
active: false, active: false,
lifespan,
}); });
this.add(particles); this.add(particles);
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene);
this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene); this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter2.active = true; }, [], this.scene);
this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene); this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene);
} }
cleanup() { cleanup() {

View File

@ -104,13 +104,14 @@ module.exports = {
}, },
DELAYS: { DELAYS: {
MOVE_CREEP: 1000, MOVE_CREEP: 500,
DAMAGE_TICK: 750, DAMAGE_TICK: 500,
wall: [1500, 3000], ANIMATION_DURATION: 1000,
spit: [1500, 3000], // wall: [500],
gravBomb: [1500, 3000], // spit: [300, 500],
gravBlast: [1500, 3000], // gravBomb: [300, 500],
chargeBall: [3000, 4000], // gravBlast: [300, 500],
// chargeBall: [300, 500],
}, },
SKILLS: { SKILLS: {

View File

@ -29,7 +29,7 @@ function createSocket(events) {
}); });
events.loginPrompt(); events.loginPrompt();
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } }); send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
}); });
// Listen for messages // Listen for messages