From f569eb788f0ac0f5d10e2b83e2f7f3c9cd0b2d68 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Thu, 7 Jan 2016 20:08:22 +0100 Subject: Limit rendering to on-screen tiles --- src/view/MapView.ts | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) (limited to 'src/view') 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); (this.ctx).mozImageSmoothingEnabled = false; (this.ctx).webkitImageSmoothingEnabled = false; @@ -168,18 +180,19 @@ export default class MapView { (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; -- cgit v1.2.3