From 5a6415607d0ea6b5d00271bc37b88869fb0501fd Mon Sep 17 00:00:00 2001 From: gparant Date: Wed, 6 May 2020 01:50:01 +0200 Subject: [PATCH] Send event and play animation with user frame --- back/src/Controller/IoSocketController.ts | 1 + back/src/Model/Websocket/ExSocketInterface.ts | 1 + back/src/Model/Websocket/ExtRoom.ts | 1 + back/src/Model/Websocket/Message.ts | 5 +- back/tests/MessageTest.ts | 13 ++--- front/src/Connexion.ts | 51 +++++++++++++------ front/src/Phaser/Entity/PlayableCaracter.ts | 39 +++++++++++--- front/src/Phaser/Game/GameManager.ts | 13 +++-- front/src/Phaser/Game/GameScene.ts | 23 ++++++--- front/src/Phaser/Login/LogincScene.ts | 35 +++---------- front/src/Phaser/Player/Animation.ts | 8 +-- front/src/Phaser/Player/Player.ts | 22 ++++---- 12 files changed, 128 insertions(+), 84 deletions(-) diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index c18b9e68..64012349 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/back/src/Controller/IoSocketController.ts @@ -216,6 +216,7 @@ export class IoSocketController { socket.roomId = message.roomId; socket.userId = message.userId; socket.name = message.name; + socket.frame = message.frame; } refreshUserPosition() { diff --git a/back/src/Model/Websocket/ExSocketInterface.ts b/back/src/Model/Websocket/ExSocketInterface.ts index dbc02385..7798509b 100644 --- a/back/src/Model/Websocket/ExSocketInterface.ts +++ b/back/src/Model/Websocket/ExSocketInterface.ts @@ -7,5 +7,6 @@ export interface ExSocketInterface extends Socket { webRtcRoomId: string; userId: string; name: string; + frame: string; position: PointInterface; } \ No newline at end of file diff --git a/back/src/Model/Websocket/ExtRoom.ts b/back/src/Model/Websocket/ExtRoom.ts index 49a6197c..a1b2cb65 100644 --- a/back/src/Model/Websocket/ExtRoom.ts +++ b/back/src/Model/Websocket/ExtRoom.ts @@ -25,6 +25,7 @@ let RefreshUserPositionFunction = function(rooms : ExtRooms, Io: socketIO.Server roomId: socket.roomId, position: socket.position, name: socket.name, + frame: socket.frame, }; let dataArray = []; if (mapPositionUserByRoom.get(data.roomId)) { diff --git a/back/src/Model/Websocket/Message.ts b/back/src/Model/Websocket/Message.ts index 0409a8d2..16589e3b 100644 --- a/back/src/Model/Websocket/Message.ts +++ b/back/src/Model/Websocket/Message.ts @@ -2,6 +2,7 @@ export class Message { userId: string; roomId: string; name: string; + frame: string; constructor(data: any) { if (!data.userId || !data.roomId) { @@ -10,13 +11,15 @@ export class Message { this.userId = data.userId; this.roomId = data.roomId; this.name = data.name; + this.frame = data.frame; } toJson() { return { userId: this.userId, roomId: this.roomId, - name: this.name + name: this.name, + frame: this.frame } } } \ No newline at end of file diff --git a/back/tests/MessageTest.ts b/back/tests/MessageTest.ts index 3bae787b..e2b5f372 100644 --- a/back/tests/MessageTest.ts +++ b/back/tests/MessageTest.ts @@ -3,37 +3,38 @@ import {Message} from "../src/Model/Websocket/Message"; describe("Message Model", () => { it("should find userId and roomId", () => { - let message = {userId: "test1", roomId: "test2", name: "foo"}; + let message = {userId: "test1", roomId: "test2", name: "foo", frame: "user"}; let messageObject = new Message(message); expect(messageObject.userId).toBe("test1"); expect(messageObject.roomId).toBe("test2"); expect(messageObject.name).toBe("foo"); + expect(messageObject.name).toBe("user"); }) it("should expose a toJson method", () => { let message = {userId: "test1", roomId: "test2", name: "foo"}; let messageObject = new Message(message); - expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2", name: "foo"}); - }) + expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2", name: "foo", frame: "user"}); + }); it("should find throw error when no userId", () => { let message = {roomId: "test2"}; expect(() => { let messageObject = new Message(message); }).toThrow(new Error("userId or roomId cannot be null")); - }) + }); it("should find throw error when no roomId", () => { let message = {userId: "test1"}; expect(() => { let messageObject = new Message(message); }).toThrow(new Error("userId or roomId cannot be null")); - }) + }); it("should find throw error when no roomId", () => { let message = {name: "foo"}; expect(() => { let messageObject = new Message(message); }).toThrow(new Error("userId or roomId cannot be null")); - }) + }); }) \ No newline at end of file diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index ecf58091..4dfddee1 100644 --- a/front/src/Connexion.ts +++ b/front/src/Connexion.ts @@ -18,18 +18,21 @@ class Message { userId: string; roomId: string; name: string; + frame: string; - constructor(userId : string, roomId : string, name: string) { + constructor(userId : string, roomId : string, name: string, frame: string) { this.userId = userId; this.roomId = roomId; this.name = name; + this.frame = frame; } toJson() { return { userId: this.userId, roomId: this.roomId, - name: this.name + name: this.name, + frame: this.frame } } } @@ -68,14 +71,15 @@ export interface MessageUserPositionInterface { userId: string; roomId: string; name: string; + frame: string; position: PointInterface; } class MessageUserPosition extends Message implements MessageUserPositionInterface{ position: PointInterface; - constructor(userId : string, roomId : string, point : Point, name: string) { - super(userId, roomId, name); + constructor(userId : string, roomId : string, point : Point, name: string, frame: string) { + super(userId, roomId, name, frame); this.position = point; } @@ -111,7 +115,8 @@ class ListMessageUserPosition { userPosition.position.y, userPosition.position.direction ), - userPosition.name + userPosition.name, + userPosition.frame )); }); } @@ -124,11 +129,11 @@ export interface ConnexionInterface { userId: string; startedRoom: string; - createConnexion(): Promise; + createConnexion(frameSelected: string): Promise; - joinARoom(roomId: string): void; + joinARoom(roomId: string, frame: string): void; - sharePosition(x: number, y: number, direction: string): void; + sharePosition(x: number, y: number, direction: string, frame: string): void; positionOfAllUser(): void; @@ -156,7 +161,7 @@ export class Connexion implements ConnexionInterface { this.GameManager = GameManager; } - createConnexion(): Promise { + createConnexion(frameSelected: string): Promise { return Axios.post(`${API_URL}/login`, {email: this.email}) .then((res) => { this.token = res.data.token; @@ -170,10 +175,10 @@ export class Connexion implements ConnexionInterface { }); //join the room - this.joinARoom(this.startedRoom); + this.joinARoom(this.startedRoom, frameSelected); //share your first position - this.sharePosition(0, 0); + this.sharePosition(0, 0, frameSelected); this.positionOfAllUser(); @@ -188,11 +193,18 @@ export class Connexion implements ConnexionInterface { } /** - * Permit to join a room + * * @param roomId + * @param frame */ - joinARoom(roomId: string): void { - let messageUserPosition = new MessageUserPosition(this.userId, this.startedRoom, new Point(0, 0), this.email); + joinARoom(roomId: string, frame: string): void { + let messageUserPosition = new MessageUserPosition( + this.userId, + this.startedRoom, + new Point(0, 0), + this.email, + frame + ); this.socket.emit(EventMessage.JOIN_ROOM, messageUserPosition.toString()); } @@ -200,13 +212,20 @@ export class Connexion implements ConnexionInterface { * * @param x * @param y + * @param frame * @param direction */ - sharePosition(x : number, y : number, direction : string = "none") : void{ + sharePosition(x : number, y : number, frame : string, direction : string = "none") : void{ if(!this.socket){ return; } - let messageUserPosition = new MessageUserPosition(this.userId, ROOM[0], new Point(x, y, direction), this.email); + let messageUserPosition = new MessageUserPosition( + this.userId, + ROOM[0], + new Point(x, y, direction), + this.email, + frame + ); this.socket.emit(EventMessage.USER_POSITION, messageUserPosition.toString()); } diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index 02e5a08b..339675c9 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -2,13 +2,40 @@ import {PlayerAnimationNames} from "../Player/Animation"; import {SpeechBubble} from "./SpeechBubble"; import BitmapText = Phaser.GameObjects.BitmapText; +export const PLAYER_RESOURCES: Array = [ + {name: "male1", img: "resources/characters/pipoya/Male 01-1.png", x: 32, y: 32}, + {name: "male2", img: "resources/characters/pipoya/Male 02-2.png", x: 64, y: 32}, + {name: "male3", img: "resources/characters/pipoya/Male 03-4.png", x: 96, y: 32}, + {name: "male4", img: "resources/characters/pipoya/Male 09-1.png", x: 128, y: 32}, + + {name: "male5", img: "resources/characters/pipoya/Male 10-3.png", x: 32, y: 64}, + {name: "male6", img: "resources/characters/pipoya/Male 17-2.png", x: 64, y: 64}, + {name: "male7", img: "resources/characters/pipoya/Male 18-1.png", x: 96, y: 64}, + {name: "male8", img: "resources/characters/pipoya/Male 16-4.png", x: 128, y: 64}, + + {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png", x: 32, y: 96}, + {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png", x: 64, y: 96}, + {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png", x: 96, y: 96}, + {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png", x: 128, y: 96}, + + {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png", x: 32, y: 128}, + {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png", x: 64, y: 128}, + {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png", x: 96, y: 128}, + {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png", x: 128, y: 128} +]; + export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { private bubble: SpeechBubble; private playerName: BitmapText; + public PlayerValue: string; + public PlayerTexture: string; + constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) { super(scene, x, y, texture, frame); + this.PlayerValue = name; + this.PlayerTexture = texture; this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8); this.playerName.setOrigin(0.5).setCenterAlign(); scene.add.existing(this.playerName); @@ -23,22 +50,22 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { this.setOffset(8, 16); } - move(x: number, y: number){ + move(x: number, y: number) { this.setVelocity(x, y); //up or down animationss are prioritized over left and right if (this.body.velocity.y < 0) { //moving up - this.play(PlayerAnimationNames.WalkUp, true); + this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true); } else if (this.body.velocity.y > 0) { //moving down - this.play(PlayerAnimationNames.WalkDown, true); + this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true); } else if (this.body.velocity.x > 0) { //moving right - this.play(PlayerAnimationNames.WalkRight, true); + this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true); } else if (this.body.velocity.x < 0) { //moving left - this.anims.playReverse(PlayerAnimationNames.WalkLeft, true); + this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true); } - if(this.bubble) { + if (this.bubble) { this.bubble.moveBubble(this.x, this.y); } this.updatePlayerNamePosition(this.x, this.y); diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index ad4d5a2c..4cc95c2a 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -13,6 +13,7 @@ export interface HasMovedEvent { direction: string; x: number; y: number; + frame: string; } export class GameManager { @@ -21,15 +22,17 @@ export class GameManager { private currentGameScene: GameScene; private playerName: string; SimplePeer : SimplePeerInterface; + private frameUserSelected: string; constructor() { this.status = StatusGameManagerEnum.IN_PROGRESS; } - connect(name:string) { + connect(name: string, frameUserSelected : string) { this.playerName = name; + this.frameUserSelected = frameUserSelected; this.ConnexionInstance = new Connexion(name, this); - return this.ConnexionInstance.createConnexion().then(() => { + return this.ConnexionInstance.createConnexion(frameUserSelected).then(() => { this.SimplePeer = new SimplePeer(this.ConnexionInstance); }); } @@ -67,8 +70,12 @@ export class GameManager { return this.playerName; } + getFrameSelected(): string { + return this.frameUserSelected; + } + pushPlayerPosition(event: HasMovedEvent) { - this.ConnexionInstance.sharePosition(event.x, event.y, event.direction); + this.ConnexionInstance.sharePosition(event.x, event.y, event.frame, event.direction); } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 98b3b693..39e486d1 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -5,10 +5,11 @@ import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVa import Tile = Phaser.Tilemaps.Tile; import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; +import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter"; export const GameSceneName = "GameScene"; export enum Textures { - Player = 'playerModel', + Player = 'male1', Map = 'map' } @@ -57,10 +58,16 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ }) }); this.load.tilemapTiledJSON(Textures.Map, mapUrl); - this.load.spritesheet(Textures.Player, - 'resources/characters/pipoya/Male 01-1.png', - { frameWidth: 32, frameHeight: 32 } - ); + + //add player png + PLAYER_RESOURCES.forEach((playerResource: any) => { + this.load.spritesheet( + playerResource.name, + playerResource.img, + {frameWidth: 32, frameHeight: 32} + ); + }); + this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); cypressAsserter.preloadFinished(); @@ -165,7 +172,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, this.startX, this.startY, - this.GameManager.getPlayerName() + this.GameManager.getPlayerName(), + this.GameManager.getFrameSelected() ); this.CurrentPlayer.initAnimation(); @@ -258,7 +266,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, MessageUserPosition.position.x, MessageUserPosition.position.y, - MessageUserPosition.name + MessageUserPosition.name, + MessageUserPosition.frame ); player.initAnimation(); this.MapPlayers.add(player); diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index fc29e022..3ed2f0f5 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -1,4 +1,4 @@ -import {gameManager, HasMovedEvent} from "../Game/GameManager"; +import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; import {ClickButton} from "../Components/ClickButton"; @@ -7,6 +7,7 @@ import Image = Phaser.GameObjects.Image; import {Player} from "../Player/Player"; import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; import Rectangle = Phaser.GameObjects.Rectangle; +import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter"; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -28,28 +29,6 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface { private selectedPlayer: Phaser.Physics.Arcade.Sprite; private players: Array = new Array(); - private playerResources: Array = [ - {name: "male1", img: "resources/characters/pipoya/Male 01-1.png", x: 32, y: 32}, - {name: "male2", img: "resources/characters/pipoya/Male 02-2.png", x: 64, y: 32}, - {name: "male3", img: "resources/characters/pipoya/Male 03-4.png", x: 96, y: 32}, - {name: "male4", img: "resources/characters/pipoya/Male 09-1.png", x: 128, y: 32}, - - {name: "male5", img: "resources/characters/pipoya/Male 10-3.png", x: 32, y: 64}, - {name: "male6", img: "resources/characters/pipoya/Male 17-2.png", x: 64, y: 64}, - {name: "male7", img: "resources/characters/pipoya/Male 18-1.png", x: 96, y: 64}, - {name: "male8", img: "resources/characters/pipoya/Male 16-4.png", x: 128, y: 64}, - - {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png", x: 32, y: 96}, - {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png", x: 64, y: 96}, - {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png", x: 96, y: 96}, - {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png", x: 128, y: 96}, - - {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png", x: 32, y: 128}, - {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png", x: 64, y: 128}, - {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png", x: 96, y: 128}, - {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png", x: 128, y: 128} - ]; - constructor() { super({ key: LoginSceneName @@ -62,7 +41,7 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface { // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); //add player png - this.playerResources.forEach((playerResource: any) => { + PLAYER_RESOURCES.forEach((playerResource: any) => { this.load.spritesheet( playerResource.name, playerResource.img, @@ -108,7 +87,7 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface { } private async login(name: string) { - gameManager.connect(name).then(() => { + gameManager.connect(name, this.selectedPlayer.texture.key).then(() => { this.scene.start(GameSceneName); }); } @@ -120,8 +99,8 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface { } createCurrentPlayer(UserId: string): void { - for (let i = 0; i < this.playerResources.length; i++) { - let playerResource = this.playerResources[i]; + for (let i = 0; i { return [{ - key: PlayerAnimationNames.WalkDown, //TODO chnage, it's a key for one anumation of ine user type. + key: `${name}-${PlayerAnimationNames.WalkDown}`, //TODO chnage, it's a key for one anumation of ine user type. frameModel: name, frameStart: 0, frameEnd: 2, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkLeft, + key: `${name}-${PlayerAnimationNames.WalkLeft}`, frameModel: name, frameStart: 3, frameEnd: 5, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkRight, + key: `${name}-${PlayerAnimationNames.WalkRight}`, frameModel: name, frameStart: 6, frameEnd: 8, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkUp, + key: `${name}-${PlayerAnimationNames.WalkUp}`, frameModel: name, frameStart: 9, frameEnd: 11, diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index d13feed4..c893545a 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -8,7 +8,6 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter"; export const hasMovedEventName = "hasMoved"; export interface CurrentGamerInterface extends PlayableCaracter{ userId : string; - PlayerValue : string; initAnimation() : void; moveUser(delta: number) : void; say(text : string) : void; @@ -16,7 +15,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{ export interface GamerInterface extends PlayableCaracter{ userId : string; - PlayerValue : string; initAnimation() : void; updatePosition(MessageUserPosition : MessageUserPositionInterface) : void; say(text : string) : void; @@ -24,7 +22,6 @@ export interface GamerInterface extends PlayableCaracter{ export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface { userId: string; - PlayerValue: string; userInputManager: UserInputManager; previousMove: string; @@ -34,23 +31,23 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G x: number, y: number, name: string, - PlayerValue: string = Textures.Player + PlayerTexture: string = Textures.Player ) { - super(Scene, x, y, PlayerValue, name, 1); + super(Scene, x, y, PlayerTexture, name, 1); //create input to move this.userInputManager = new UserInputManager(Scene); //set data this.userId = userId; - this.PlayerValue = PlayerValue; + //the current player model should be push away by other players to prevent conflict this.setImmovable(false); } initAnimation(): void { - getPlayerAnimations().forEach(d => { + getPlayerAnimations(this.PlayerTexture).forEach(d => { this.scene.anims.create({ key: d.key, frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}), @@ -73,17 +70,17 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G let y = 0; if (activeEvents.get(UserInputEvent.MoveUp)) { y = - moveAmount; - direction = PlayerAnimationNames.WalkUp; + direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`; } else if (activeEvents.get(UserInputEvent.MoveDown)) { y = moveAmount; - direction = PlayerAnimationNames.WalkDown; + direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`; } if (activeEvents.get(UserInputEvent.MoveLeft)) { x = -moveAmount; - direction = PlayerAnimationNames.WalkLeft; + direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`; } else if (activeEvents.get(UserInputEvent.MoveRight)) { x = moveAmount; - direction = PlayerAnimationNames.WalkRight; + direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`; } if (x !== 0 || y !== 0) { this.move(x, y); @@ -91,8 +88,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G direction = PlayerAnimationNames.None; this.stop(); } - - this.emit(hasMovedEventName, {direction, x: this.x, y: this.y}); + this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture}); } //todo: put this method into the NonPlayer class instead