Implement smooth transitions

1 files changed, 26 insertions, 4 deletions

diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index 1eadebb..032cd1c 100644
--- a/src/view/MapView.ts
+++ b/src/view/MapView.ts
@@ -92,18 +92,34 @@ export default class MapView {
                 this.ctx.drawImage(tile, x, y);
         }
 
-        private drawEntity(e: EntityPosition) {
+        private drawEntity(e: EntityPosition, time: number): boolean {
                 var sprite = this.entitySprites[e.entity.name];
                 if (!sprite)
-                        return;
+                        return false;
+
+                var x: number, y: number;
+
+                if (e.transition) {
+                        var t = e.transition;
+                        var d = (time - t.start) / (t.end-t.start);
+
+                        x = (1-d) * t.orig.x + d * t.dest.x;
+                        y = (1-d) * t.orig.y + d * t.dest.y;
+                }
+                else {
+                        x = e.position.x;
+                        y = e.position.y;
+                }
 
                 this.ctx.drawImage(
                         sprite,
                         e.direction*tileSize, 0,
                         tileSize, tileSize,
-                        e.position.x*tileSize, e.position.y*tileSize,
+                        x*tileSize, y*tileSize,
                         tileSize, tileSize
                 );
+
+                return !!e.transition;
         }
 
         private draw(time: number) {
@@ -131,9 +147,15 @@ export default class MapView {
                         });
                 });
 
+                var animate = false;
+
                 this.getEntities().forEach(e => {
-                        this.drawEntity(e);
+                        if (this.drawEntity(e, time))
+                                animate = true;
                 });
+
+                if (animate)
+                        this.redraw();
         }
 
         redraw() {