Create Electron app

src/renderer/controller/collision.ts

@@ -0,0 +1,65 @@
+import { Collision } from '../model/data/collision';
+
+import { Circle } from '../math/circle';
+import { Collidable } from '../math/collision';
+import { LineSegment, Movement } from '../math/line';
+import { Point } from '../math/point';
+
+import { vec2 } from 'gl-matrix';
+
+export function mkCollision(collision: Collision[]): Collidable[] {
+	const ret: Collidable[] = [];
+
+	for (const c of collision) {
+		switch (c.type) {
+		case 'polygon':
+			if (!c.vertices.length)
+				continue;
+
+			let prev = c.vertices[c.vertices.length - 1];
+
+			for (const v of c.vertices) {
+				ret.push(LineSegment.fromPoints(vec2.clone(prev), vec2.clone(v)));
+				prev = v;
+			}
+
+			for (const v of c.vertices) {
+				ret.push(new Point(vec2.clone(v)));
+				prev = v;
+			}
+			break;
+
+		case 'circle':
+			ret.push(new Circle(vec2.clone(c.center), c.radius));
+			break;
+		}
+	}
+
+	return ret;
+}
+
+export interface CollidableGroup {
+	getTranslation(): vec2|null;
+	getCollidables(): Collidable[];
+}
+
+export function collide(collision: CollidableGroup, out: vec2, move: Movement, radius: number): boolean {
+	const t = collision.getTranslation();
+	if (t)
+		move = move.translate(vec2.negate(vec2.create(), t));
+
+	for (const c of collision.getCollidables()) {
+		if (!c.collide(out, move, radius))
+			continue;
+
+		if (vec2.squaredDistance(move.src, out) >= vec2.squaredDistance(move.src, move.dest))
+			continue;
+
+		if (t)
+			vec2.add(out, out, t);
+
+		return true;
+	}
+
+	return false;
+}

src/renderer/controller/entitycontext.ts

@@ -0,0 +1,47 @@
+import { EntityView } from '../view/entity';
+import { Renderer } from '../view/renderer/renderer';
+
+import { Collidable } from '../math/collision';
+
+import { CollidableGroup, mkCollision } from './collision';
+
+import { vec2 } from 'gl-matrix';
+
+export class EntityContext implements CollidableGroup {
+	public static async load(renderer: Renderer, name: string): Promise<EntityContext> {
+		return new EntityContext(
+			renderer,
+			name,
+			await EntityView.load(renderer, name),
+		);
+	}
+
+	public readonly pos: vec2 = vec2.create();
+
+	private readonly collision: Collidable[];
+
+	private constructor(
+		private readonly renderer: Renderer,
+		private readonly name: string,
+		private readonly view: EntityView,
+	) {
+		this.collision = mkCollision(view.data.collision);
+	}
+
+	public render(time: number) {
+		this.renderer.setTranslation(this.pos);
+		this.view.renderByTime(time);
+	}
+
+	public getTranslation(): vec2 {
+		return this.pos;
+	}
+
+	public getCollidables(): Collidable[] {
+		return this.collision;
+	}
+
+	public interact() {
+		alert(`You've interacted with ${this.name}!`);
+	}
+}

src/renderer/controller/gamecontext.ts

