Somewhat different numbers

1 files changed, 42 insertions, 27 deletions

diff --git a/index.js b/index.js
index 8375346..e779ff8 100644
--- a/index.js
+++ b/index.js
@@ -76,7 +76,8 @@ class Sprite {
 class Backdrop extends Sprite {
   constructor() {
     super()
-    this.image.src = 'img/bg.png'
+    // this.image.src = 'img/bg.png'
+    this.image.src = 'img/xy-grid.gif'
   }
 }
 
@@ -670,17 +671,21 @@ class BattleCharacter extends Sprite {
     // Boring physics stuff
     this.xvel = 0
     this.yvel = 0
+    this.zvel = 0
     this.x = 0
     this.y = 0
+    this.z = 0
   }
 
   update(dt) {
     this.hpBar.update(dt)
 
-    this.xvel *= 0.9
-    this.yvel *= 0.9
+    this.xvel *= 0.95
+    this.yvel *= 0.95
+    this.zvel *= 0.95
     this.x += dt * this.xvel
     this.y += dt * this.yvel
+    this.z += dt * this.zvel
 
     if (this.dead) {
       this.deadUpdate(dt)
@@ -871,7 +876,7 @@ class Battle {
     this.backdrop = new Backdrop()
 
     this.camera = new BattleCamera(this)
-    this.camera.follow(this.playerCharacter)
+    // this.camera.follow(this.playerCharacter)
 
     this.slideacrossMessage = new SlideacrossMessage()
 
@@ -922,27 +927,30 @@ class Battle {
       }
     }
 
-    // ctx.translate(Math.round(-camera.x), Math.round(-camera.y))
     const spriteData = []
     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)
       sprite.draw()
 
       const cameraOffsetX = sprite.x - camera.x
-      const cameraOffsetY = sprite.y - camera.y
+      const cameraOffsetY = camera.y - sprite.y
       const cameraOffsetZ = sprite.z - camera.z
       const scaleRatio = camera.getScaleRatio(cameraOffsetZ)
-      const drawX = scaleRatio * cameraOffsetX
-      const drawY = scaleRatio * cameraOffsetY
-      const canvasOffsetDrawX = drawX - sprite.canvas.width / 2
-      const canvasOffsetDrawY = drawY - sprite.canvas.height / 2
-      spriteData.push({drawX, drawY, canvasOffsetDrawX, canvasOffsetDrawY, scaleRatio, sprite})
+      // const scaleRatio = 1
+      const drawX = scaleRatio * cameraOffsetX + camera.width / 2
+      const drawY = scaleRatio * cameraOffsetY + camera.height / 2
+
+      const drawW = sprite.canvas.width * scaleRatio
+      const drawH = sprite.canvas.height * scaleRatio
+
+      const canvasOffsetDrawX = drawX - drawW / 2
+      const canvasOffsetDrawY = drawY - drawH / 2
+
+      spriteData.push({drawX, drawY, canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH, scaleRatio, sprite})
     }
     window.spriteData = spriteData
 
-    for (const { canvasOffsetDrawX, canvasOffsetDrawY, sprite: { canvas } } of spriteData) {
-      ctx.drawImage(canvas, Math.round(canvasOffsetDrawX), Math.round(canvasOffsetDrawY))
+    for (const { canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH, sprite } of spriteData) {
+      ctx.drawImage(sprite.canvas, canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH)
     }
 
     for (const { drawX, canvasOffsetDrawY, sprite } of spriteData) {
@@ -953,7 +961,7 @@ class Battle {
       }
     }
 
-    for (const { sprite, drawX, offsetDrawY } of spriteData) {
+    for (const { sprite, drawX, canvasOffsetDrawY } of spriteData) {
       if (!(sprite instanceof BattleCharacter)) {
         continue
       }
@@ -964,7 +972,7 @@ class Battle {
         ctx.font = '5px pixel-font'
         const width = ctx.measureText(label).width + 4
         const x = Math.round(drawX - width / 2)
-        const y = Math.round(offsetDrawY)
+        const y = Math.round(canvasOffsetDrawY)
 
         let textFillStyle
         if (sprite.team === this.playerCharacter.team) {
@@ -982,7 +990,6 @@ class Battle {
         ctx.fillText(label, x + 3, y + 7)
       }
     }
-    // ctx.restore() // End camera-translated drawing
 
     if (this.nearlyDeadAnim) {
       const height = Math.min(60, this.canvas.height / 4)
@@ -1084,10 +1091,12 @@ class Battle {
     }
 
     // Don't let the characters go out of bounds
+    /*
     for (const character of this.getAllBattleCharacters()) {
       character.x = Math.min(this.battlefieldMaxX, Math.max(this.battlefieldMinX, character.x))
       character.y = Math.min(this.battlefieldMaxY, Math.max(this.battlefieldMinY, character.y))
     }
+    */
 
     this.camera.update(dt)
 
@@ -1149,7 +1158,7 @@ class Battle {
   changeLeader(newCharacter) {
     if (newCharacter) {
       this.playerCharacter = newCharacter
-      this.camera.follow(newCharacter)
+      // this.camera.follow(newCharacter)
       newCharacter.atbBar.queuedActions.splice(0)
       newCharacter.isExecutingChain = false
       this.showTargetTypeMenu()
@@ -1348,9 +1357,9 @@ class MagicProjectile {
 
       const actionKB = 'knockbackMultiplier' in this.action ? this.action.knockbackMultiplier : 1
 
-      this.target.xvel += 2 * xvel * this.target.knockbackMultiplier * actionKB
-      this.target.yvel += 2 * yvel * this.target.knockbackMultiplier * actionKB
-      this.target.zvel += 2 * zvel * this.target.knockbackMultiplier * actionKB
+      // this.target.xvel += 2 * xvel * this.target.knockbackMultiplier * actionKB
+      // this.target.yvel += 2 * yvel * this.target.knockbackMultiplier * actionKB
+      // this.target.zvel += 2 * zvel * this.target.knockbackMultiplier * actionKB
 
       this.discarded = true
     }
@@ -1471,11 +1480,11 @@ const basicAI = function() {
 const battle = new Battle({
   teamData: [
     {characterData: [
-      {x: -55, y: 190, name: 'Ren', hp: 400, maxHP: 400, knownActions: ['fire', 'fira', 'firaga', 'blizz', 'blizzara', 'cure'], determineChain: basicAI},
-      {x: -75, y: 225, name: 'Fie', hp: 375, maxHP: 375, knownActions: ['fire', 'blizz', 'blizzara', 'blizzaga', 'aqua', 'aquara', 'curasa'], determineChain: basicAI}
+      {x: 0, y: 0, name: 'Ren', hp: 400, maxHP: 400, knownActions: ['fire', 'fira', 'firaga', 'blizz', 'blizzara', 'cure'], determineChain: basicAI},
+      {x: -100, y: 0, name: 'Fie', hp: 375, maxHP: 375, knownActions: ['fire', 'blizz', 'blizzara', 'blizzaga', 'aqua', 'aquara', 'curasa'], determineChain: basicAI}
     ]},
     {characterData: [
-      {x: 80, y: 200, name: 'Manasvin Warmech', hp: 1200, maxHP: 1200, knownActions: ['aqua', 'aquaga', 'manasvinSwipe', 'manasvinRecover'], determineChain: basicAI, knockbackMultiplier: 0}
+      {x: 0, y: -100, name: 'Manasvin Warmech', hp: 1200, maxHP: 1200, knownActions: ['aqua', 'aquaga', 'manasvinSwipe', 'manasvinRecover'], determineChain: basicAI, knockbackMultiplier: 0}
     ]}
   ]
 })
@@ -1487,12 +1496,15 @@ battle.teams[1].characters[0].image.src = 'img/warmech.png'
 const camera = battle.camera
 camera.width = canvas.width
 camera.height = canvas.height
-camera.warpTo(battle.playerCharacter)
+// camera.warpTo(battle.playerCharacter)
+camera.x = 0
+camera.y = 0
+camera.z = 0
 
 battle.canvas.width = canvas.width
 battle.canvas.height = canvas.height
 
-battle.backdrop.y = 300 / 2
+battle.backdrop.y = 0
 
 let lastTime = Date.now()
 
@@ -1502,6 +1514,9 @@ function drawLoop() {
 
   battle.update(dt)
 
+  // camera.z += 1
+  // camera.x -= 0.5
+
   const ctx = canvas.getContext('2d')
   ctx.clearRect(0, 0, canvas.width, canvas.height)
   ctx.fillStyle = '#EEE'