Adding automatic loading of layers

This commit is contained in:
David Négrier 2020-04-15 23:10:12 +02:00
parent 5f118c2a4a
commit 8ddd4656e6
4 changed files with 48 additions and 18 deletions

View File

@ -32,6 +32,17 @@ Note: on some OSes, you will need to add this line to your `/etc/hosts` file:
workadventure.localhost 127.0.0.1 workadventure.localhost 127.0.0.1
``` ```
## Designing a map
If you want to design your own map, you can use [Tiled](https://www.mapeditor.org/).
A few things to notice:
- your map can have as many layers as your want
- your map MUST contain a layer named "floorLayer" of type "objectgroup" that represents the layer on which characters will be drawn.
![](doc/images/tiled_screenshot_1.png)
### MacOS developers, your environment with Vagrant ### MacOS developers, your environment with Vagrant
If you are using MacOS, you can increase Docker performance using Vagrant. If you want more explanations, you can read [this medium article](https://medium.com/better-programming/vagrant-to-increase-docker-performance-with-macos-25b354b0c65c). If you are using MacOS, you can increase Docker performance using Vagrant. If you want more explanations, you can read [this medium article](https://medium.com/better-programming/vagrant-to-increase-docker-performance-with-macos-25b354b0c65c).
@ -98,4 +109,4 @@ Vagrant destroy
* `Vagrant destroy`: delete your VM Vagrant. * `Vagrant destroy`: delete your VM Vagrant.
## Features developed ## Features developed
You have more details of features developed in back [README.md](./back/README.md). You have more details of features developed in back [README.md](./back/README.md).

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,7 @@ import {MessageUserPositionInterface} from "../../Connexion";
import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player";
import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable"; import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import Tile = Phaser.Tilemaps.Tile; import Tile = Phaser.Tilemaps.Tile;
import {ITiledMap} from "../Map/ITiledMap"; import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
export enum Textures { export enum Textures {
Rock = 'rock', Rock = 'rock',
@ -26,7 +26,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
Map: Phaser.Tilemaps.Tilemap; Map: Phaser.Tilemaps.Tilemap;
Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>; Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>; Objects : Array<Phaser.Physics.Arcade.Sprite>;
tilesetKeys : Array<string>; map: ITiledMap;
startX = (window.innerWidth / 2) / RESOLUTION; startX = (window.innerWidth / 2) / RESOLUTION;
startY = (window.innerHeight / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION;
@ -37,7 +37,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
}); });
this.RoomId = RoomId; this.RoomId = RoomId;
this.GameManager = GameManager; this.GameManager = GameManager;
this.tilesetKeys = [];
this.Terrains = []; this.Terrains = [];
} }
@ -47,11 +46,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
this.load.on('filecomplete-tilemapJSON-'+Textures.Map, (key: string, type: string, data: any) => { this.load.on('filecomplete-tilemapJSON-'+Textures.Map, (key: string, type: string, data: any) => {
// Triggered when the map is loaded // Triggered when the map is loaded
// Load tiles attached to the map recursively // Load tiles attached to the map recursively
let map: ITiledMap = data.data; this.map = data.data;
map.tilesets.forEach((tileset) => { this.map.tilesets.forEach((tileset) => {
let path = mapUrl.substr(0, mapUrl.lastIndexOf('/')); let path = mapUrl.substr(0, mapUrl.lastIndexOf('/'));
this.load.image(tileset.name, path + '/' + tileset.image); this.load.image(tileset.name, path + '/' + tileset.image);
this.tilesetKeys.push(tileset.name);
}) })
}); });
this.load.tilemapTiledJSON(Textures.Map, mapUrl); this.load.tilemapTiledJSON(Textures.Map, mapUrl);
@ -70,8 +68,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//initalise map //initalise map
this.Map = this.add.tilemap("map"); this.Map = this.add.tilemap("map");
this.tilesetKeys.forEach((key: string) => { this.map.tilesets.forEach((tileset: ITiledTileSet) => {
this.Terrains.push(this.Map.addTilesetImage(key, key)); this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.name));
}); });
//permit to set bound collision //permit to set bound collision
@ -79,8 +77,18 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//add layer on map //add layer on map
this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>(); this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
this.addLayer( this.Map.createStaticLayer("Calque 1", this.Terrains, 0, 0).setDepth(-2) ); let depth = -2;
this.addLayer( this.Map.createStaticLayer("Calque 2", this.Terrains, 0, 0).setDepth(-1) ); this.map.layers.forEach((layer) => {
if (layer.type === 'tilelayer') {
this.addLayer( this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth) );
} else if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
depth = -1;
}
});
if (depth === -2) {
throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.');
}
//add entities //add entities
this.Objects = new Array<Phaser.Physics.Arcade.Sprite>(); this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();