@@ -0,0 +1,174 @@
+import { CollidableGroup, collide, mkCollision } from './collision';
+import { EntityContext } from './entitycontext';
+
+import { MapData } from '../model/data/map';
+
+import { ButtonCode, GameInputHandler } from '../view/input/gameinput';
+import { MapView } from '../view/map';
+import { Renderer } from '../view/renderer/renderer';
+
+import { Collidable } from '../math/collision';
+import { Movement } from '../math/line';
+import { getJSON, nextAnimationFrame } from '../util';
+
+import { vec2 } from 'gl-matrix';
+
+export class GameContext implements CollidableGroup {
+	public static async load(renderer: Renderer): Promise<GameContext> {
+		const map = this.loadMap(renderer, 'test');
+		const loadPlayer = EntityContext.load(renderer, 'green_circle');
+		const loadEntity = EntityContext.load(renderer, 'red_circle');
+
+		const [mapView, mapCollision] = await map;
+		const player = await loadPlayer;
+		const entity = await loadEntity;
+
+		vec2.set(player.pos, 7, 6);
+		vec2.set(entity.pos, 4, 3);
+
+		return new GameContext(
+			renderer,
+			mapView,
+			player,
+			[entity],
+			mapCollision,
+		);
+	}
+
+	private static async loadMap(renderer: Renderer, name: string): Promise<[MapView, Collidable[]]> {
+		const map = new MapData(await getJSON(`resources/map/${name}.json`));
+		return [await MapView.load(renderer, map), mkCollision(map.collision)];
+	}
+
+	private readonly initTime: number = performance.now();
+	private time = 0;
+
+	private readonly tick = 10; // ms per tick
+	private readonly maxSpeed = 0.04; // movement per tick
+	private readonly maxSkip = 20; // maximum ticks to process in a single render step
+
+	private readonly input: GameInputHandler;
+
+	private readonly playerDir: vec2 = vec2.fromValues(0, 1);
+	private speed: number = 0;
+
+	private readonly collisionRadius = 15 / 32;
+	private readonly interactLength = 1 / 32;
+
+	private constructor(
+		private readonly renderer: Renderer,
+		private readonly mapView: MapView,
+		private readonly player: EntityContext,
+		private readonly entities: EntityContext[],
+		private readonly collision: Collidable[],
+	) {
+		this.input = new GameInputHandler();
+		this.input.addListener((input) => {
+			switch (input.type) {
+			case 'button':
+				if (input.button === ButtonCode.Action)
+					this.interact();
+				break;
+
+			case 'direction':
+				if (vec2.sqrLen(input.direction) > 0) {
+					vec2.copy(this.playerDir, input.direction);
+					this.speed = this.maxSpeed;
+				} else {
+					this.speed = 0;
+				}
+				break;
+			}
+		});
+
+		this.renderLoop();
+	}
+
+	public getTranslation(): null {
+		return null;
+	}
+
+	public getCollidables(): Collidable[] {
+		return this.collision;
+	}
+
+	private updateTime(time: number): number {
+		const diff = Math.round(time / this.tick) - Math.round(this.time / this.tick);
+		this.time = time;
+
+		return diff;
+	}
+
+	private canInteract(c: CollidableGroup): boolean {
+		const dest = vec2.scaleAndAdd(vec2.create(), this.player.pos, this.playerDir, this.interactLength);
+		const move = new Movement(this.player.pos, dest);
+
+		return collide(c, vec2.create(), move, this.collisionRadius);
+	}
+
+	private interact(): void {
+		for (const e of this.entities) {
+			if (!this.canInteract(e))
+				continue;
+
+			e.interact();
+			break;
+		}
+	}
+
+	private updateStepCollide(out: vec2, dest: vec2): boolean {
+		const move = new Movement(this.player.pos, dest);
+
+		for (const c of [this, ...this.entities]) {
+			if (collide(c, out, move, this.collisionRadius)) {
+				if (vec2.squaredDistance(move.src, out) >= vec2.squaredDistance(move.src, move.dest))
+					continue;
+
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	private updateStep(): void {
+		const dest = vec2.scaleAndAdd(vec2.create(), this.player.pos, this.playerDir, this.speed);
+		const newDest = vec2.create();
+
+		while (this.updateStepCollide(newDest, dest)) {
+			if (vec2.equals(newDest, this.player.pos))
+				return;
+
+			vec2.copy(dest, newDest);
+		}
+
+		vec2.copy(this.player.pos, dest);
+	}
+
+	private update(time: number): void {
+		const diff = Math.min(this.maxSkip, this.updateTime(time));
+
+		if (!this.speed) {
+			this.renderer.snapToGrid(this.player.pos, this.player.pos);
+			return;
+		}
+
+		for (let i = 0; i < diff; i++)
+			this.updateStep();
+	}
+
+	private render(): void {
+		this.renderer.setCenter(this.player.pos);
+		this.renderer.clear();
+
+		for (const r of [this.mapView, ...this.entities, this.player])
+			r.render(this.time);
+	}
+
+	private async renderLoop(): Promise<void> {
+		while (true) {
+			this.update(await nextAnimationFrame() - this.initTime);
+			this.render();
+		}
+	}
+}

src/renderer/custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.vs" {
+	const content: string;
+	export default content;
+}
+
+declare module "*.fs" {
+	const content: string;
+	export default content;
+}

src/renderer/index.css

@@ -0,0 +1,20 @@
+html, body, div {
+	width: 100%;
+	height: 100%;
+}
+
+#app {
+	text-align: center;
+}
+
+canvas {
+	position: relative;
+	top: calc(50% - 384px);
+}
+
+* {
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
+	background: #223;
+}

src/renderer/index.ts

@@ -0,0 +1,21 @@
+import './index.css';
+
+import { GameContext } from './controller/gamecontext';
+
+import { Renderer } from './view/renderer/renderer';
+
+window.onload = async () => {
+	const app = document.getElementById('app');
+	if (!app)
+		return;
+
+	const canvas = document.createElement('canvas');
+	canvas.width = 1024;
+	canvas.height = 768;
+
+	app.append(canvas);
+
+	const renderer = new Renderer(canvas);
+
+	GameContext.load(renderer);
+};

src/renderer/math/circle.ts

@@ -0,0 +1,15 @@
+import { Collidable } from './collision';
+import { Movement } from './line';
+import { Point } from './point';
+
+import { vec2 } from 'gl-matrix';
+
+export class Circle implements Collidable, Point {
+	private pointCollide = Point.prototype.collide;
+
+	constructor(public readonly p: vec2, public readonly r: number) {}
+
+	public collide(out: vec2, move: Movement, r: number): boolean {
+		return this.pointCollide(out, move, r + this.r);
+	}
+}

src/renderer/math/collision.ts

@@ -0,0 +1,7 @@
+import { Movement } from './line';
+
+import { vec2 } from 'gl-matrix';
+
+export interface Collidable {
+	collide(out: vec2, move: Movement, r: number): boolean;
+}

src/renderer/math/line.ts

@@ -0,0 +1,141 @@
+import { mat2, vec2 } from 'gl-matrix';
+import { Collidable } from './collision';
+
+const rot90 = mat2.fromValues(
+	0, 1,
+	-1, 0,
+);
+
+export function normal(out: vec2, a: vec2): vec2 {
+	return vec2.transformMat2(out, a, rot90);
+}
+
+export function crossz(a: vec2, b: vec2): number {
+	return a[0] * b[1] - a[1] * b[0];
+}
+
+export class Line {
+	constructor(
+		public readonly p: vec2,
+		public readonly v: vec2,
+	) {}
+
+	public getNormal(out: vec2): vec2 {
+		return normal(out, this.v);
+	}
+
+	public projectPointDistance(p2: vec2): number {
+		const v2 = vec2.sub(vec2.create(), p2, this.p);
+		return vec2.dot(this.v, v2);
+	}
+
+	public projectPoint(out: vec2, p2: vec2): vec2 {
+		const d = this.projectPointDistance(p2);
+		return vec2.scaleAndAdd(out, this.p, this.v, d);
+	}
+
+	public distancePoint(p2: vec2): number {
+		const v2 = vec2.sub(vec2.create(), p2, this.p);
+		return crossz(this.v, v2);
+	}
+
+	public intersectLine(out: vec2, l2: Line): vec2 {
+		const vp = vec2.sub(vec2.create(), l2.p, this.p);
+		const d = crossz(vp, this.v);
+		const d2 = d / crossz(this.v, l2.v);
+		return vec2.scaleAndAdd(out, l2.p, l2.v, d2);
+	}
+}
+
+export class Movement {
+	public readonly v: vec2;
+
+	constructor(
+		public readonly src: vec2,
+		public readonly dest: vec2,
+	) {
+		this.v = vec2.sub(vec2.create(), dest, src);
+	}
+
+	public intersectLine(out: vec2, l: Line): vec2 {
+		const vp = vec2.sub(vec2.create(), l.p, this.src);
+		const d = crossz(vp, this.v);
+		const d2 = d / crossz(this.v, l.v);
+		return vec2.scaleAndAdd(out, l.p, l.v, d2);
+	}
+
+	public passes(p: vec2): boolean {
+		const vp = vec2.sub(vec2.create(), p, this.src);
+		const d = vec2.dot(this.v, vp);
+		return d >= 0 && d <= vec2.sqrLen(this.v);
+	}
+
+	public toLineSegment(): LineSegment {
+		return LineSegment.fromPoints(this.src, this.dest);
+	}
+
+	public translate(t: vec2): Movement {
+		const src = vec2.add(vec2.create(), this.src, t);
+		const dest = vec2.add(vec2.create(), this.dest, t);
+		return new Movement(src, dest);
+	}
+}
+
+export class LineSegment extends Line implements Collidable {
+	public static fromPoints(p1: vec2, p2: vec2): LineSegment {
+		const d = vec2.dist(p1, p2);
+		const v = vec2.sub(vec2.create(), p2, p1);
+		vec2.scale(v, v, 1 / d);
+
+		return new LineSegment(p1, v, d);
+	}
+
+	constructor(
+		p: vec2,
+		v: vec2,
+		public readonly l: number,
+	) {
+		super(p, v);
+	}
+
+	public getP2(out: vec2): vec2 {
+		return vec2.scaleAndAdd(out, this.p, this.v, this.l);
+	}
+
+	public containsPoint(p2: vec2): boolean {
+		const d = this.projectPointDistance(p2);
+		return (d >= 0 && d <= this.l);
+	}
+
+	public collide(out: vec2, move: Movement, r: number): boolean {
+		if (this.distancePoint(move.src) < 0)
+			return false;
+
+		if (crossz(move.v, this.v) < 0)
+			return false;
+
+		const t = this.getNormal(vec2.create());
+		vec2.scale(t, t, -r);
+
+		const refMove = move.translate(t);
+
+		if (!this.collideRef(out, refMove))
+			return false;
+
+		vec2.sub(out, out, t);
+		return true;
+	}
+
+	private collideRef(out: vec2, move: Movement): boolean {
+		if (this.distancePoint(move.dest) >= 0)
+			return false;
+
+		const x = move.intersectLine(vec2.create(), this);
+		if (!this.containsPoint(x))
+			return false;
+
+		this.projectPoint(out, move.dest);
+
+		return true;
+	}
+}

src/renderer/math/point.ts

@@ -0,0 +1,40 @@
+import { Collidable } from './collision';
+import { Line, Movement, normal } from './line';
+
+import { vec2 } from 'gl-matrix';
+
+export class Point implements Collidable {
+	constructor(public readonly p: vec2) {}
+
+	public collide(out: vec2, move: Movement, r: number): boolean {
+		const moveLine = move.toLineSegment();
+
+		if (moveLine.projectPointDistance(this.p) < 0)
+			return false;
+
+		const d = moveLine.distancePoint(this.p) / r;
+		if (Math.abs(d) >= 1)
+			return false;
+
+		const e = Math.sqrt(1 - d * d);
+
+		const t = moveLine.getNormal(vec2.create());
+		vec2.scale(t, t, d);
+		vec2.scaleAndAdd(t, t, moveLine.v, e);
+
+		const tr = vec2.scale(vec2.create(), t, r);
+
+		const refMove = move.translate(tr);
+
+		if (vec2.sqrDist(this.p, move.src) > r * r && !refMove.passes(this.p))
+			return false;
+
+		normal(t, t);
+
+		const tang = new Line(this.p, t);
+		tang.projectPoint(out, refMove.dest);
+		vec2.sub(out, out, tr);
+
+		return true;
+	}
+}

src/renderer/model/data/collision.ts

@@ -0,0 +1,12 @@
+export interface PolygonCollision {
+	readonly type: 'polygon';
+	readonly vertices: Array<[number, number]>;
+}
+
+export interface CircleCollision {
+	readonly type: 'circle';
+	readonly center: [number, number];
+	readonly radius: number;
+}
+
+export type Collision = PolygonCollision | CircleCollision;

src/renderer/model/data/entity.ts

@@ -0,0 +1,29 @@
+import { Collision } from './collision';
+
+export interface EntityAnimation {
+	readonly sequence: ReadonlyArray<[number, number]>;
+}
+
+export interface EntityDataInput {
+	readonly sprite: string;
+	readonly anchor?: [number, number];
+	readonly collision?: Collision[];
+	readonly frames?: number;
+	readonly animation?: EntityAnimation;
+}
+
+export class EntityData {
+	public readonly sprite: string;
+	public readonly anchor: [number, number];
+	public readonly collision: Collision[];
+	public readonly frames: number;
+	public readonly animation?: EntityAnimation;
+
+	constructor(input: EntityDataInput) {
+		this.sprite = input.sprite;
+		this.anchor = input.anchor || [0.5, 0.5];
+		this.collision = input.collision || [];
+		this.frames = input.frames || 1;
+		this.animation = input.animation;
+	}
+}

src/renderer/model/data/map.ts

@@ -0,0 +1,29 @@
+import { Collision } from './collision';
+
+export interface MapLayer {
+	readonly tiles: number[][];
+}
+
+export interface MapDataInput {
+	readonly tiles: string[];
+	readonly layers: MapLayer[];
+	readonly collision: Collision[];
+}
+
+export class MapData {
+	public readonly tiles: string[];
+	public readonly layers: MapLayer[];
+	public readonly collision: Collision[];
+
+	public readonly width: number;
+	public readonly height: number;
+
+	constructor(data: MapDataInput) {
+		this.tiles = data.tiles;
+		this.layers = data.layers;
+		this.collision = data.collision;
+
+		this.height = this.layers[0].tiles.length;
+		this.width = this.layers[0].tiles[0].length;
+	}
+}

src/renderer/util.ts

@@ -0,0 +1,84 @@
+export function recordToMap<T>(r: Record<string, T>): Map<string, T> {
+	const ret = new Map();
+
+	for (const k of Object.keys(r))
+		ret.set(k, r[k]);
+
+	return ret;
+}
+
+export function mapValues<K, V1, V2>(f: (v: V1) => V2, map: Map<K, V1>): Map<K, V2> {
+	const ret: Map<K, V2> = new Map();
+
+	for (const [k, v] of map)
+		ret.set(k, f(v));
+
+	return ret;
+}
+
+export async function mapValuesAsync<K, V1, V2>(f: (v: V1) => Promise<V2>, map: Map<K, V1>): Promise<Map<K, V2>> {
+	const ret: Map<K, V2> = new Map();
+
+	for (const [k, v] of mapValues(f, map))
+		ret.set(k, await v);
+
+	return ret;
+}
+
+export function nextPowerOf2(n: number): number {
+	let i = 1;
+
+	while (i < n)
+		i *= 2;
+
+	return i;
+}
+
+export class Listenable<T extends any[]> {
+	private readonly listeners: Array<(...args: T) => void> = [];
+
+	public addListener(listener: (...args: T) => void): void {
+		this.listeners.push(listener);
+	}
+
+	protected runListeners(...args: T): void {
+		this.listeners.forEach((l) => l(...args));
+	}
+}
+
+export function get(url: string): Promise<XMLHttpRequest> {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+
+		const handleError = () => {
+			if (xhr.readyState !== xhr.DONE) {
+				reject(new Error('HTTP request ended in state ' + xhr.readyState));
+				return;
+			}
+
+			reject(new Error('HTTP request returned status ' + xhr.status));
+		};
+
+		xhr.addEventListener('error', handleError);
+
+		xhr.addEventListener('load', () => {
+			if (xhr.readyState !== xhr.DONE || xhr.status !== 200) {
+				handleError();
+				return;
+			}
+
+			resolve(xhr);
+		});
+
+		xhr.open('GET', url, true);
+		xhr.send();
+	});
+}
+
+export async function getJSON(url: string): Promise<any> {
+	return JSON.parse((await get(url)).responseText);
+}
+
+export function nextAnimationFrame(): Promise<DOMHighResTimeStamp> {
+	return new Promise((resolve) => window.requestAnimationFrame(resolve));
+}

