neocturne/rpgedit
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Limit rendering to on-screen tiles

Browse source
This commit is contained in:
Matthias Schiffer 2016-01-07 20:08:22 +01:00
parent 342af3b087
commit f569eb788f
2 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/control/MapContext.ts
View file

@ -31,7 +31,7 @@ export default class MapContext {
this.view = new MapView( this.view = new MapView(
map, map,
this.entities, this.entities,
() => this.playerEntity, this.playerEntity,
(time: number) => this.updateState(time) (time: number) => this.updateState(time)
); );

39
src/view/MapView.ts
View file

@ -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 { export default class MapView {
private redrawPending: boolean = false; private redrawPending: boolean = false;
@ -71,7 +76,7 @@ export default class MapView {
constructor(private map: MapData, constructor(private map: MapData,
private entities: {[key: string]: EntityPosition}, private entities: {[key: string]: EntityPosition},
private getOrigin: () => EntityPosition, private origin: EntityPosition,
private updateState: (time: number) => void) { private updateState: (time: number) => void) {
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas.style.position = 'absolute'; this.canvas.style.position = 'absolute';
@ -117,7 +122,7 @@ export default class MapView {
if (!tile) if (!tile)
return; 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 { private drawEntity(e: EntityPosition, time: number): boolean {
@ -139,13 +144,20 @@ export default class MapView {
} }
private setOrigin(time: number) { private setOrigin(time: number) {
var origin = entityPosition(this.getOrigin(), time); var origin = entityPosition(this.origin, time);
var w = this.canvas.width; var w = this.canvas.width;
var h = this.canvas.height; var h = this.canvas.height;
this.ctx.translate(Math.round(w/2), Math.round(h/2)); 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); 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) { private draw(time: number) {
@ -160,7 +172,7 @@ export default class MapView {
this.ctx.save(); this.ctx.save();
this.setOrigin(time); var rect = this.setOrigin(time);
(<any>this.ctx).mozImageSmoothingEnabled = false; (<any>this.ctx).mozImageSmoothingEnabled = false;
(<any>this.ctx).webkitImageSmoothingEnabled = false; (<any>this.ctx).webkitImageSmoothingEnabled = false;
@ -168,18 +180,19 @@ export default class MapView {
(<any>this.ctx).imageSmoothingEnabled = false; (<any>this.ctx).imageSmoothingEnabled = false;
this.map.layers.forEach((layer) => { 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) => { for (let x = rect.x1; x <= rect.x2; x++) {
let x = 0; let tile = row[x];
if (!tile)
continue;
for (let tile in row) { this.drawTile(x, y, this.tiles[tile]);
this.drawTile(x, y, this.tiles[row[tile]]); }
x += tileSize;
} }
y += tileSize;
});
}); });
var animate = false; var animate = false;