1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import MapData from './model/data/MapData';
import { vec2 } from 'gl-matrix';
import { getJSON } from './util';
import { loadSimpleEntity } from './view/entity';
import DirectionHandler from './view/input/DirectionHandler';
import { loadMap } from './view/map';
import Renderer from './view/renderer/Renderer';
const entityPos = vec2.create();
const entityMovement = vec2.create();
window.onload = async () => {
const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
if (!canvas)
return;
const input = new DirectionHandler();
input.addListener((v) => {
if (vec2.sqrLen(v) > 0)
vec2.normalize(entityMovement, v);
else
vec2.copy(entityMovement, [0, 0]);
});
const renderer = new Renderer(canvas);
const map = new MapData(await getJSON('resources/map/test.json'));
const mapView = await loadMap(renderer, map);
const entity = await loadSimpleEntity(renderer, 'simple_square');
let prevTime: number|null = null;
const render = (time: number) => {
const res = 64;
let diff = 0;
if (prevTime !== null)
diff = time - prevTime;
prevTime = time;
vec2.scaleAndAdd(entityPos, entityPos, entityMovement, diff / 100);
vec2.scale(entityPos, entityPos, res);
vec2.round(entityPos, entityPos);
vec2.scale(entityPos, entityPos, 1 / res);
renderer.setCenter(entityPos);
renderer.clear();
mapView.render();
renderer.setTranslation(entityPos);
entity.render();
window.requestAnimationFrame(render);
};
window.requestAnimationFrame(render);
};
|