src/renderer/view/entity.ts

@@ -0,0 +1,72 @@
+import { EntityData } from '../model/data/entity';
+import { Renderer } from './renderer/renderer';
+import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
+import { loadImage, mkTexture } from './util/image';
+
+import { getJSON } from '../util';
+
+import { vec2 } from 'gl-matrix';
+
+export class EntityView {
+	public static async load(r: Renderer, name: string): Promise<EntityView> {
+		const data = new EntityData(await getJSON(`resources/entity/${name}.json`));
+		const tile = await loadImage(`resources/sprite/entity/${data.sprite}.png`);
+
+		const [texture, size] = mkTexture(r, tile);
+		const frameSize = [size[0], size[1] / data.frames];
+
+		const offset = vec2.mul(vec2.create(), frameSize, data.anchor);
+		r.snapToGrid(offset, offset);
+
+		const coords: SpriteCoords = [
+			-offset[0],
+			-offset[1],
+			-offset[0] + frameSize[0],
+			-offset[1] + frameSize[1],
+		];
+
+		const sprites: SpriteView[] = [];
+
+		for (let frame = 0; frame < data.frames; frame++) {
+			const builder = new SpriteViewBuilder(r, texture);
+			builder.addSprite(coords, [0, frame / data.frames, 1, (frame + 1) / data.frames]);
+			sprites.push(builder.build());
+		}
+
+		return new EntityView(
+			data,
+			sprites,
+		);
+	}
+
+	private readonly totalTime: number;
+
+	private constructor(
+		public readonly data: EntityData,
+		public readonly sprites: SpriteView[],
+	) {
+		if (data.animation)
+			this.totalTime = data.animation.sequence.reduce((a, s) => a + s[0], 0);
+		else
+			this.totalTime = 0;
+	}
+
+	public getSpriteByTime(time: number): SpriteView {
+		time %= this.totalTime;
+
+		if (this.data.animation) {
+			for (const [len, sprite] of this.data.animation.sequence) {
+				time -= len;
+				if (time < 0)
+					return this.sprites[sprite];
+			}
+		}
+
+		return this.sprites[0];
+	}
+
+	public renderByTime(time: number) {
+		this.getSpriteByTime(time).render();
+	}
+
+}

