summaryrefslogtreecommitdiffstats
path: root/src/view/MapView.ts
diff options
context:
space:
mode:
authorMatthias Schiffer <mschiffer@universe-factory.net>2016-01-07 18:55:42 +0100
committerMatthias Schiffer <mschiffer@universe-factory.net>2016-01-07 18:55:42 +0100
commite2721d4ef63560d8541c311224a80d65d31d6d62 (patch)
treee42f264408b55a4d6ea086d9cdc8e209745f4c20 /src/view/MapView.ts
parentc9d51face0c5cbca38dc9c27379454405a57ade0 (diff)
downloadrpgedit-e2721d4ef63560d8541c311224a80d65d31d6d62.tar
rpgedit-e2721d4ef63560d8541c311224a80d65d31d6d62.zip
Set origin to player entity position
Diffstat (limited to 'src/view/MapView.ts')
-rw-r--r--src/view/MapView.ts62
1 files changed, 45 insertions, 17 deletions
diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index 032cd1c..31305d7 100644
--- a/src/view/MapView.ts
+++ b/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;
- this.canvas.height = window.innerHeight || e.clientHeight || body.clientHeight;
+ var w = window.innerWidth || e.clientWidth || body.clientWidth;
+ 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;
-
- 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;
- }
+ var p = entityPosition(e, time);
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();
}