Slide camera when player character changes

1 files 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