src/renderer/view/input/gameinput.ts

@@ -0,0 +1,78 @@
+import { InputHandler } from './inputhandler';
+
+import { Listenable } from '../../util';
+
+import { vec2 } from 'gl-matrix';
+
+export enum ButtonCode {
+	Action,
+	Back,
+	Menu,
+}
+
+const buttonMapping: Record<string, ButtonCode> = {
+	KeyZ: ButtonCode.Action,
+	KeyX: ButtonCode.Back,
+	KeyC: ButtonCode.Menu,
+};
+
+export interface DirectionInput {
+	type: 'direction';
+	direction: vec2;
+}
+
+export interface ButtonInput {
+	type: 'button';
+	button: ButtonCode;
+}
+
+export type GameInput = DirectionInput | ButtonInput;
+
+export class GameInputHandler extends Listenable<[GameInput]> {
+	private readonly input: InputHandler;
+
+	constructor() {
+		super();
+
+		this.input = new InputHandler(
+			new Set([
+				'ArrowLeft',
+				'ArrowUp',
+				'ArrowRight',
+				'ArrowDown',
+				...Object.keys(buttonMapping),
+			]));
+
+		this.input.addListener((key: string, pressed: boolean) => {
+			const button = buttonMapping[key];
+			if (button !== undefined) {
+				if (pressed)
+					this.runListeners({
+						type: 'button',
+						button,
+					});
+
+				return;
+			}
+
+			const dir = vec2.create();
+
+			if (this.input.has('ArrowLeft'))
+				vec2.add(dir, dir, [-1, 0]);
+			if (this.input.has('ArrowUp'))
+				vec2.add(dir, dir, [0, -1]);
+			if (this.input.has('ArrowRight'))
+				vec2.add(dir, dir, [1, 0]);
+			if (this.input.has('ArrowDown'))
+				vec2.add(dir, dir, [0, 1]);
+
+			if (vec2.sqrLen(dir) > 0)
+				vec2.normalize(dir, dir);
+
+			this.runListeners({
+				type: 'direction',
+				direction: dir,
+			});
+		});
+	}
+}

