Set origin to player entity position

src/control/MapContext.ts

@@ -18,6 +18,7 @@ export default class MapContext {
         entities: {[key: string]: EntityPosition} = {};
         playerEntity: EntityPosition;
 
+
         constructor(private map: MapData, private inputHandler: InputHandler) {
                 this.playerEntity = new EntityPosition(
                         new Entity('square'),
@@ -27,7 +28,12 @@ export default class MapContext {
 
                 this.addEntity(this.playerEntity);
 
-                this.view = new MapView(map, this.entities, (time: number) => this.updateState(time));
+                this.view = new MapView(
+                        map,
+                        this.entities,
+                        () => this.playerEntity,
+                        (time: number) => this.updateState(time)
+                );
 
                 inputHandler.addListener(() => {
                         if (this.updateState(performance.now()))

src/view/MapView.ts

@@ -4,6 +4,7 @@
 import * as util from '../util';
 import EntityPosition from '../model/EntityPosition';
 import MapData from '../model/MapData';
+import Position from '../model/Position';
 
 
 const tileSize = 32;
@@ -38,6 +39,25 @@ function loadEntities(entities: EntityPosition[]): Promise<{[key: string]: HTMLI
         return util.mapPromises(p);
 }
 
+function entityPosition(e: EntityPosition, time: number): Position {
+        if (e.transition) {
+                var t = e.transition;
+                var d = (time - t.start) / (t.end-t.start);
+
+                return new Position(
+                        (1-d) * t.orig.x + d * t.dest.x,
+                        (1-d) * t.orig.y + d * t.dest.y
+                );
+        }
+        else {
+                return e.position;
+        }
+}
+
+function tiles(n: number) {
+        return Math.round(tileSize*n);
+}
+
 
 export default class MapView {
         private redrawPending: boolean = false;
@@ -50,6 +70,7 @@ export default class MapView {
 
         constructor(private map: MapData,
                     private entities: {[key: string]: EntityPosition},
+                    private getOrigin: () => EntityPosition,
                     private updateState: (time: number) => void) {
                 this.canvas = document.createElement('canvas');
                 this.canvas.style.position = 'absolute';
@@ -79,8 +100,11 @@ export default class MapView {
 
         private setSize() {
                 var e = document.documentElement;
-                this.canvas.width = window.innerWidth || e.clientWidth || body.clientWidth;
+                var w = window.innerWidth || e.clientWidth || body.clientWidth;
-                this.canvas.height = window.innerHeight || e.clientHeight || body.clientHeight;
+                var h = window.innerHeight || e.clientHeight || body.clientHeight;
+
+                this.canvas.width = w;
+                this.canvas.height = h;
 
                 this.redraw()
         }
@@ -97,31 +121,29 @@ export default class MapView {
                 if (!sprite)
                         return false;
 
-                var x: number, y: number;
+                var p = entityPosition(e, time);
-
-                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,
+                        tiles(e.direction), 0,
                         tileSize, tileSize,
-                        x*tileSize, y*tileSize,
+                        tiles(p.x), tiles(p.y),
                         tileSize, tileSize
                 );
 
                 return !!e.transition;
         }
 
+        private setOrigin(time: number) {
+                var origin = entityPosition(this.getOrigin(), time);
+
+                var w = this.canvas.width;
+                var h = this.canvas.height;
+
+                this.ctx.translate(Math.round(w/2), Math.round(h/2));
+                this.ctx.translate(-tiles(origin.x + 0.5), -tiles(origin.y + 0.5));
+        }
+
         private draw(time: number) {
                 this.updateState(time);
 
@@ -132,6 +154,10 @@ export default class MapView {
                 if (!this.tiles || !this.entitySprites)
                         return;
 
+                this.ctx.save();
+
+                this.setOrigin(time);
+
                 this.map.layers.forEach((layer) => {
                         let y = 0;
 
@@ -154,6 +180,8 @@ export default class MapView {
                                 animate = true;
                 });
 
+                this.ctx.restore();
+
                 if (animate)
                         this.redraw();
         }