Merge pull request #47 from moufmouf/autoload_tiles

Autoload tiles

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');
+        let mapUrl = 'maps/map2.json';
-        this.load.tilemapTiledJSON(Textures.Map, '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',

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;
+}