src/renderer/view/input/inputhandler.ts

@@ -0,0 +1,44 @@
+import { Listenable } from '../../util';
+
+export class InputHandler extends Listenable<[string, boolean]> {
+	private readonly keys: Set<string> = new Set();
+
+	constructor(relevantKeys: Set<string>) {
+		super();
+
+		window.addEventListener('keydown', (ev) => {
+			if (!relevantKeys.has(ev.code))
+				return;
+
+			ev.preventDefault();
+
+			if (ev.repeat)
+				return;
+
+			this.keys.add(ev.code);
+			this.runListeners(ev.code, true);
+		});
+
+		window.addEventListener('keyup', (ev) => {
+			if (!relevantKeys.has(ev.code))
+				return;
+
+			ev.preventDefault();
+
+			if (!this.keys.has(ev.code))
+				return;
+
+			this.keys.delete(ev.code);
+			this.runListeners(ev.code, false);
+		});
+
+		window.addEventListener('blur', () => {
+			this.keys.clear();
+			this.runListeners('', false);
+		});
+	}
+
+	public has(key: string): boolean {
+		return this.keys.has(key);
+	}
+}

src/renderer/view/map.ts

@@ -0,0 +1,173 @@
+import { EntityView } from './entity';
+import { Renderer } from './renderer/renderer';
+import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
+import { loadImage, mkTexture } from './util/image';
+
+import { MapData } from '../model/data/map';
+
+import { nextPowerOf2 } from '../util';
+
+interface StaticMapTile {
+	type: 'static';
+	image: HTMLImageElement;
+}
+
+interface EntityTile {
+	type: 'entity';
+	entity: EntityView;
+}
+
+type MapTile = StaticMapTile | EntityTile;
+
+interface StaticTilesetTile {
+	type: 'static';
+	coords: SpriteCoords;
+}
+
+type TilesetTile = StaticTilesetTile | EntityTile;
+
+interface Tileset {
+	texture: WebGLTexture;
+	tiles: TilesetTile[];
+}
+
+async function loadTile(r: Renderer, tile: string): Promise<MapTile> {
+	const name = tile.substr(1);
+	switch (tile[0]) {
+	case '-':
+		return {
+			type: 'static',
+			image: await loadImage(`resources/sprite/tile/${name}.png`),
+		};
+
+	case '@':
+		return {
+			type: 'entity',
+			entity: await EntityView.load(r, name),
+		};
+
+	default:
+		throw new Error('invalid tile specifier');
+	}
+}
+
+function loadTiles(r: Renderer, tiles: string[]): Promise<MapTile[]> {
+	return Promise.all(tiles.map((tile) => loadTile(r, tile)));
+}
+
+function mkTileset(
+	r: Renderer,
+	mapTiles: MapTile[],
+): Tileset {
+	const tileSize = 32;
+
+	const canvasDim = nextPowerOf2(Math.sqrt(mapTiles.length));
+	const canvasSize = canvasDim * tileSize;
+
+	const canvas = document.createElement('canvas');
+	canvas.width = canvas.height = canvasSize;
+
+	let x = 0, y = 0;
+	const tiles: TilesetTile[] = [];
+	const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+	for (const tile of mapTiles) {
+		switch (tile.type) {
+		case 'static':
+			ctx.drawImage(tile.image, x * tileSize, y * tileSize);
+			tiles.push({
+				type: 'static',
+				coords: [x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim],
+			});
+
+			x++;
+			if (x === canvasDim) {
+				x = 0;
+				y++;
+			}
+			break;
+
+		case 'entity':
+			tiles.push(tile);
+			break;
+		}
+	}
+
+	const [texture] = mkTexture(r, canvas);
+
+	return {
+		texture,
+		tiles,
+	};
+}
+
+function addSprite(
+	builder: SpriteViewBuilder,
+	entityTiles: Array<[[number, number], EntityView]>,
+	tileset: Tileset,
+	x: number,
+	y: number,
+	tile: number) {
+	if (!tile)
+		return;
+
+	const tilesetTile = tileset.tiles[tile - 1];
+
+	switch (tilesetTile.type) {
+		case 'static':
+			builder.addSprite([x, y, x + 1, y + 1], tilesetTile.coords);
+			break;
+
+		case 'entity':
+			entityTiles.push([[x + 0.5, y + 0.5], tilesetTile.entity]);
+			break;
+	}
+}
+
+function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): MapLayerView {
+	const builder = new SpriteViewBuilder(r, tileset.texture);
+	const entityTiles: Array<[[number, number], EntityView]> = [];
+
+	for (let x = 0; x < layer[0].length; x++)
+		for (let y = 0; y < layer.length; y++)
+			addSprite(builder, entityTiles, tileset, x, y, layer[y][x]);
+
+	return new MapLayerView(r, builder.build(), entityTiles);
+}
+
+class MapLayerView {
+	public constructor(
+		private r: Renderer,
+		private staticTiles: SpriteView,
+		private entityTiles: Array<[[number, number], EntityView]>,
+	) {
+	}
+
+	public render(time: number): void {
+		this.r.setTranslation([0, 0]);
+		this.staticTiles.render();
+
+		for (const [coords, entity] of this.entityTiles) {
+			this.r.setTranslation(coords);
+			entity.renderByTime(time);
+		}
+	}
+}
+
+export class MapView {
+	public static async load(r: Renderer, map: MapData): Promise<MapView> {
+		const tiles = await loadTiles(r, map.tiles);
+		const tileset = mkTileset(r, tiles);
+
+		const layers = map.layers.map((layer) => buildMapLayer(r, tileset, layer.tiles));
+		return new MapView(layers);
+	}
+
+	private constructor(private layers: MapLayerView[]) {
+	}
+
+	public render(time: number): void {
+		for (const layer of this.layers)
+			layer.render(time);
+	}
+}

