diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 582312dc..a089842b 100644 --- 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 index 00000000..ca10f218 --- /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; +}