From 8c7c73ca88b500b700462346527878c80eb72531 Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 12 Aug 2018 18:32:40 -0300 Subject: Slide camera when player character changes --- index.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 384f314..a27872e 100644 --- a/index.js +++ b/index.js @@ -627,7 +627,7 @@ class Battle { this.playerCharacter.targetCharacter) ctx.save() - ctx.translate(-camera.x, -camera.y) + ctx.translate(Math.round(-camera.x), Math.round(-camera.y)) for (const sprite of [this.backdrop, ...this.getAllBattleCharacters(), ...this.animationEntities]) { const x = Math.round(sprite.x - sprite.canvas.width / 2) const y = Math.round(sprite.y - sprite.canvas.height / 2) @@ -832,14 +832,28 @@ class Camera extends Sprite { update(dt) { if (this.spriteToFollow) { - this.x = this.spriteToFollow.x - this.width / 2 - this.y = this.spriteToFollow.y - this.height / 2 + const target = this.getCenteredCoords(this.spriteToFollow) + this.x += 5 * dt * (target.x - this.x) + this.y += 5 * dt * (target.y - this.y) } } follow(sprite) { this.spriteToFollow = sprite } + + warpTo(sprite) { + const target = this.getCenteredCoords(sprite) + this.x = target.x + this.y = target.y + } + + getCenteredCoords(sprite) { + return { + x: this.spriteToFollow.x - this.width / 2, + y: this.spriteToFollow.y - this.height / 2 + } + } } class MagicProjectile { @@ -905,6 +919,7 @@ for (let ti = 0; ti < battle.teams.length; ti++) { const camera = battle.camera camera.width = canvas.width camera.height = canvas.height +camera.warpTo(battle.playerCharacter) battle.canvas.width = canvas.width battle.canvas.height = canvas.height -- cgit 1.3.0-6-gf8a5