src/renderer/view/renderer/renderer.ts

@@ -0,0 +1,99 @@
+import { Shaders } from './shaders';
+
+import { mat4, vec2 } from 'gl-matrix';
+
+export class Renderer {
+	public readonly coordScale = 32;
+	private readonly viewScale = 2;
+
+	private readonly gl: WebGLRenderingContext;
+	private readonly shaders: Shaders;
+
+	private readonly center: vec2 = vec2.create();
+	private readonly translation: vec2 = vec2.create();
+	private readonly viewport: mat4 = mat4.create();
+
+	constructor(private readonly canvas: HTMLCanvasElement) {
+		this.gl = this.mkContext();
+
+		this.shaders = new Shaders(this.gl);
+
+		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+		this.gl.enable(this.gl.BLEND);
+		this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+		this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
+
+		this.setSize();
+	}
+
+	public createBuffer(): WebGLBuffer {
+		const ret = this.gl.createBuffer();
+		if (!ret)
+			throw new Error('unable to create buffer');
+
+		return ret;
+	}
+
+	public getContext(): WebGLRenderingContext {
+		return this.gl;
+	}
+
+	public getVertexPosLoc(): number {
+		return this.shaders.vertexPosLoc;
+	}
+
+	public getTextureCoordLoc(): number {
+		return this.shaders.textureCoordLoc;
+	}
+
+	public getSamplerLoc(): WebGLUniformLocation {
+		return this.shaders.samplerLoc;
+	}
+
+	public setCenter(v: vec2|number[]) {
+		this.snapToGrid(this.center, v);
+	}
+
+	public setTranslation(v: vec2|number[]) {
+		vec2.sub(this.translation, v, this.center);
+		this.snapToGrid(this.translation, this.translation);
+		this.gl.uniform2fv(this.shaders.translateLoc, this.translation);
+	}
+
+	public clear(): void {
+		this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+		this.setTranslation([0, 0]);
+	}
+
+	public snapToGrid(out: vec2, a: vec2|number[]): void {
+		vec2.scale(out, a, this.coordScale);
+		vec2.round(out, out);
+		vec2.scale(out, out, 1 / this.coordScale);
+	}
+
+	private mkContext(): WebGLRenderingContext {
+		const gl = (
+			this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')
+		);
+		if (!gl)
+			throw new Error('unable to initialize WebGL context');
+
+		return gl;
+	}
+
+	private setSize(): void {
+		const w = this.canvas.width;
+		const h = this.canvas.height;
+
+		this.gl.viewport(0, 0, w, h);
+		this.clear();
+
+		const scale = this.viewScale * this.coordScale;
+
+		mat4.identity(this.viewport);
+		mat4.scale(this.viewport, this.viewport, [2 * scale / w, -2 * scale / h, 1.0]);
+		this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
+	}
+}

