From e2721d4ef63560d8541c311224a80d65d31d6d62 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Thu, 7 Jan 2016 18:55:42 +0100 Subject: Set origin to player entity position --- src/control/MapContext.ts | 8 +++++- src/view/MapView.ts | 62 ++++++++++++++++++++++++++++++++++------------- 2 files changed, 52 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/control/MapContext.ts b/src/control/MapContext.ts index 1e417e7..1c0f1a8 100644 --- a/src/control/MapContext.ts +++ b/src/control/MapContext.ts @@ -18,6 +18,7 @@ export default class MapContext { entities: {[key: string]: EntityPosition} = {}; playerEntity: EntityPosition; + constructor(private map: MapData, private inputHandler: InputHandler) { this.playerEntity = new EntityPosition( new Entity('square'), @@ -27,7 +28,12 @@ export default class MapContext { this.addEntity(this.playerEntity); - this.view = new MapView(map, this.entities, (time: number) => this.updateState(time)); + this.view = new MapView( + map, + this.entities, + () => this.playerEntity, + (time: number) => this.updateState(time) + ); inputHandler.addListener(() => { if (this.updateState(performance.now())) 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(); } -- cgit v1.2.3