diff options
author | Florrie <towerofnix@gmail.com> | 2018-08-12 18:11:37 -0300 |
---|---|---|
committer | Florrie <towerofnix@gmail.com> | 2018-08-12 18:11:37 -0300 |
commit | 906e9b47fda9a944b742d8f85151753fad3f229b (patch) | |
tree | 5a85f252d79e515fff4bf0d590648dd3909fad5b /index.js | |
parent | ac571e253fd7aaa1cf1f255a6c35d99f0149cda1 (diff) |
HP bar labels
Diffstat (limited to 'index.js')
-rw-r--r-- | index.js | 25 |
1 files changed, 23 insertions, 2 deletions
diff --git a/index.js b/index.js index 294f2b4..db2beed 100644 --- a/index.js +++ b/index.js @@ -239,6 +239,10 @@ class HPBar { this.canvas = document.createElement('canvas') this.canvas.width = 80 this.canvas.height = 5 + + this.labelCanvas = document.createElement('canvas') + this.labelCanvas.height = 7 + // Label canvas width is determined during draw } draw() { @@ -260,6 +264,20 @@ class HPBar { ctx.restore() ctx.strokeStyle = '#000' ctx.strokeRect(0.5, 0.5, this.canvas.width - 1, this.canvas.height - 1) + + this.drawLabel() + } + + drawLabel() { + const text = this.battleCharacter.name + const ctx = this.labelCanvas.getContext('2d') + ctx.font = '5px pixel-font' + this.labelCanvas.width = ctx.measureText(text).width + 2 + ctx.fillStyle = 'rgba(128, 128, 128, 0.2)' + ctx.fillRect(0, 0, this.labelCanvas.width, this.labelCanvas.height) + ctx.font = '5px pixel-font' // It gets reset for some reason?? + ctx.fillStyle = 'white' + ctx.fillText(text, 1, 6) } update(dt) { @@ -665,8 +683,10 @@ class Battle { for (const { hpBar } of this.playerCharacter.team.characters) { y -= hpBar.canvas.height hpBar.draw() - ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y) - y -= 2 + const x = canvas.width - 20 - hpBar.canvas.width + ctx.drawImage(hpBar.canvas, x, y) + ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1) + y -= 4 } if (targetCharacter) { @@ -675,6 +695,7 @@ class Battle { const y = targetY - hpBar.canvas.height hpBar.draw() ctx.drawImage(hpBar.canvas, x, y) + ctx.drawImage(hpBar.labelCanvas, x - hpBar.labelCanvas.width - 2, y - 1) } ctx.restore() |