src/renderer/view/renderer/shaders.ts

@@ -0,0 +1,79 @@
+import fragmentShaderSrc from './shaders/default.fs';
+import vertexShaderSrc from './shaders/default.vs';
+
+export class Shaders {
+	public readonly viewportLoc: WebGLUniformLocation;
+	public readonly translateLoc: WebGLUniformLocation;
+
+	public readonly vertexPosLoc: number;
+	public readonly textureCoordLoc: number;
+	public readonly samplerLoc: WebGLUniformLocation;
+
+	constructor(private readonly gl: WebGLRenderingContext) {
+		const shaderProgram = this.gl.createProgram();
+		if (!shaderProgram)
+			throw new Error('Unable to create shader program');
+
+		const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc);
+		const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc);
+
+		this.gl.attachShader(shaderProgram, vertexShader);
+		this.gl.attachShader(shaderProgram, fragmentShader);
+
+		this.gl.linkProgram(shaderProgram);
+		if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) {
+			const err = this.gl.getProgramInfoLog(shaderProgram);
+
+			this.gl.deleteShader(vertexShader);
+			this.gl.deleteShader(fragmentShader);
+			this.gl.deleteProgram(shaderProgram);
+
+			throw new Error('Unable to link shader: ' + err);
+		}
+
+		this.gl.useProgram(shaderProgram);
+
+		this.vertexPosLoc = this.getAttribLocation(shaderProgram, 'aVertexPos');
+		this.gl.enableVertexAttribArray(this.vertexPosLoc);
+
+		this.textureCoordLoc = this.getAttribLocation(shaderProgram, 'aTextureCoord');
+		this.gl.enableVertexAttribArray(this.textureCoordLoc);
+
+		this.viewportLoc = this.getUniformLocation(shaderProgram, 'uViewport');
+		this.translateLoc = this.getUniformLocation(shaderProgram, 'uTranslate');
+		this.samplerLoc = this.getUniformLocation(shaderProgram, 'uSampler');
+	}
+
+	private compileShader(type: number, src: string): WebGLShader {
+		const shader = this.gl.createShader(type);
+		if (!shader)
+			throw new Error('Unable to create shader');
+
+		this.gl.shaderSource(shader, src);
+		this.gl.compileShader(shader);
+
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+			const err = this.gl.getShaderInfoLog(shader);
+			this.gl.deleteShader(shader);
+			throw new Error('Unable to compile shader: ' + err);
+		}
+
+		return shader;
+	}
+
+	private getAttribLocation(program: WebGLProgram, name: string): number {
+		const ret = this.gl.getAttribLocation(program, name);
+		if (ret < 0)
+			throw new Error("unable to get location of attribute '" + name + "'");
+
+		return ret;
+	}
+
+	private getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation {
+		const ret = this.gl.getUniformLocation(program, name);
+		if (!ret)
+			throw new Error("unable to get location of uniform '" + name + "'");
+
+		return ret;
+	}
+}

