better rendering of enemies

2 files changed, 32 insertions, 13 deletions

diff --git a/public/javascript/game.js b/public/javascript/game.js
index 88ebf70..bf34e4f 100644
--- a/public/javascript/game.js
+++ b/public/javascript/game.js
@@ -674,6 +674,9 @@ Player.prototype.draw = function() {
     }
     Entity.prototype.draw.call(this);
     var tempPos = this.getDisplayPos().copy();
+    if (this == localPlayer) {
+        tempPos.subtract(localPlayerAnimOffset());
+    }
     if (!(this.isInvincible && invincibilityBlinkDelay < 2)) {
         drawSprite(tempPos, 0 + this.avatar);
     }
@@ -1121,13 +1124,6 @@ function drawTileOnContext(context, pos, size, which) {
 function drawTile(pos, which) {
     var tempPos = pos.copy();
     tempPos.scale(spriteRenderSize);
-    if (walkAnimDir >= 0) {
-        const size = spriteRenderSize;
-        const dx = [0,1,0,-1][walkAnimDir] * size;
-        const dy = [-1,0,1,0][walkAnimDir] * size;
-        tempPos.x += dx * localPlayer.walkDelay/walkAnimTime;
-        tempPos.y += dy * localPlayer.walkDelay/walkAnimTime;
-    }
     drawTileOnContext(
         context,
         tempPos,
@@ -1483,6 +1479,15 @@ function keyUpEvent(event) {
         localPlayer.stopActionInDirection(2);
     }
 }
+function localPlayerAnimOffset() {
+	if (walkAnimDir >= 0 && localPlayer.walkDelay >= 0) {
+		const dx = [0,1,0,-1][walkAnimDir];
+		const dy = [-1,0,1,0][walkAnimDir];
+		const t = localPlayer.walkDelay / walkAnimTime;
+		return new Pos(dx*t, dy*t);
+	}
+	return new Pos(0, 0);
+}
 
 function timerEvent() {
     if (hasStopped) {
@@ -1584,20 +1589,23 @@ function timerEvent() {
     var tempOffset = Math.floor(canvasSpriteSize / 2);
     cameraPos.x -= tempOffset;
     cameraPos.y -= tempOffset;
+    cameraPos.subtract(localPlayerAnimOffset());
     
     clearCanvas();
     {
-        const x0 = walkAnimDir == 1 ? -1 : 0;
-        const y0 = walkAnimDir == 2 ? -1 : 0;
-        const x2 = walkAnimDir == 3 ? canvasSpriteSize+1 : canvasSpriteSize;
-        const y2 = walkAnimDir == 0 ? canvasSpriteSize+1 : canvasSpriteSize;
+        const x0 = walkAnimDir == 3 ? 0 : 0;
+        const y0 = walkAnimDir == 0 ? 0 : 0;
+        const x2 = walkAnimDir == 1 ? canvasSpriteSize+2 : canvasSpriteSize+1;
+        const y2 = walkAnimDir == 2 ? canvasSpriteSize+2 : canvasSpriteSize+1;
         let tempPos = new Pos(0, 0);
         let tempOffset = new Pos(x0, y0);
         while (tempOffset.y < y2) {
-            tempPos.set(cameraPos);
+            tempPos.set(cameraPos.floor());
             tempPos.add(tempOffset);
             var tempTile = getTileBufferValue(tempPos);
-            drawTile(tempOffset, tempTile);
+            tempPos.set(tempOffset);
+            tempPos.subtract(cameraPos.frac());
+            drawTile(tempPos, tempTile);
             tempOffset.x += 1;
             if (tempOffset.x >= x2) {
                 tempOffset.x = x0;
diff --git a/public/javascript/pos.js b/public/javascript/pos.js
index 0b90f31..6b2285b 100644
--- a/public/javascript/pos.js
+++ b/public/javascript/pos.js
@@ -36,6 +36,17 @@ Pos.prototype.getDistance = function(pos) {
     return Math.sqrt(Math.pow(this.x - pos.x, 2) + Math.pow(this.y - pos.y, 2));
 }
 
+Pos.prototype.floor = function() {
+	let x = this.x;
+	let y = this.y;
+	return new Pos(Math.floor(x), Math.floor(y));
+}
+Pos.prototype.frac = function() {
+	let x = this.x;
+	let y = this.y;
+	return new Pos(x - Math.floor(x), y - Math.floor(y));
+}
+
 Pos.prototype.getOrthogonalDistance = function(pos) {
     var tempDistanceX = Math.abs(this.x - pos.x);
     var tempDistanceY = Math.abs(this.y - pos.y);