feat(#10): allow multiple layers
This commit is contained in:
parent
1cac9b90bc
commit
e2c439d1f3
4 changed files with 112 additions and 101 deletions
18
index.js
18
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];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue