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

scene restart stuff, doesn't spam rerender

Browse Source
This commit is contained in:
Mashy 2018-11-29 01:48:13 +10:00
parent 5c9af086bd
commit 0a9040b427
5 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/events.js
View File

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

2
client/src/scenes/combat.animations.js
View File

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

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

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

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

@ -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,6 +139,7 @@ class Combat extends Phaser.Scene {
}, this);
}
}
return true;
}
}

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

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