Autoload tiles

This commit adds a listener in the preload function that will be triggered as soon as the map is loaded.
This function will load the resources from the map (tilesets) defined in the map.
That way, we don't have to define manually the list of tiles that have to be loaded (at the expense of a slight delay in loading since we must wait for the map to be loaded to start loading the tiles).

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 582312dcf96d4359b8caa4f898124bfc9360535c..a089842b79681e5d8e5b94ac92bb99c0da78af6d 100644 (file)
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -3,6 +3,7 @@ import {MessageUserPositionInterface} from "../../Connexion";
 import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player";
 import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import Tile = Phaser.Tilemaps.Tile;
+import {ITiledMap} from "../Map/ITiledMap";
 
 export enum Textures {
     Rock = 'rock',
@@ -39,8 +40,17 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
     //hook preload scene
     preload(): void {
-        this.load.image(Textures.Tiles, 'maps/tiles.png');
-        this.load.tilemapTiledJSON(Textures.Map, 'maps/map2.json');
+        let mapUrl = 'maps/map2.json';
+        this.load.on('filecomplete-tilemapJSON-'+Textures.Map, (key: string, type: string, data: any) => {
+            // Triggered when the map is loaded
+            // Load tiles attached to the map recursively
+            let map: ITiledMap = data.data;
+            map.tilesets.forEach((tileset) => {
+                let path = mapUrl.substr(0, mapUrl.lastIndexOf('/'));
+                this.load.image(tileset.name, path + '/' + tileset.image);
+            })
+        });
+        this.load.tilemapTiledJSON(Textures.Map, mapUrl);
         this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
         this.load.spritesheet(Textures.Player,
             'resources/characters/pipoya/Male 01-1.png',

diff --git a/front/src/Phaser/Map/ITiledMap.ts b/front/src/Phaser/Map/ITiledMap.ts
new file mode 100644 (file)
index 0000000..ca10f21
--- /dev/null
+++ b/front/src/Phaser/Map/ITiledMap.ts
@@ -0,0 +1,113 @@
+/**
+ * Tiled Map Interface
+ *
+ * Represents the interface for the Tiled exported data structure (JSON). Used
+ * when loading resources via Resource loader.
+ */
+export interface ITiledMap {
+    width: number;
+    height: number;
+    layers: ITiledMapLayer[];
+    nextobjectid: number;
+
+    /**
+     * Map orientation (orthogonal)
+     */
+    orientation: string;
+    properties: {[key: string]: string};
+
+    /**
+     * Render order (right-down)
+     */
+    renderorder: string;
+    tileheight: number;
+    tilewidth: number;
+    tilesets: ITiledTileSet[];
+    version: number;
+}
+
+export interface ITiledMapLayer {
+    data: number[]|string;
+    height: number;
+    name: string;
+    opacity: number;
+    properties: {[key: string]: string};
+    encoding: string;
+    compression?: string;
+
+    /**
+     * Type of layer (tilelayer, objectgroup)
+     */
+    type: string;
+    visible: boolean;
+    width: number;
+    x: number;
+    y: number;
+
+    /**
+     * Draw order (topdown (default), index)
+     */
+    draworder: string;
+    objects: ITiledMapObject[];
+}
+
+export interface ITiledMapObject {
+    id: number;
+
+    /**
+     * Tile object id
+     */
+    gid: number;
+    height: number;
+    name: string;
+    properties: {[key: string]: string};
+    rotation: number;
+    type: string;
+    visible: boolean;
+    width: number;
+    x: number;
+    y: number;
+
+    /**
+     * Whether or not object is an ellipse
+     */
+    ellipse: boolean;
+
+    /**
+     * Polygon points
+     */
+    polygon: {x: number, y: number}[];
+
+    /**
+     * Polyline points
+     */
+    polyline: {x: number, y: number}[];
+}
+
+export interface ITiledTileSet {
+    firstgid: number;
+    image: string;
+
+    imageheight: number;
+    imagewidth: number;
+    margin: number;
+    name: string;
+    properties: {[key: string]: string};
+    spacing: number;
+    tilecount: number;
+    tileheight: number;
+    tilewidth: number;
+    transparentcolor: string;
+    terrains: ITiledMapTerrain[];
+    tiles: {[key: string]: { terrain: number[] }};
+
+    /**
+     * Refers to external tileset file (should be JSON)
+     */
+    source: string;
+}
+
+export interface ITiledMapTerrain {
+    name: string;
+    tile: number;
+}