src/renderer/view/renderer/shaders/default.fs

@@ -0,0 +1,10 @@
+precision highp float;
+
+varying vec2 vTextureCoord;
+
+uniform sampler2D uSampler;
+
+
+void main(void) {
+	gl_FragColor = texture2D(uSampler, vTextureCoord);
+}

src/renderer/view/renderer/shaders/default.vs

@@ -0,0 +1,13 @@
+attribute vec2 aVertexPos;
+attribute vec2 aTextureCoord;
+
+uniform mat4 uViewport;
+uniform vec2 uTranslate;
+
+varying highp vec2 vTextureCoord;
+
+
+void main(void) {
+	gl_Position = uViewport * vec4(aVertexPos + uTranslate, 0.0, 1.0);
+	vTextureCoord = aTextureCoord;
+}

src/renderer/view/sprite.ts

@@ -0,0 +1,72 @@
+import { Renderer } from './renderer/renderer';
+
+export type SpriteCoords = [number, number, number, number];
+
+export class SpriteViewBuilder {
+	private static pushSprite(buf: number[], coords: SpriteCoords): void {
+		const [x1, y1, x2, y2] = coords;
+
+		buf.push(x1); buf.push(y1);
+		buf.push(x2); buf.push(y1);
+		buf.push(x1); buf.push(y2);
+
+		buf.push(x1); buf.push(y2);
+		buf.push(x2); buf.push(y1);
+		buf.push(x2); buf.push(y2);
+	}
+
+	private readonly vertexData: number[] = [];
+	private readonly textureData: number[] = [];
+
+	constructor(private readonly r: Renderer, private readonly texture: WebGLTexture) {}
+
+	public addSprite(vertexCoords: SpriteCoords, texCoords: SpriteCoords): void {
+		SpriteViewBuilder.pushSprite(this.vertexData, vertexCoords);
+		SpriteViewBuilder.pushSprite(this.textureData, texCoords);
+	}
+
+	public build(): SpriteView {
+		return new SpriteView(this.r, this.texture, this.vertexData, this.textureData);
+	}
+}
+
+export class SpriteView {
+	private readonly vertexCount: number;
+	private readonly vertexBuffer: WebGLBuffer;
+	private readonly textureBuffer: WebGLBuffer;
+
+	constructor(
+		private readonly r: Renderer,
+		private readonly texture: WebGLTexture,
+		vertexData: number[],
+		textureData: number[],
+	) {
+		const gl = r.getContext();
+
+		this.vertexBuffer = r.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
+
+		this.textureBuffer = r.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureData), gl.STATIC_DRAW);
+
+		this.vertexCount = vertexData.length / 2;
+	}
+
+	public render(): void {
+		const gl = this.r.getContext();
+
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, this.texture);
+		gl.uniform1i(this.r.getSamplerLoc(), 0);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+		gl.vertexAttribPointer(this.r.getVertexPosLoc(), 2, gl.FLOAT, false, 0, 0);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
+		gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0);
+
+		gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+	}
+}

src/renderer/view/util/image.ts

@@ -0,0 +1,33 @@
+import { Renderer } from '../renderer/renderer';
+
+export function loadImage(url: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.addEventListener('load', () => { resolve(img); });
+		img.addEventListener('error', () => { reject(new Error('failed to load ' + url)); });
+		img.src = url;
+	});
+}
+
+export function mkTexture(
+	r: Renderer,
+	src: HTMLCanvasElement|HTMLImageElement,
+): [WebGLTexture, [number, number]] {
+	const gl = r.getContext();
+	const texture = gl.createTexture();
+	if (!texture)
+		throw new Error('unable to create texture');
+
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+	const size: [number, number] = [
+		src.width / r.coordScale, src.height / r.coordScale,
+	];
+
+	return [texture, size];
+}