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).
This commit is contained in:
David Négrier 2020-04-15 19:23:06 +02:00
parent 705617abe7
commit 482a344f45
2 changed files with 125 additions and 2 deletions

View File

@ -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',

View File

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