Feature: Add tile map layer support with support of the z-index property

src/tiled-entity.ts

@@ -1,13 +1,22 @@
 import { TiledProperty } from "./tiled-types";
 
+/**
+ * Get tile entry property by property name
+ * @param properties 
+ * @param prop 
+ * @returns 
+ */
+export const getProperty = <T = unknown>(properties: TiledProperty[], prop: string): TiledProperty<T> | undefined => {
+   if (Array.isArray(properties)) {
+      return properties?.filter(p => p.name?.toLocaleLowerCase() === prop.toLocaleLowerCase())[0] as TiledProperty<T>;
+   }
+}
 
 export class TiledEntity {
    public id!: number;
    public name?: string;
    public properties: TiledProperty[] = [];
    public getProperty<T = unknown>(prop: string): TiledProperty<T> | undefined {
-      if (Array.isArray(this.properties)) {
-         return this.properties?.filter(p => p.name?.toLocaleLowerCase() === prop.toLocaleLowerCase())[0] as TiledProperty<T>;
-      }
+      return getProperty<T>(this.properties, prop);
    }
 }

src/tiled-layer.ts

@@ -1,4 +1,4 @@
-import { TiledCompression, TiledEncoding } from "./tiled-types";
+import { TiledCompression, TiledEncoding, TiledProperty } from "./tiled-types";
 import { TiledEntity } from "./tiled-entity";
 
 // Most significant byte of 32 bit id contains flags for flipping

src/tiled-map-resource.ts

@@ -25,6 +25,7 @@ import { ExcaliburData, RawTiledMap, RawTiledTileset } from './tiled-types';
 import { TiledMap } from './tiled-map';
 import { parseExternalTsx } from './tiled-tileset';
 import { getCanonicalGid, isFlippedDiagonally, isFlippedHorizontally, isFlippedVertically } from './tiled-layer';
+import { getProperty } from './tiled-entity';
 
 export enum TiledMapFormat {
 
@@ -47,7 +48,7 @@ export class TiledMapResource implements Loadable<TiledMap> {
    public ex: ExcaliburData;
    public imageMap: Record<string, ImageSource>;
    public sheetMap: Record<string, SpriteSheet>;
-   public map?: TileMap;
+   public layers?: TileMap[] = [];
 
    /**
     * Given an origin file path, converts a file relative to that origin to a full path accessible from excalibur
@@ -191,11 +192,13 @@ export class TiledMapResource implements Loadable<TiledMap> {
     * cells solid.
     */
    public useSolidLayers() {
-      const tm = this.getTileMap();
+      const tms = this.getTileMapLayers();
       const solidLayers = this.data?.getTileLayersByProperty('solid', true) ?? [];
       for (const solid of solidLayers) {
-         for(let i = 0; i < solid.data.length; i++) {
-            tm.data[i].solid ||= !!solid.data[i];
+         for (const tm of tms) {
+            for(let i = 0; i < solid.data.length; i++) {
+               tm.data[i].solid ||= !!solid.data[i];
+            }
          }
       }
    }
@@ -205,10 +208,11 @@ export class TiledMapResource implements Loadable<TiledMap> {
     * @param scene 
     */
    public addTiledMapToScene(scene: Scene) {
-      const tm = this.getTileMap();
-      const tx = tm.get(TransformComponent);
-      tx!.z = -1;
-      scene.add(tm);
+      const tms = this.getTileMapLayers();
+      for (const tm of tms) {
+         const tx = tm.get(TransformComponent);
+         scene.add(tm);
+      }
 
       this._parseExcaliburInfo();
       this._addTiledCamera(scene);
@@ -402,8 +406,6 @@ export class TiledMapResource implements Loadable<TiledMap> {
     * Creates the Excalibur tile map representation
     */
    private _createTileMap() {
-      const map = new TileMap(0, 0, this.data.rawMap.tilewidth, this.data.rawMap.tileheight, this.data.height, this.data.width);
-
       // register sprite sheets for each tileset in map
       for (const tileset of this.data.rawMap.tilesets) {
          const cols = Math.floor(tileset.imagewidth / tileset.tilewidth);
@@ -421,28 +423,30 @@ export class TiledMapResource implements Loadable<TiledMap> {
       }
 
       // Create Excalibur sprites for each cell
-      for (var layer of this.data.rawMap.layers) {
-         if (layer.type === "tilelayer") {
-            for (var i = 0; i < layer.data.length; i++) {
-               let gid = <number>layer.data[i];
-
+      for (var rawLayer of this.data.rawMap.layers) {
+         if (rawLayer.type === "tilelayer") {
+            const layer = new TileMap(0, 0, this.data.rawMap.tilewidth, this.data.rawMap.tileheight, this.data.height, this.data.width);
+            const zindex = getProperty<number>(rawLayer.properties, 'zindex')?.value || -1;
+            layer.z = zindex;
+            for (var i = 0; i < rawLayer.data.length; i++) {
+               let gid = <number>rawLayer.data[i];
                if (gid !== 0) {
                   const sprite = this.getSpriteForGid(gid)
-                  map.data[i].addGraphic(sprite);
+                  layer.data[i].addGraphic(sprite);
                }
             }
+            this.layers?.push(layer);
          }
       }
-      this.map = map;
    }
 
    /**
-    * Return the TileMap for the parsed Tiled map
+    * Return the TileMap layers for the parsed Tiled map
     */
-   public getTileMap(): TileMap {
-      if (this.map) {
-         return this.map;
+   public getTileMapLayers(): TileMap[] {
+      if (this.layers?.length) {
+         return this.layers;
       }
-      throw new Error('Error loading tile map');
+      throw new Error('Error loading tile map layers');
    }
 }

src/tiled-types.ts

@@ -1,3 +1,7 @@
+import {
+   CollisionType
+} from 'excalibur';
+
 /**
  * Tiled Map Interface
  *
@@ -91,7 +95,7 @@ export interface ExcaliburCamera {
 
 export interface ExcaliburCollider {
    type: 'box' | 'circle';
-   collisionType: ex.CollisionType;
+   collisionType: CollisionType;
    color: TiledProperty<string> | undefined;
    zIndex: number;
    x: number;