From 2afe6b4b6e78d87fc91b644d26acf4f95c67b6aa Mon Sep 17 00:00:00 2001 From: gparant Date: Mon, 13 Apr 2020 15:34:09 +0200 Subject: [PATCH] Fix feadback @Kharhamel --- front/src/Phaser/Game/CameraManager.ts | 14 +- front/src/Phaser/Game/GameScene.ts | 183 ++++++++++++++++++++--- front/src/Phaser/Game/MapManager.ts | 196 ------------------------- front/src/Phaser/Player/Player.ts | 63 ++------ 4 files changed, 183 insertions(+), 273 deletions(-) delete mode 100644 front/src/Phaser/Game/MapManager.ts diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts index a52554e5..3b2dc06b 100644 --- a/front/src/Phaser/Game/CameraManager.ts +++ b/front/src/Phaser/Game/CameraManager.ts @@ -1,24 +1,20 @@ import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {Player} from "../Player/Player"; -import {MapManagerInterface} from "./MapManager"; +import {GameSceneInterface} from "./GameScene"; export interface CameraManagerInterface { - MapManager : MapManagerInterface; moveCamera(CurrentPlayer : Player) : void; } export class CameraManager implements CameraManagerInterface{ - Scene : Phaser.Scene; + Scene : GameSceneInterface; Camera : Phaser.Cameras.Scene2D.Camera; - MapManager : MapManagerInterface; constructor( - Scene: Phaser.Scene, + Scene: GameSceneInterface, Camera : Phaser.Cameras.Scene2D.Camera, - MapManager: MapManagerInterface, ) { this.Scene = Scene; - this.MapManager = MapManager; this.Camera = Camera; } @@ -30,8 +26,8 @@ export class CameraManager implements CameraManagerInterface{ let limit = { top: startY, left: startX, - bottom : this.MapManager.Map.heightInPixels - startY, - right: this.MapManager.Map.widthInPixels - startX, + bottom : this.Scene.Map.heightInPixels - startY, + right: this.Scene.Map.widthInPixels - startX, }; if(CurrentPlayer.x < limit.left){ diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index a9a08fc6..69b5a712 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,6 +1,9 @@ -import {MapManagerInterface, MapManager} from "./MapManager"; 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 Tile = Phaser.Tilemaps.Tile; export enum Textures { Rock = 'rock', @@ -11,13 +14,22 @@ export enum Textures { export interface GameSceneInterface extends Phaser.Scene { RoomId : string; + Map: Phaser.Tilemaps.Tilemap; createCurrentPlayer(UserId : string) : void; shareUserPosition(UsersPosition : Array): void; } export class GameScene extends Phaser.Scene implements GameSceneInterface{ - private MapManager : MapManagerInterface; GameManager : GameManagerInterface; RoomId : string; + Terrain : Phaser.Tilemaps.Tileset; + Camera: CameraManagerInterface; + CurrentPlayer: CurrentGamerInterface; + MapPlayers : Phaser.Physics.Arcade.Group; + Map: Phaser.Tilemaps.Tilemap; + Layers : Array; + Objects : Array; + startX = (window.innerWidth / 2) / RESOLUTION; + startY = (window.innerHeight / 2) / RESOLUTION; constructor(RoomId : string, GameManager : GameManagerInterface) { super({ @@ -43,26 +55,100 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //hook create scene create(): void { - //create map manager - this.MapManager = new MapManager(this); + + //initalise map + this.Map = this.add.tilemap("map"); + this.Terrain = this.Map.addTilesetImage("tiles", "tiles"); + this.Map.createStaticLayer("tiles", "tiles"); + + //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(); + 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) ); + + //add entities + this.Objects = new Array(); + this.addSpite(this.physics.add.sprite(200, 400, Textures.Rock, 26)); + + //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(); } - /** - * Create current player - * @param UserId - */ - createCurrentPlayer(UserId : string): void { - this.MapManager.createCurrentPlayer(UserId) + addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ + this.Layers.push(Layer); } - //hook update - update(dt: number): void { - if(this.GameManager.status === StatusGameManagerEnum.IN_PROGRESS){ - return; - } - this.MapManager.update(); + createCollisionWithPlayer() { + //add collision layer + this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { + this.physics.add.collider(this.CurrentPlayer, Layer, (object1: any, object2: any) => { + 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 + }); + }); + } + + addSpite(Object : Phaser.Physics.Arcade.Sprite){ + Object.setImmovable(true); + this.Objects.push(Object); + } + + createCollisionObject(){ + this.Objects.forEach((Object : Phaser.Physics.Arcade.Sprite) => { + this.physics.add.collider(this.CurrentPlayer, Object, (object1: any, object2: any) => { + this.CurrentPlayer.say("Collision with object : " + (object2 as Phaser.Physics.Arcade.Sprite).texture.key) + }); + }) + } + + createCurrentPlayer(UserId : string){ + //initialise player + this.CurrentPlayer = new Player( + UserId, + this, + this.startX, + this.startY, + this.Camera, + ); + this.CurrentPlayer.initAnimation(); + + //create collision + this.createCollisionWithPlayer(); + this.createCollisionObject(); + } + + EventToClickOnTile(){ + // debug code to get a tile properties by clicking on it + this.input.on("pointerdown", (pointer: Phaser.Input.Pointer)=>{ + //pixel position toz tile position + let tile = this.Map.getTileAt(this.Map.worldToTileX(pointer.worldX), this.Map.worldToTileY(pointer.worldY)); + if(tile){ + this.CurrentPlayer.say("Your touch " + tile.layer.name); + } + }); + } + + update() : void { + this.CurrentPlayer.moveUser(); } /** @@ -70,6 +156,69 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ * @param UsersPosition */ shareUserPosition(UsersPosition : Array): void { - this.MapManager.updateOrCreateMapPlayer(UsersPosition); + this.updateOrCreateMapPlayer(UsersPosition); + } + + /** + * Create new player and clean the player on the map + * @param UsersPosition + */ + updateOrCreateMapPlayer(UsersPosition : Array){ + if(!this.CurrentPlayer){ + return; + } + + //add or create new user + UsersPosition.forEach((userPosition : MessageUserPositionInterface) => { + if(userPosition.userId === this.CurrentPlayer.userId){ + return; + } + let player = this.findPlayerInMap(userPosition.userId); + if(!player){ + this.addPlayer(userPosition); + }else{ + player.updatePosition(userPosition); + } + }); + + //clean map + this.MapPlayers.getChildren().forEach((player: GamerInterface) => { + if(UsersPosition.find((message : MessageUserPositionInterface) => message.userId === player.userId)){ + return; + } + player.destroy(); + this.MapPlayers.remove(player); + }); + } + + private findPlayerInMap(UserId : string) : GamerInterface | null{ + let player = this.MapPlayers.getChildren().find((player: Player) => UserId === player.userId); + if(!player){ + return null; + } + return (player as GamerInterface); + } + + /** + * Create new player + * @param MessageUserPosition + */ + addPlayer(MessageUserPosition : MessageUserPositionInterface){ + //initialise player + let player = new Player( + MessageUserPosition.userId, + this, + MessageUserPosition.position.x, + MessageUserPosition.position.y, + this.Camera, + ); + player.initAnimation(); + this.MapPlayers.add(player); + player.updatePosition(MessageUserPosition); + + //init colision + this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => { + MapPlayer.say("Hello, how are you ? "); + }); } } diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts deleted file mode 100644 index 1ac8d57e..00000000 --- a/front/src/Phaser/Game/MapManager.ts +++ /dev/null @@ -1,196 +0,0 @@ -import {CameraManager, CameraManagerInterface} from "./CameraManager"; -import {RESOLUTION} from "../../Enum/EnvironmentVariable"; -import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; -import {GameSceneInterface, Textures} from "./GameScene"; -import {MessageUserPositionInterface} from "../../Connexion"; -import {NonPlayer} from "../NonPlayer/NonPlayer"; -import GameObject = Phaser.GameObjects.GameObject; -import Tile = Phaser.Tilemaps.Tile; - -export interface MapManagerInterface { - Map: Phaser.Tilemaps.Tilemap; - Terrain: Phaser.Tilemaps.Tileset; - Camera: CameraManagerInterface; - Scene: GameSceneInterface; - - createCurrentPlayer(UserId : string): void; - update(): void; - updateOrCreateMapPlayer(UsersPosition : Array): void; -} -export class MapManager implements MapManagerInterface{ - Terrain : Phaser.Tilemaps.Tileset; - Camera: CameraManagerInterface; - CurrentPlayer: CurrentGamerInterface; - MapPlayers : Phaser.Physics.Arcade.Group; - Scene: GameSceneInterface; - Map: Phaser.Tilemaps.Tilemap; - Layers : Array; - Objects : Array; - startX = (window.innerWidth / 2) / RESOLUTION; - startY = (window.innerHeight / 2) / RESOLUTION; - - constructor(scene: GameSceneInterface){ - this.Scene = scene; - - //initalise map - this.Map = this.Scene.add.tilemap("map"); - this.Terrain = this.Map.addTilesetImage("tiles", "tiles"); - this.Map.createStaticLayer("tiles", "tiles"); - - //permit to set bound collision - this.Scene.physics.world.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels); - - //add layer on map - this.Layers = new Array(); - 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) ); - - //add entities - this.Objects = new Array(); - this.addSpite(this.Scene.physics.add.sprite(200, 400, Textures.Rock, 26)); - - //debug code - //debug code to see the collision hitbox of the object in the top layer - /*this.TopLayer.renderDebug(this.Scene.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 - });*/ - - //init event click - this.EventToClickOnTile(); - - //initialise camera - this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this); - - //initialise list of other player - this.MapPlayers = this.Scene.physics.add.group({ immovable: true }); - } - - addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ - this.Layers.push(Layer); - } - - createCollisionWithPlayer() { - //add collision layer - this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { - this.Scene.physics.add.collider(this.CurrentPlayer, Layer); - Layer.setCollisionByProperty({collides: true}); - //debug code - //debug code to see the collision hitbox of the object in the top layer - Layer.renderDebug(this.Scene.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 - }); - }); - } - - addSpite(Object : Phaser.Physics.Arcade.Sprite){ - Object.setImmovable(true); - this.Objects.push(Object); - } - - createCollisionObject(){ - this.Objects.forEach((Object : Phaser.Physics.Arcade.Sprite) => { - this.Scene.physics.add.collider(this.CurrentPlayer, Object); - }) - } - - createCurrentPlayer(UserId : string){ - //initialise player - this.CurrentPlayer = new Player( - UserId, - this.Scene, - this.startX, - this.startY, - this.Camera, - this - ); - this.CurrentPlayer.initAnimation(); - - //create collision - this.createCollisionWithPlayer(); - this.createCollisionObject(); - } - - EventToClickOnTile(){ - // debug code to get a tile properties by clicking on it - this.Scene.input.on("pointerdown", (pointer: Phaser.Input.Pointer)=>{ - //pixel position toz tile position - let tile = this.Map.getTileAt(this.Map.worldToTileX(pointer.worldX), this.Map.worldToTileY(pointer.worldY)); - if(tile){ - //console.log("MapManager => tile => pointerdown", tile); - this.CurrentPlayer.say("Your touch " + tile.layer.name); - } - }); - } - - update() : void { - this.CurrentPlayer.moveUser(); - } - - /** - * Create new player and clean the player on the map - * @param UsersPosition - */ - updateOrCreateMapPlayer(UsersPosition : Array){ - if(!this.CurrentPlayer){ - return; - } - - //add or create new user - UsersPosition.forEach((userPosition : MessageUserPositionInterface) => { - if(userPosition.userId === this.CurrentPlayer.userId){ - return; - } - let player = this.findPlayerInMap(userPosition.userId); - if(!player){ - this.addPlayer(userPosition); - }else{ - player.updatePosition(userPosition); - } - }); - - //clean map - this.MapPlayers.getChildren().forEach((player: GamerInterface) => { - if(UsersPosition.find((message : MessageUserPositionInterface) => message.userId === player.userId)){ - return; - } - player.destroy(); - this.MapPlayers.remove(player); - }); - } - - private findPlayerInMap(UserId : string) : GamerInterface | null{ - let player = this.MapPlayers.getChildren().find((player: Player) => UserId === player.userId); - if(!player){ - return null; - } - return (player as GamerInterface); - } - - /** - * Create new player - * @param MessageUserPosition - */ - addPlayer(MessageUserPosition : MessageUserPositionInterface){ - //initialise player - let player = new Player( - MessageUserPosition.userId, - this.Scene, - MessageUserPosition.position.x, - MessageUserPosition.position.y, - this.Camera, - this - ); - player.initAnimation(); - this.MapPlayers.add(player); - player.updatePosition(MessageUserPosition); - - //init colision - this.Scene.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => { - MapPlayer.say("Hello, how are you ? "); - }); - } -} \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 78aa5801..d426b3d2 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -5,11 +5,9 @@ import {CameraManagerInterface} from "../Game/CameraManager"; import {MessageUserPositionInterface} from "../../Connexion"; import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; import {PlayableCaracter} from "../Entity/PlayableCaracter"; -import {MapManagerInterface} from "../Game/MapManager"; export interface CurrentGamerInterface extends PlayableCaracter{ userId : string; - MapManager : MapManagerInterface; PlayerValue : string; CameraManager: CameraManagerInterface; initAnimation() : void; @@ -19,7 +17,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{ export interface GamerInterface extends PlayableCaracter{ userId : string; - MapManager : MapManagerInterface; PlayerValue : string; CameraManager: CameraManagerInterface; initAnimation() : void; @@ -27,21 +24,19 @@ export interface GamerInterface extends PlayableCaracter{ say(text : string) : void; } -export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface{ - userId : string; - MapManager : MapManagerInterface; - PlayerValue : string; +export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface { + userId: string; + PlayerValue: string; CameraManager: CameraManagerInterface; userInputManager: UserInputManager; constructor( userId: string, - Scene : GameSceneInterface, - x : number, - y : number, + Scene: GameSceneInterface, + x: number, + y: number, CameraManager: CameraManagerInterface, - MapManager: MapManagerInterface, - PlayerValue : string = Textures.Player + PlayerValue: string = Textures.Player ) { super(Scene, x, y, PlayerValue, 1); @@ -51,7 +46,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G //set data this.userId = userId; this.PlayerValue = PlayerValue; - this.MapManager = MapManager; this.CameraManager = CameraManager; //the current player model should be push away by other players to prevent conflict @@ -60,7 +54,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G this.setSize(32, 32); } - initAnimation() : void { + initAnimation(): void { getPlayerAnimations().forEach(d => { this.scene.anims.create({ key: d.key, @@ -71,9 +65,8 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G }) } - moveUser() : void { + moveUser(): void { //if user client on shift, camera and player speed - //let speedMultiplier = this.MapManager.keyShift.isDown ? 5 : 1; let haveMove = false; let direction = null; @@ -81,33 +74,21 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100; if (activeEvents.get(UserInputEvent.MoveUp)) { - if (!this.CanMoveUp()) { - return; - } this.move(0, -speedMultiplier); haveMove = true; direction = PlayerAnimationNames.WalkUp; } if (activeEvents.get(UserInputEvent.MoveLeft)) { - if (!this.CanMoveLeft()) { - return; - } this.move(-speedMultiplier, 0); haveMove = true; direction = PlayerAnimationNames.WalkLeft; } if (activeEvents.get(UserInputEvent.MoveDown)) { - if (!this.CanMoveDown()) { - return; - } this.move(0, speedMultiplier); haveMove = true; direction = PlayerAnimationNames.WalkDown; } if (activeEvents.get(UserInputEvent.MoveRight)) { - if (!this.CanMoveRight()) { - return; - } this.move(speedMultiplier, 0); haveMove = true; direction = PlayerAnimationNames.WalkRight; @@ -120,33 +101,13 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G this.CameraManager.moveCamera(this); } - private sharePosition(direction : string){ - if(ConnexionInstance) { + private sharePosition(direction: string) { + if (ConnexionInstance) { ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction); } } - private CanMoveUp(){ - return this.y > 0; - } - - private CanMoveLeft(){ - return this.x > 0; - } - - private CanMoveDown(){ - return this.MapManager.Map.heightInPixels > this.y; - } - - private CanMoveRight() { - return this.MapManager.Map.widthInPixels > this.x; - } - - stop() { - this.setVelocity(0, 0) - } - - updatePosition(MessageUserPosition : MessageUserPositionInterface){ + updatePosition(MessageUserPosition: MessageUserPositionInterface) { playAnimation(this, MessageUserPosition.position.direction); this.setX(MessageUserPosition.position.x); this.setY(MessageUserPosition.position.y);