lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fix feadback @Kharhamel

Browse source
This commit is contained in:
gparant 2020-04-13 15:34:09 +02:00
parent 48fe86634f
commit 2afe6b4b6e
4 changed files with 183 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
front/src/Phaser/Game/CameraManager.ts
View file

@ -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){

183
front/src/Phaser/Game/GameScene.ts
View file

@ -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<MessageUserPositionInterface>): 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<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>;
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<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) );
//add entities
this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
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<MessageUserPositionInterface>): void {
this.MapManager.updateOrCreateMapPlayer(UsersPosition);
this.updateOrCreateMapPlayer(UsersPosition);
}
/**
* Create new player and clean the player on the map
* @param UsersPosition
*/
updateOrCreateMapPlayer(UsersPosition : Array<MessageUserPositionInterface>){
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 ? ");
});
}
}

196
front/src/Phaser/Game/MapManager.ts
View file

@ -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<MessageUserPositionInterface>): 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<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>;
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<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) );
//add entities
this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
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<MessageUserPositionInterface>){
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 ? ");
});
}
}

63
front/src/Phaser/Player/Player.ts
View file

@ -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);