From 33c58874e03fbdfc0e8d6b9d544db9cae788abaf Mon Sep 17 00:00:00 2001 From: kharhamel Date: Mon, 13 Apr 2020 19:40:10 +0200 Subject: [PATCH 1/3] create an env variable for debug mode --- .env.template | 1 + .gitignore | 1 + docker-compose.yaml | 1 + front/src/Enum/EnvironmentVariable.ts | 2 ++ front/src/Phaser/Game/GameScene.ts | 18 ++++++++++-------- front/src/index.ts | 4 ++-- front/webpack.config.js | 2 +- 7 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 .env.template diff --git a/.env.template b/.env.template new file mode 100644 index 00000000..81044e99 --- /dev/null +++ b/.env.template @@ -0,0 +1 @@ +DEBUG_MODE=false \ No newline at end of file diff --git a/.gitignore b/.gitignore index a806c47e..bc00a82a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.env .idea .vagrant Vagrantfile \ No newline at end of file diff --git a/docker-compose.yaml b/docker-compose.yaml index a23a5204..03842238 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -13,6 +13,7 @@ services: front: image: thecodingmachine/nodejs:12 environment: + DEBUG_MODE: "$DEBUG_MODE" HOST: "0.0.0.0" NODE_ENV: development API_URL: http://api.workadventure.localhost diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 3cf52b85..b4dd4f26 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -1,8 +1,10 @@ +const DEBUG_MODE: boolean = !!process.env.DEBUG_MODE || false; const API_URL = process.env.API_URL || "http://api.workadventure.localhost"; const ROOM = [process.env.ROOM || "THECODINGMACHINE"]; const RESOLUTION = 2; export { + DEBUG_MODE, API_URL, RESOLUTION, ROOM diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 48acf4a2..88514a6e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -2,7 +2,7 @@ import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager"; import {MessageUserPositionInterface} from "../../Connexion"; import {CameraManager, CameraManagerInterface} from "./CameraManager"; import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; -import {RESOLUTION} from "../../Enum/EnvironmentVariable"; +import {DEBUG_MODE, RESOLUTION} from "../../Enum/EnvironmentVariable"; import Tile = Phaser.Tilemaps.Tile; export enum Textures { @@ -97,13 +97,14 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) }); Layer.setCollisionByProperty({collides: true}); - //debug code - //debug code to see the collision hitbox of the object in the top layer - /*Layer.renderDebug(this.add.graphics(), { - tileColor: null, //non-colliding tiles - collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles, - faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges - });*/ + if (DEBUG_MODE) { + //debug code to see the collision hitbox of the object in the top layer + Layer.renderDebug(this.add.graphics(), { + tileColor: null, //non-colliding tiles + collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles, + faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges + }); + } }); } @@ -142,6 +143,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //pixel position toz tile position let tile = this.Map.getTileAt(this.Map.worldToTileX(pointer.worldX), this.Map.worldToTileY(pointer.worldY)); if(tile){ + console.log(tile) this.CurrentPlayer.say("Your touch " + tile.layer.name); } }); diff --git a/front/src/index.ts b/front/src/index.ts index 5d90a19e..f3dfb22f 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -1,7 +1,7 @@ import 'phaser'; import GameConfig = Phaser.Types.Core.GameConfig; import {GameManager} from "./Phaser/Game/GameManager"; -import {RESOLUTION} from "./Enum/EnvironmentVariable"; +import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable"; let gameManager = new GameManager(); @@ -15,7 +15,7 @@ const config: GameConfig = { physics: { default: "arcade", arcade: { - debug: true + debug: DEBUG_MODE } } }; diff --git a/front/webpack.config.js b/front/webpack.config.js index 21431e4c..ff164804 100644 --- a/front/webpack.config.js +++ b/front/webpack.config.js @@ -29,6 +29,6 @@ module.exports = { new webpack.ProvidePlugin({ Phaser: 'phaser' }), - new webpack.EnvironmentPlugin(['API_URL']) + new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE']) ] }; From 1774594e76ac779b52d6d2d117d2f3db699f579f Mon Sep 17 00:00:00 2001 From: kharhamel Date: Mon, 13 Apr 2020 19:56:41 +0200 Subject: [PATCH 2/3] deleted cameraManager, use camera follow code instead --- front/src/Enum/EnvironmentVariable.ts | 2 ++ front/src/Phaser/Game/CameraManager.ts | 49 -------------------------- front/src/Phaser/Game/GameScene.ts | 20 ++++++----- front/src/Phaser/Player/Player.ts | 7 ---- 4 files changed, 14 insertions(+), 64 deletions(-) delete mode 100644 front/src/Phaser/Game/CameraManager.ts diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index b4dd4f26..db5b912c 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -2,10 +2,12 @@ const DEBUG_MODE: boolean = !!process.env.DEBUG_MODE || false; const API_URL = process.env.API_URL || "http://api.workadventure.localhost"; const ROOM = [process.env.ROOM || "THECODINGMACHINE"]; const RESOLUTION = 2; +const ZOOM_LEVEL = 3/4; export { DEBUG_MODE, API_URL, RESOLUTION, + ZOOM_LEVEL, ROOM } \ No newline at end of file diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts deleted file mode 100644 index 3b2dc06b..00000000 --- a/front/src/Phaser/Game/CameraManager.ts +++ /dev/null @@ -1,49 +0,0 @@ -import {RESOLUTION} from "../../Enum/EnvironmentVariable"; -import {Player} from "../Player/Player"; -import {GameSceneInterface} from "./GameScene"; - -export interface CameraManagerInterface { - moveCamera(CurrentPlayer : Player) : void; -} - -export class CameraManager implements CameraManagerInterface{ - Scene : GameSceneInterface; - Camera : Phaser.Cameras.Scene2D.Camera; - - constructor( - Scene: GameSceneInterface, - Camera : Phaser.Cameras.Scene2D.Camera, - ) { - this.Scene = Scene; - this.Camera = Camera; - } - - moveCamera(CurrentPlayer : Player): void { - //center of camera - let startX = ((window.innerWidth / 2) / RESOLUTION); - let startY = ((window.innerHeight / 2) / RESOLUTION); - - let limit = { - top: startY, - left: startX, - bottom : this.Scene.Map.heightInPixels - startY, - right: this.Scene.Map.widthInPixels - startX, - }; - - if(CurrentPlayer.x < limit.left){ - this.Camera.scrollX = 0; - }else if(CurrentPlayer.x > limit.right){ - this.Camera.scrollX = (limit.right - startX); - }else { - this.Camera.scrollX = (CurrentPlayer.x - startX); - } - - if(CurrentPlayer.y < limit.top){ - this.Camera.scrollY = 0; - }else if(CurrentPlayer.y > limit.bottom){ - this.Camera.scrollY = (limit.bottom - startY); - }else { - this.Camera.scrollY = (CurrentPlayer.y - startY); - } - } -} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 88514a6e..582312dc 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,8 +1,7 @@ import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager"; import {MessageUserPositionInterface} from "../../Connexion"; -import {CameraManager, CameraManagerInterface} from "./CameraManager"; import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; -import {DEBUG_MODE, RESOLUTION} from "../../Enum/EnvironmentVariable"; +import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable"; import Tile = Phaser.Tilemaps.Tile; export enum Textures { @@ -22,7 +21,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ GameManager : GameManagerInterface; RoomId : string; Terrain : Phaser.Tilemaps.Tileset; - Camera: CameraManagerInterface; CurrentPlayer: CurrentGamerInterface; MapPlayers : Phaser.Physics.Arcade.Group; Map: Phaser.Tilemaps.Tilemap; @@ -76,14 +74,22 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //init event click this.EventToClickOnTile(); - //initialise camera - this.Camera = new CameraManager(this, this.cameras.main); - //initialise list of other player this.MapPlayers = this.physics.add.group({ immovable: true }); //notify game manager can to create currentUser in map this.GameManager.createCurrentPlayer(); + + + //initialise camera + this.initCamera(); + } + + //todo: in a dedicated class/function? + initCamera() { + this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels); + this.cameras.main.startFollow(this.CurrentPlayer); + this.cameras.main.setZoom(ZOOM_LEVEL); } addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ @@ -128,7 +134,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, this.startX, this.startY, - this.Camera, ); this.CurrentPlayer.initAnimation(); @@ -212,7 +217,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, MessageUserPosition.position.x, MessageUserPosition.position.y, - this.Camera, ); player.initAnimation(); this.MapPlayers.add(player); diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index e2d7d692..4cd1a6aa 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -1,7 +1,6 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation"; import {GameSceneInterface, Textures} from "../Game/GameScene"; import {ConnexionInstance} from "../Game/GameManager"; -import {CameraManagerInterface} from "../Game/CameraManager"; import {MessageUserPositionInterface} from "../../Connexion"; import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; import {PlayableCaracter} from "../Entity/PlayableCaracter"; @@ -9,7 +8,6 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter"; export interface CurrentGamerInterface extends PlayableCaracter{ userId : string; PlayerValue : string; - CameraManager: CameraManagerInterface; initAnimation() : void; moveUser() : void; say(text : string) : void; @@ -18,7 +16,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{ export interface GamerInterface extends PlayableCaracter{ userId : string; PlayerValue : string; - CameraManager: CameraManagerInterface; initAnimation() : void; updatePosition(MessageUserPosition : MessageUserPositionInterface) : void; say(text : string) : void; @@ -27,7 +24,6 @@ export interface GamerInterface extends PlayableCaracter{ export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface { userId: string; PlayerValue: string; - CameraManager: CameraManagerInterface; userInputManager: UserInputManager; constructor( @@ -35,7 +31,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G Scene: GameSceneInterface, x: number, y: number, - CameraManager: CameraManagerInterface, PlayerValue: string = Textures.Player ) { super(Scene, x, y, PlayerValue, 1); @@ -46,7 +41,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G //set data this.userId = userId; this.PlayerValue = PlayerValue; - this.CameraManager = CameraManager; //the current player model should be push away by other players to prevent conflict this.setImmovable(false); @@ -96,7 +90,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G this.stop(); } this.sharePosition(direction); - this.CameraManager.moveCamera(this); } private sharePosition(direction: string) { From 482a344f459fe64d95ddb5f95cf834503ba30ad3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 15 Apr 2020 19:23:06 +0200 Subject: [PATCH 3/3] 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). --- front/src/Phaser/Game/GameScene.ts | 14 +++- front/src/Phaser/Map/ITiledMap.ts | 113 +++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 front/src/Phaser/Map/ITiledMap.ts 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; +}