diff --git a/index.js b/index.js index 0e0a732..756299c 100644 --- a/index.js +++ b/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]; diff --git a/modules/game-objects/map.js b/modules/game-objects/map.js index 6bf6eff..70f0933 100644 --- a/modules/game-objects/map.js +++ b/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"); - this.levelConfig = await levelConfig.json(); - const layer = this.levelConfig.layers[0]; + const response = await fetch(`/resources/${this.name}.json`, { + cache: "force-cache", + }); + this.levelConfig = await response.json(); + const layer = this.levelConfig.layers[this.layer]; const { data, height, width } = layer; this.width = width; this.height = height; diff --git a/resources/overworld.json b/resources/overworld.json index d5f5a5f..10984dd 100644 --- a/resources/overworld.json +++ b/resources/overworld.json @@ -1,67 +1,82 @@ -{ - "compressionlevel": -1, - "height": 15, - "infinite": false, - "layers": [ - { - "data": [ - 1, 366, 366, 366, 366, 366, 366, 366, 366, 366, 1, 1179, 445, 446, 446, - 446, 690, 259, 260, 261, 1, 406, 406, 406, 406, 406, 406, 406, 406, 406, - 1, 1179, 485, 486, 486, 486, 730, 299, 300, 301, 121, 122, 122, 122, - 122, 122, 122, 122, 123, 1, 1, 1179, 525, 526, 526, 526, 770, 339, 340, - 341, 161, 162, 162, 162, 162, 162, 162, 162, 163, 1, 1, 1219, 565, 566, - 567, 567, 810, 379, 379, 379, 201, 202, 202, 202, 202, 202, 202, 202, - 203, 243, 244, 245, 366, 366, 366, 366, 850, 284, 284, 284, 243, 244, - 244, 244, 244, 244, 244, 244, 245, 283, 284, 285, 406, 366, 366, 366, - 366, 324, 324, 324, 283, 284, 284, 284, 284, 284, 284, 284, 285, 323, - 324, 325, 366, 366, 366, 366, 366, 366, 366, 366, 283, 363, 364, 363, - 364, 363, 364, 284, 285, 366, 1175, 1176, 1177, 366, 1175, 1176, 1177, - 366, 366, 366, 283, 403, 404, 403, 404, 403, 404, 284, 285, 406, 1215, - 1216, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 363, 364, 284, - 284, 363, 364, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, - 366, 406, 406, 283, 403, 404, 284, 284, 403, 404, 284, 285, 366, 366, - 366, 366, 366, 366, 366, 366, 366, 366, 366, 283, 284, 284, 363, 364, - 284, 284, 284, 285, 366, 1175, 1176, 1177, 406, 1175, 1176, 1177, 406, - 406, 406, 283, 284, 284, 403, 404, 284, 284, 284, 285, 406, 1215, 1216, - 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 284, 284, 284, 284, - 284, 284, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, 366, - 366, 366, 323, 324, 324, 324, 324, 324, 324, 324, 325, 406, 406, 406, - 406, 406, 406, 406, 406, 406, 406, 406 - ], - "height": 15, - "id": 1, - "name": "Tile Layer 1", - "opacity": 1, - "type": "tilelayer", - "visible": true, - "width": 20, - "x": 0, - "y": 0 - } - ], - "nextlayerid": 2, - "nextobjectid": 1, - "orientation": "orthogonal", - "renderorder": "right-down", - "tiledversion": "1.11.0", - "tileheight": 16, - "tilesets": [ - { - "columns": 40, - "firstgid": 1, - "image": "overworld.png", - "imageheight": 576, - "imagewidth": 640, - "margin": 0, - "name": "overworld", - "spacing": 0, - "tilecount": 1440, - "tileheight": 16, - "tilewidth": 16 - } - ], - "tilewidth": 16, - "type": "map", - "version": "1.10", - "width": 20 -} +{ "compressionlevel":-1, + "height":20, + "infinite":false, + "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, + 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, 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, 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, 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, + 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, + 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, 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, 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, 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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], + "height":20, + "id":1, + "name":"Tile Layer 1", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }, + { + "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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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, + 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], + "height":20, + "id":2, + "name":"Tile Layer 2", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }], + "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 +} \ No newline at end of file diff --git a/resources/overworld.tmx b/resources/overworld.tmx deleted file mode 100644 index 909fc88..0000000 --- a/resources/overworld.tmx +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - -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 - - -