rpgedit/src/index.ts

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