Prepare support for adding extra elements to map layers

dist/resources/map/test.json

@@ -16,7 +16,8 @@
 		"stone/wall/bottom_left_inner"
 	],
 	"layers": [
-		[
+		{
+			"tiles": [
 				[0,  7, 3, 3, 3,  3, 3, 3,  3, 3, 3, 3,  8, 0],
 				[0,  6, 1, 1, 1,  1, 1, 1,  1, 1, 1, 1,  4, 0],
 				[0,  6, 1, 1, 1,  1, 1, 1,  1, 1, 1, 1,  4, 0],
@@ -30,8 +31,10 @@
 				[0,  6, 1, 1, 1,  1, 1, 1,  1, 1, 1, 1,  4, 0],
 				[0, 10, 5, 5, 5, 14, 1, 1, 13, 5, 5, 5,  9, 0],
 				[0,  0, 0, 0, 0,  6, 1, 1,  4, 0, 0, 0,  0, 0]
-		],
+			]
-		[
+		},
+		{
+			"tiles": [
 				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -46,6 +49,7 @@
 				[0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0],
 				[0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0]
 			]
+		}
 	],
 	"collision": [
 		{

src/controller/gamecontext.ts

@@ -39,7 +39,7 @@ export class GameContext implements CollidableGroup {
 		);
 	}
 
-	private static async loadMap(renderer: Renderer, name: string): Promise<[SpriteView, Collidable[]]> {
+	private static async loadMap(renderer: Renderer, name: string): Promise<[SpriteView[], Collidable[]]> {
 		const map = new MapData(await getJSON(`resources/map/${name}.json`));
 		return [await loadMap(renderer, map), mkCollision(map.collision)];
 	}
@@ -61,7 +61,7 @@ export class GameContext implements CollidableGroup {
 
 	private constructor(
 		private readonly renderer: Renderer,
-		private readonly mapView: SpriteView,
+		private readonly mapView: SpriteView[],
 		private readonly player: EntityContext,
 		private readonly entities: EntityContext[],
 		private readonly collision: Collidable[],
@@ -168,7 +168,8 @@ export class GameContext implements CollidableGroup {
 		this.renderer.setCenter(this.player.pos);
 		this.renderer.clear();
 
-		this.mapView.render();
+		for (const layer of this.mapView)
+			layer.render();
 
 		for (const r of [...this.entities, this.player])
 			r.render(time);

src/model/data/map.ts

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

src/view/map.ts

@@ -2,7 +2,7 @@ import { Renderer } from './renderer/renderer';
 import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
 import { loadImage, mkTexture } from './util/image';
 
-import { MapData } from '../model/data/map';
+import { MapData, MapLayer } from '../model/data/map';
 
 import { nextPowerOf2 } from '../util';
 
@@ -58,16 +58,19 @@ function addSprite(builder: SpriteViewBuilder, tileset: Tileset, x: number, y: n
 	builder.addSprite([x, y, x + 1, y + 1], tilePos);
 }
 
-export async function loadMap(r: Renderer, map: MapData): Promise<SpriteView> {
+function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): SpriteView {
-	const tiles = await loadTiles(map.tiles);
-	const tileset = mkTileset(r, tiles);
-
 	const builder = new SpriteViewBuilder(r, tileset.texture);
 
-	for (const layer of map.layers)
+	for (let x = 0; x < layer[0].length; x++)
-		for (let x = 0; x < map.width; x++)
+		for (let y = 0; y < layer.length; y++)
-			for (let y = 0; y < map.height; y++)
 			addSprite(builder, tileset, x, y, layer[y][x]);
 
 	return builder.build();
 }
+
+export async function loadMap(r: Renderer, map: MapData): Promise<SpriteView[]> {
+	const tiles = await loadTiles(map.tiles);
+	const tileset = mkTileset(r, tiles);
+
+	return map.layers.map((layer) => buildMapLayer(r, tileset, layer.tiles));
+}