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..db5b912c 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -1,9 +1,13 @@ +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 48acf4a2..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 {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){ @@ -97,13 +103,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 + }); + } }); } @@ -127,7 +134,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, this.startX, this.startY, - this.Camera, ); this.CurrentPlayer.initAnimation(); @@ -142,6 +148,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); } }); @@ -210,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) { 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']) ] };