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

Set origin to player entity position

Browse source
This commit is contained in:
Matthias Schiffer 2016-01-07 18:55:42 +01:00
parent c9d51face0
commit e2721d4ef6
2 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/control/MapContext.ts
View file

@ -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()))

62
src/view/MapView.ts
View file

@ -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();
}