Merge pull request 'feat(#10): allow multiple layers' (#11) from dev into main

Reviewed-on: #11

index.js

@@ -7,16 +7,27 @@ import {
   MapManagement,
 } from "./modules/game-objects/index.js";
 
-const maps = [
+const backgroundMaps = [
   {
     name: "overworld",
     imageId: "overworld",
     elementId: "level1",
+    layer: 0,
     selected: true,
   },
   { name: "ocean", imageId: "overworld", elementId: "level2" },
 ];
 
+const foregroundMaps = [
+  {
+    name: "overworld",
+    imageId: "overworld",
+    elementId: "level1",
+    layer: 1,
+    selected: true,
+  },
+];
+
 const clicableObjects = ["debug", "level1", "level2"];
 
 class Game extends GameObject {
@@ -30,7 +41,10 @@ class Game extends GameObject {
       percentage: 0.9,
     });
     const camera = new Camera({
-      gameObjects: [new MapManagement({ maps: maps })],
+      gameObjects: [
+        new MapManagement({ maps: backgroundMaps }),
+        new MapManagement({ maps: foregroundMaps }),
+      ],
     });
     const fpsCounter = new FpsCounter({ debug: false });
     this.gameObjects = [canvasResizer, camera, fpsCounter];

modules/game-objects/map.js

@@ -3,10 +3,18 @@ import { createCanvas } from "../utils.js";
 import { GameObject } from "./game-object.js";
 
 export class Map extends GameObject {
-  constructor({ name, imageId, elementId, selected = false, debug = false }) {
+  constructor({
+    name,
+    imageId,
+    elementId,
+    layer = 0,
+    selected = false,
+    debug = false,
+  }) {
     super({ debug });
     this.name = name;
     this.imageId = imageId;
+    this.layer = layer;
     this.image = document.getElementById(imageId);
     this.imageWidth = this.image.width;
     this.imageHeight = this.image.height;
@@ -16,9 +24,11 @@ export class Map extends GameObject {
   }
 
   async load() {
-    const levelConfig = await fetch("/resources/" + this.name + ".json");
+    const response = await fetch(`/resources/${this.name}.json`, {
-    this.levelConfig = await levelConfig.json();
+      cache: "force-cache",
-    const layer = this.levelConfig.layers[0];
+    });
+    this.levelConfig = await response.json();
+    const layer = this.levelConfig.layers[this.layer];
     const { data, height, width } = layer;
     this.width = width;
     this.height = height;

resources/overworld.json

@@ -1,67 +1,82 @@
-{
+{ "compressionlevel":-1,
-  "compressionlevel": -1,
+ "height":20,
-  "height": 15,
+ "infinite":false,
-  "infinite": false,
+ "layers":[
-  "layers": [
+        {
-    {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 366,
-      "data": [
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 366,
-        1, 366, 366, 366, 366, 366, 366, 366, 366, 366, 1, 1179, 445, 446, 446,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        446, 690, 259, 260, 261, 1, 406, 406, 406, 406, 406, 406, 406, 406, 406,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        1, 1179, 485, 486, 486, 486, 730, 299, 300, 301, 121, 122, 122, 122,
+            366, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 366, 366,
-        122, 122, 122, 122, 123, 1, 1, 1179, 525, 526, 526, 526, 770, 339, 340,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 406, 1, 1, 1, 1,
-        341, 161, 162, 162, 162, 162, 162, 162, 162, 163, 1, 1, 1219, 565, 566,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        567, 567, 810, 379, 379, 379, 201, 202, 202, 202, 202, 202, 202, 202,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        203, 243, 244, 245, 366, 366, 366, 366, 850, 284, 284, 284, 243, 244,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        244, 244, 244, 244, 244, 244, 245, 283, 284, 285, 406, 366, 366, 366,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 369, 1, 1, 1, 1, 1, 1, 1,
-        366, 324, 324, 324, 283, 284, 284, 284, 284, 284, 284, 284, 285, 323,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        324, 325, 366, 366, 366, 366, 366, 366, 366, 366, 283, 363, 364, 363,
+            366, 366, 366, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-        364, 363, 364, 284, 285, 366, 1175, 1176, 1177, 366, 1175, 1176, 1177,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 243, 244, 244, 244, 244, 244, 244, 244, 244, 244, 245,
-        366, 366, 366, 283, 403, 404, 403, 404, 403, 404, 284, 285, 406, 1215,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        1216, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 363, 364, 284,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        284, 363, 364, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        366, 406, 406, 283, 403, 404, 284, 284, 403, 404, 284, 285, 366, 366,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        366, 366, 366, 366, 366, 366, 366, 366, 366, 283, 284, 284, 363, 364,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        284, 284, 284, 285, 366, 1175, 1176, 1177, 406, 1175, 1176, 1177, 406,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 284, 284, 284, 284, 284, 284, 284, 284, 284, 285,
-        406, 406, 283, 284, 284, 403, 404, 284, 284, 284, 285, 406, 1215, 1216,
+            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 366, 366, 366, 366, 366, 366, 1, 1, 1, 323, 324, 324, 324, 324, 324, 324, 324, 324, 324, 325],
-        1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 284, 284, 284, 284,
+         "height":20,
-        284, 284, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, 366,
+         "id":1,
-        366, 366, 323, 324, 324, 324, 324, 324, 324, 324, 325, 406, 406, 406,
+         "name":"Tile Layer 1",
-        406, 406, 406, 406, 406, 406, 406, 406
+         "opacity":1,
-      ],
+         "type":"tilelayer",
-      "height": 15,
+         "visible":true,
-      "id": 1,
+         "width":30,
-      "name": "Tile Layer 1",
+         "x":0,
-      "opacity": 1,
+         "y":0
-      "type": "tilelayer",
+        }, 
-      "visible": true,
+        {
-      "width": 20,
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 485, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486,
-      "x": 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 525, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526,
-      "y": 0
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 565, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 449, 566,
-    }
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 605, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 607, 607, 607, 607,
-  ],
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 367, 528, 0, 0, 0, 0, 0, 0, 0, 0, 0, 522, 523, 523, 523, 523, 523, 523, 523, 523, 524,
-  "nextlayerid": 2,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 407, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 12, 13, 9, 10, 11, 0, 0, 564,
-  "nextobjectid": 1,
+            446, 446, 446, 446, 446, 446, 446, 446, 446, 447, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 47, 53, 49, 50, 51, 0, 0, 564,
-  "orientation": "orthogonal",
+            486, 486, 486, 486, 486, 486, 486, 486, 486, 487, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 87, 88, 89, 90, 91, 214, 215, 564,
-  "renderorder": "right-down",
+            526, 526, 526, 526, 526, 526, 526, 526, 526, 527, 568, 0, 450, 451, 0, 0, 0, 450, 451, 0, 562, 0, 127, 128, 129, 130, 131, 254, 255, 564,
-  "tiledversion": "1.11.0",
+            566, 566, 566, 566, 566, 566, 566, 566, 566, 567, 568, 0, 490, 491, 0, 0, 0, 490, 491, 0, 562, 0, 167, 168, 169, 170, 171, 294, 295, 564,
-  "tileheight": 16,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 0, 0, 0, 0, 0, 0, 0, 564,
-  "tilesets": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 602, 603, 603, 642, 0, 641, 603, 603, 603, 604,
-    {
+            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,
-      "columns": 40,
+            0, 0, 0, 0, 0, 0, 0, 45, 46, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      "firstgid": 1,
+            0, 0, 0, 0, 0, 0, 0, 85, 86, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 3, 0, 0,
-      "image": "overworld.png",
+            0, 45, 46, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0,
-      "imageheight": 576,
+            0, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0,
-      "imagewidth": 640,
+            0, 0, 0, 0, 0, 0, 0, 0, 45, 46, 0, 0, 0, 0, 0, 45, 46, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0,
-      "margin": 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 0, 0, 0, 0, 0, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      "name": "overworld",
+            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],
-      "spacing": 0,
+         "height":20,
-      "tilecount": 1440,
+         "id":2,
-      "tileheight": 16,
+         "name":"Tile Layer 2",
-      "tilewidth": 16
+         "opacity":1,
-    }
+         "type":"tilelayer",
-  ],
+         "visible":true,
-  "tilewidth": 16,
+         "width":30,
-  "type": "map",
+         "x":0,
-  "version": "1.10",
+         "y":0
-  "width": 20
+        }],
-}
+ "nextlayerid":3,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.11.0",
+ "tileheight":16,
+ "tilesets":[
+        {
+         "firstgid":1,
+         "source":"overworld.tsx"
+        }],
+ "tilewidth":16,
+ "type":"map",
+ "version":"1.10",
+ "width":30
+}

resources/overworld.tmx

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.11.0" orientation="orthogonal" renderorder="right-down" width="20" height="15" tilewidth="16" tileheight="16" infinite="0" nextlayerid="2" nextobjectid="1">
- <editorsettings>
-  <export target="ocean.tmj" format="json"/>
- </editorsettings>
- <tileset firstgid="1" name="overworld" tilewidth="16" tileheight="16" tilecount="1440" columns="40">
-  <image source="overworld.png" width="640" height="576"/>
- </tileset>
- <layer id="1" name="Tile Layer 1" width="20" height="15">
-  <data encoding="csv">
-259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,259,
-299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,299,
-339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,339,
-379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,379,
-284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,
-284,284,284,284,284,284,284,284,284,284,125,284,284,284,284,284,284,284,284,284,
-284,125,284,284,284,284,284,125,284,284,284,284,284,284,284,125,284,284,284,284,
-284,284,284,284,284,124,284,284,284,165,284,284,284,284,284,284,284,284,284,284,
-284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,166,284,284,
-284,284,125,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,
-284,284,284,284,284,284,284,284,284,284,125,284,284,284,284,284,284,284,284,284,
-284,284,284,125,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,284,
-284,284,284,284,284,284,125,284,284,284,284,284,284,284,125,284,284,284,284,284,
-284,284,284,284,284,284,284,284,284,284,284,125,284,284,284,284,284,284,125,284,
-284,284,284,284,284,125,284,284,284,284,284,284,284,284,284,284,284,284,284,284
-</data>
- </layer>
-</map>