Limit rendering to on-screen tiles

1 files changed, 26 insertions, 13 deletions

diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index a12d9d4..5523f81 100644
--- a/src/view/MapView.ts
+++ b/src/view/MapView.ts
@@ -59,6 +59,11 @@ function tiles(n: number) {
 }
 
 
+class Rect {
+        constructor(public x1: number, public y1: number, public x2: number, public y2: number) {}
+}
+
+
 export default class MapView {
         private redrawPending: boolean = false;
 
@@ -71,7 +76,7 @@ export default class MapView {
 
         constructor(private map: MapData,
                     private entities: {[key: string]: EntityPosition},
-                    private getOrigin: () => EntityPosition,
+                    private origin: EntityPosition,
                     private updateState: (time: number) => void) {
                 this.canvas = document.createElement('canvas');
                 this.canvas.style.position = 'absolute';
@@ -117,7 +122,7 @@ export default class MapView {
                 if (!tile)
                         return;
 
-                this.ctx.drawImage(tile, x*this.scale, y*this.scale, tileSize*this.scale, tileSize*this.scale);
+                this.ctx.drawImage(tile, tiles(x)*this.scale, tiles(y)*this.scale, tileSize*this.scale, tileSize*this.scale);
         }
 
         private drawEntity(e: EntityPosition, time: number): boolean {
@@ -139,13 +144,20 @@ export default class MapView {
         }
 
         private setOrigin(time: number) {
-                var origin = entityPosition(this.getOrigin(), time);
+                var origin = entityPosition(this.origin, 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)*this.scale, -tiles(origin.y + 0.5)*this.scale);
+
+                var sw = w / (this.scale*tileSize), sh = h / (this.scale*tileSize);
+
+                return new Rect(
+                        Math.floor(origin.x-sw/2+0.5), Math.floor(origin.y-sh/2+0.5),
+                        Math.ceil(origin.x+sw/2-0.5), Math.ceil(origin.y+sh/2-0.5)
+                );
         }
 
         private draw(time: number) {
@@ -160,7 +172,7 @@ export default class MapView {
 
                 this.ctx.save();
 
-                this.setOrigin(time);
+                var rect = this.setOrigin(time);
 
                 (<any>this.ctx).mozImageSmoothingEnabled = false;
                 (<any>this.ctx).webkitImageSmoothingEnabled = false;
@@ -168,18 +180,19 @@ export default class MapView {
                 (<any>this.ctx).imageSmoothingEnabled = false;
 
                 this.map.layers.forEach((layer) => {
-                        let y = 0;
+                        for (let y = rect.y1; y <= rect.y2; y++) {
+                                let row = layer[y];
+                                if (!row)
+                                        continue;
 
-                        layer.forEach((row) => {
-                                let x = 0;
+                                for (let x = rect.x1; x <= rect.x2; x++) {
+                                        let tile = row[x];
+                                        if (!tile)
+                                                continue;
 
-                                for (let tile in row) {
-                                        this.drawTile(x, y, this.tiles[row[tile]]);
-                                        x += tileSize;
+                                        this.drawTile(x, y, this.tiles[tile]);
                                 }
-
-                                y += tileSize;
-                        });
+                        }
                 });
 
                 var animate = false;