Backporting master changes

This commit is contained in:
David Négrier 2020-04-15 23:57:36 +02:00
commit 9175682f32
5 changed files with 174 additions and 16 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
```
## 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
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).

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

View File

@ -3,13 +3,13 @@ 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, ITiledTileSet} from "../Map/ITiledMap";
import {cypressAsserter} from "../../Cypress/CypressAsserter";
export enum Textures {
Rock = 'rock',
Player = 'playerModel',
Map = 'map',
Tiles = 'tiles'
Map = 'map'
}
export interface GameSceneInterface extends Phaser.Scene {
@ -21,28 +21,40 @@ export interface GameSceneInterface extends Phaser.Scene {
export class GameScene extends Phaser.Scene implements GameSceneInterface{
GameManager : GameManagerInterface;
RoomId : string;
Terrain : Phaser.Tilemaps.Tileset;
Terrains : Array<Phaser.Tilemaps.Tileset>;
CurrentPlayer: CurrentGamerInterface;
MapPlayers : Phaser.Physics.Arcade.Group;
Map: Phaser.Tilemaps.Tilemap;
Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>;
map: ITiledMap;
startX = (window.innerWidth / 2) / RESOLUTION;
startY = (window.innerHeight / 2) / RESOLUTION;
constructor(RoomId : string, GameManager : GameManagerInterface) {
super({
key: "GameScene"
});
this.RoomId = RoomId;
this.GameManager = GameManager;
this.Terrains = [];
}
//hook preload scene
preload(): void {
cypressAsserter.preloadStarted();
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
this.map = data.data;
this.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',
@ -60,16 +72,27 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//initalise map
this.Map = this.add.tilemap("map");
this.Terrain = this.Map.addTilesetImage("tiles", "tiles");
this.Map.createStaticLayer("tiles", "tiles");
this.map.tilesets.forEach((tileset: ITiledTileSet) => {
this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.name));
});
//permit to set bound collision
this.physics.world.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
//add layer on map
this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
this.addLayer( this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0).setDepth(-2) );
this.addLayer( this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0).setDepth(-1) );
let depth = -2;
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
this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();

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