Support to draw sprites without scaling

Not 100% sure I'll stick with this, but it's good to have the support,
and I think right now this is more presentable than the blurry sprites
you get from scaling.

1 files changed, 13 insertions, 5 deletions

diff --git a/index.js b/index.js
index d71c52b..1a32030 100644
--- a/index.js
+++ b/index.js
@@ -107,9 +107,11 @@ class Sprite {
     // Since where a sprite is drawn is based on the position of the camera,
     // this function requires a camera to be passed.
     // Also returned are the 2D draw/render coordinates of the center of the
-    // sprite (ala getCenterCoordinates) and the width and height of the canvas
+    // sprite (ala getCenterCoordinates), the width and height of the canvas
     // adjusted to the scale ratio (i.e. the actual size at which the canvas
-    // should be drawn).
+    // should be drawn), and the position of where to draw the sprite when its
+    // canvas is not scaled (i.e. 3D position is still relevant but the canvas
+    // will be drawn at its original scale).
 
     const base = this.getBaseCoordinates()
 
@@ -127,13 +129,18 @@ class Sprite {
     const canvasOffsetDrawX = drawX - drawW * 0.5
     const canvasOffsetDrawY = drawY - drawH
 
+    const unscaledOffsetDrawX = drawX - this.canvas.width * 0.5
+    const unscaledOffsetDrawY = drawY - this.canvas.height
+
     return {
       x: canvasOffsetDrawX,
       y: canvasOffsetDrawY,
       centerX: drawX,
       centerY: drawY - drawH * 0.5,
       drawW,
-      drawH
+      drawH,
+      unscaledX: unscaledOffsetDrawX,
+      unscaledY: unscaledOffsetDrawY
     }
   }
 
@@ -1018,8 +1025,9 @@ class Battle {
     })
     window.spriteData = spriteData
 
-    for (const { x, y, drawW, drawH, sprite } of spriteData) {
-      ctx.drawImage(sprite.canvas, Math.round(x), Math.round(y), drawW, drawH)
+    for (const { x, y, drawW, drawH, unscaledX, unscaledY, sprite } of spriteData) {
+      // ctx.drawImage(sprite.canvas, Math.round(x), Math.round(y), drawW, drawH)
+      ctx.drawImage(sprite.canvas, Math.round(unscaledX), Math.round(unscaledY))
     }
 
     for (const { centerX, y, sprite } of spriteData) {