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

Added bars for defenses

Browse Source
This commit is contained in:
Mashy
2019-01-13 18:40:57 +10:00
parent feacd368a1
commit 478906da4f
4 changed files with 62 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/scenes/combat.cryps.js
+55 -32
View File
@@ -3,58 +3,73 @@ const genAvatar = require('./avatar');
const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
const CRYP_MARGIN = COMBAT.height() / 5;
const CRYP_MARGIN = COMBAT.height() / 4.5;
const TEXT_MARGIN = COMBAT.height() / 35;
const TEAM_MARGIN = COMBAT.width() * 0.7;
const healthBarDimensions = (team, iter) => {
const healthBarX = 1.25 * TEAM_MARGIN * team;
const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthBarWidth = TEAM_MARGIN / 10;
const healthBarDimensions = (team, iter, margin) => {
const healthBarWidth = COMBAT.width() * 0.07;
const healthBarHeight = TEXT_MARGIN / 1.5;
const healthBarX = (COMBAT.width() - healthBarWidth) * team;
const healthBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
};
const crypAvatarText = (team, iter) => {
const nameX = 1.25 * TEAM_MARGIN * team;
const nameX = COMBAT.width() * team;
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthX = 1.25 * TEAM_MARGIN * team;
const healthY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const statusX = 1.25 * TEAM_MARGIN * team;
const healthX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
const healthY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const statusX = COMBAT.width() * team;
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
return { statusX, statusY, nameX, nameY, healthX, healthY };
};
const crypEffects = (team, iter) => {
const crypEffectsX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
const crypEffectsX = team ? COMBAT.width() - COMBAT.width() / 6.5 : COMBAT.width() / 6.5;
const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter;
return { crypEffectsX, crypEffectsY };
};
const crypPosition = (team, iter) => {
const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
const crypAvatarX = team ? COMBAT.width() - COMBAT.width() / 6 : COMBAT.width() / 6;
const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
return { crypAvatarX, crypAvatarY };
};
class HealthBar extends Phaser.GameObjects.Graphics {
constructor(scene, cryp, crypHpText) {
class StatBar extends Phaser.GameObjects.Graphics {
constructor(scene, cryp, crypStatText, type) {
super(scene);
this.crypObj = cryp;
this.hpText = crypHpText;
this.type = type;
this.statText = crypStatText;
this.hp = this.crypObj.cryp.hp.base;
this.stam = this.crypObj.cryp.stamina.base;
this.drawHealthBar();
if (type === 'HP') {
this.val = this.crypObj.cryp.hp.base;
this.max = this.crypObj.cryp.stamina.base;
this.margin = 0;
} else if (type === 'Armour') {
this.val = this.crypObj.cryp.armour.base;
this.max = this.crypObj.cryp.armour.base;
this.margin = 1;
} else if (type === 'Evasion') {
this.val = this.crypObj.cryp.evasion.base;
this.max = this.crypObj.cryp.evasion.base;
this.margin = 2;
} else if (type === 'Spell Shield') {
this.val = this.crypObj.cryp.spell_shield.base;
this.max = this.crypObj.cryp.spell_shield.base;
this.margin = 3;
}
this.drawStatBar();
}
drawHealthBar() {
drawStatBar() {
this.clear();
const {
healthBarX, healthBarY, healthBarWidth, healthBarHeight,
} = healthBarDimensions(this.crypObj.team, this.crypObj.iter);
this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
} = healthBarDimensions(this.crypObj.team, this.crypObj.iter, this.margin);
this.statText.text = `${this.val.toString()} / ${this.max.toString()} ${this.type}`;
// Draw Black Border
this.fillStyle(COLOURS.BLACK);
this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
@@ -62,7 +77,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
this.fillStyle(COLOURS.WHITE);
this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
// Fill the health bar
const healthPercentage = this.hp / this.stam;
const healthPercentage = this.val / this.max;
if (healthPercentage < 0.3) {
this.fillStyle(COLOURS.RED);
} else if (healthPercentage < 0.65) {
@@ -71,17 +86,17 @@ class HealthBar extends Phaser.GameObjects.Graphics {
this.fillStyle(0x00ff00); // str8 up green
}
const healthWidth = Math.floor(healthBarWidth * healthPercentage);
this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4);
this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth - 4, healthBarHeight - 4);
}
takeDamage(value) {
if (value > 0) {
this.hp = (value >= this.hp) ? 0 : this.hp -= value;
this.val = (value >= this.val) ? 0 : this.val -= value;
} else {
this.hp = (this.hp - value > this.stam) ? this.stam : this.hp -= value;
this.val = (this.val - value > this.max) ? this.max : this.val -= value;
}
if (this.hp === 0) this.crypObj.setKo();
this.drawHealthBar();
if (this.val === 0) this.crypObj.setKo();
this.drawStatBar();
}
}
@@ -140,12 +155,20 @@ class CrypImage extends Phaser.GameObjects.Image {
this.team = team;
this.cryp = cryp;
this.state = 'deselect';
// Add cryp name
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL);
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
// Add cryp hp
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
this.healthBar = scene.add.existing(new HealthBar(scene, this, healthText));
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL).setOrigin(team, 0);
this.healthBar = scene.add.existing(new StatBar(scene, this, healthText, 'HP'));
const armourText = scene.add.text(healthX, healthY + TEXT_MARGIN, '', TEXT.NORMAL).setOrigin(team, 0);
this.armour = scene.add.existing(new StatBar(scene, this, armourText, 'Armour'));
const evasionText = scene.add.text(healthX, healthY + TEXT_MARGIN * 2, '', TEXT.NORMAL).setOrigin(team, 0);
this.evasion = scene.add.existing(new StatBar(scene, this, evasionText, 'Evasion'));
const ssText = scene.add.text(healthX, healthY + TEXT_MARGIN * 3, '', TEXT.NORMAL).setOrigin(team, 0);
this.spellShield = scene.add.existing(new StatBar(scene, this, ssText, 'Spell Shield'));
this.effects = scene.add.existing(new Effects(scene, team, iter));
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
}
@@ -229,7 +252,7 @@ class CombatCryps extends Phaser.Scene {
.find(c => c.cryp.id === cryp.id)
|| renderCryp(cryp, iter, team);
crypObj.healthBar.hp = cryp.hp.base;
crypObj.healthBar.drawHealthBar();
crypObj.healthBar.drawStatBar();
crypObj.effects.update(cryp.effects);
};
client/src/scenes/combat.hitbox.js
+6 -6
View File
@@ -1,15 +1,15 @@
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 CRYP_MARGIN = COMBAT.height() / 4.5;
const BOX_HEIGHT = CRYP_MARGIN * 0.8;
const BOX_WIDTH = COMBAT.width() * 0.2;
class CrypHitBox extends Phaser.GameObjects.Rectangle {
constructor(scene, iter, team, cback) {
const y = Y_PADDING + iter * (CRYP_HEIGHT + (Y_PADDING * 0.5));
super(scene, TEAM_MARGIN * team, y, CRYP_WIDTH, CRYP_HEIGHT, 0x222222);
const y = COMBAT.y() + COMBAT.height() * 0.05 + CRYP_MARGIN * iter;
super(scene, (COMBAT.width() - BOX_WIDTH) * team, y, BOX_WIDTH, BOX_HEIGHT, 0x222222);
this.setOrigin(0);
this.clickHandler = () => cback();
}
client/src/scenes/combat.js
-1
View File
@@ -100,7 +100,6 @@ class Combat extends Phaser.Scene {
}
addLeaveGame() {
const leaveGame = () => this.cleanUp();
this.input.keyboard.on('keydown_BACKSPACE', leaveGame, 0, this);
const buttonProps = {
client/src/scenes/elements/box.js
+1 -1
View File
@@ -69,7 +69,7 @@ function rgbToHex(rgb) {
class BoxEffect extends Phaser.GameObjects.Graphics {
constructor(scene, x, y, width, height, colour, tag) {
super(scene, x, y, width, height);
super(scene);
this.tag = tag;
this.customPipeline = scene.game.renderer.addPipeline(tag, new CustomPipeline(scene.game));
this.customPipeline.setFloat2('resolution', 1600, 1000);