summaryrefslogtreecommitdiffstats
path: root/src/view
diff options
context:
space:
mode:
authorMatthias Schiffer <mschiffer@universe-factory.net>2016-01-07 20:08:22 +0100
committerMatthias Schiffer <mschiffer@universe-factory.net>2016-01-07 20:08:22 +0100
commitf569eb788f0ac0f5d10e2b83e2f7f3c9cd0b2d68 (patch)
tree5534404a2110993d47f652afaa766682e22d1e28 /src/view
parent342af3b087f922c65f25a40b650bb104aa9b9362 (diff)
downloadrpgedit-f569eb788f0ac0f5d10e2b83e2f7f3c9cd0b2d68.tar
rpgedit-f569eb788f0ac0f5d10e2b83e2f7f3c9cd0b2d68.zip
Limit rendering to on-screen tiles
Diffstat (limited to 'src/view')
-rw-r--r--src/view/MapView.ts39
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;