From 3ce842737844ab51a181ecc66c772a258cdb4811 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 7 Jan 2021 12:43:21 +0100 Subject: [PATCH] fixed a game crashed because of lack of animations and improved the character class --- front/src/Phaser/Entity/Character.ts | 26 +------ front/src/Phaser/Entity/SpeechBubble.ts | 29 +------- front/src/Phaser/Game/GameScene.ts | 97 ++++++++++++++----------- 3 files changed, 60 insertions(+), 92 deletions(-) diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 37b55be2..6df6e1a4 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -59,6 +59,7 @@ export abstract class Character extends Container { frame?: string | number ) { super(scene, x, y/*, texture, frame*/); + this.PlayerValue = name; this.sprites = new Map(); @@ -73,10 +74,9 @@ export abstract class Character extends Container { }); this.add(this.teleportation);*/ - this.PlayerValue = name; - this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7); + this.playerName = new BitmapText(scene, 0, - 25, 'main_font', name, 7); this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999); - scene.add.existing(this.playerName); + this.add(this.playerName); scene.add.existing(this); @@ -88,8 +88,6 @@ export abstract class Character extends Container { this.getBody().setOffset(0, 8); this.setDepth(-1); - this.scene.events.on('postupdate', this.postupdate.bind(this)); - this.playAnimation(direction, moving); } @@ -181,35 +179,21 @@ export abstract class Character extends Container { if (body.velocity.y < 0) { //moving up this.lastDirection = PlayerAnimationNames.WalkUp; this.playAnimation(PlayerAnimationNames.WalkUp, true); - //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true); } else if (body.velocity.y > 0) { //moving down this.lastDirection = PlayerAnimationNames.WalkDown; this.playAnimation(PlayerAnimationNames.WalkDown, true); - //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true); } else if (body.velocity.x > 0) { //moving right this.lastDirection = PlayerAnimationNames.WalkRight; this.playAnimation(PlayerAnimationNames.WalkRight, true); - //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true); } else if (body.velocity.x < 0) { //moving left this.lastDirection = PlayerAnimationNames.WalkLeft; this.playAnimation(PlayerAnimationNames.WalkLeft, true); - //this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true); - } - - //todo:remove this, use a container tech to move the bubble instead - if (this.bubble) { - this.bubble.moveBubble(this.x, this.y); } //update depth user this.setDepth(this.y); } - postupdate(time: number, delta: number) { - //super.update(delta); - this.playerName.setPosition(this.x, this.y - 25); - } - stop(){ this.getBody().setVelocity(0, 0); this.playAnimation(this.lastDirection, false); @@ -218,7 +202,6 @@ export abstract class Character extends Container { say(text: string) { if (this.bubble) return; this.bubble = new SpeechBubble(this.scene, this, text) - //todo make the bubble destroy on player movement? setTimeout(() => { if (this.bubble !== null) { this.bubble.destroy(); @@ -228,9 +211,6 @@ export abstract class Character extends Container { } destroy(): void { - if (this.scene) { - this.scene.events.removeListener('postupdate', this.postupdate.bind(this)); - } for (const sprite of this.sprites.values()) { if(this.scene) { this.scene.sys.updateList.remove(sprite); diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts index 5dc43fe0..06a64bd4 100644 --- a/front/src/Phaser/Entity/SpeechBubble.ts +++ b/front/src/Phaser/Entity/SpeechBubble.ts @@ -1,16 +1,12 @@ import Scene = Phaser.Scene; import {Character} from "./Character"; +//todo: improve this WIP export class SpeechBubble { private bubble: Phaser.GameObjects.Graphics; private content: Phaser.GameObjects.Text; - /** - * - * @param scene - * @param player - * @param text - */ + constructor(scene: Scene, player: Character, text: string = "") { const bubbleHeight = 50; @@ -19,6 +15,7 @@ export class SpeechBubble { const arrowHeight = bubbleHeight / 4; this.bubble = scene.add.graphics({ x: player.x + 16, y: player.y - 80 }); + player.add(this.bubble); // Bubble shadow this.bubble.fillStyle(0x222222, 0.5); @@ -53,30 +50,12 @@ export class SpeechBubble { this.bubble.lineBetween(point1X, point1Y, point3X, point3Y); this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: '20', color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } }); + player.add(this.content); const bounds = this.content.getBounds(); this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2)); } - /** - * - * @param x - * @param y - */ - moveBubble(x : number, y : number) { - if (this.bubble) { - this.bubble.setPosition((x + 16), (y - 80)); - } - if (this.content) { - const bubbleHeight = 50; - const bubblePadding = 10; - const bubbleWidth = bubblePadding * 2 + this.content.text.length * 10; - const bounds = this.content.getBounds(); - //this.content.setPosition(x, y); - this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2)); - } - } - destroy(): void { this.bubble.setVisible(false) //todo find a better way this.bubble.destroy(); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 1357f6d8..181592e2 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -66,6 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon"; import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {TextureError} from "../../Exception/TextureError"; +import {TextField} from "../Components/TextField"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -209,13 +210,17 @@ export class GameScene extends ResizableScene implements CenterListener { } private initProgressBar(): void { + const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading'); const progress = this.add.graphics(); this.load.on('progress', (value: number) => { progress.clear(); progress.fillStyle(0xffffff, 1); progress.fillRect(0, 270, 800 * value, 60); }); - this.load.on('complete', () => progress.destroy()); + this.load.on('complete', () => { + loadingText.destroy(); + progress.destroy(); + }); } // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. @@ -391,40 +396,11 @@ export class GameScene extends ResizableScene implements CenterListener { //notify game manager can to create currentUser in map this.createCurrentPlayer(); - - //initialise camera + this.removeAllRemotePlayers(); //cleanup the list of remote players in case the scene was rebooted + this.initCamera(); - // Let's generate the circle for the group delimiter - let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white'); - if (circleElement) { - this.textures.remove('circleSprite-white'); - } - - circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red'); - if (circleElement) { - this.textures.remove('circleSprite-red'); - } - - //create white circle canvas use to create sprite - this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96); - const context = this.circleTexture.context; - context.beginPath(); - context.arc(48, 48, 48, 0, 2 * Math.PI, false); - // context.lineWidth = 5; - context.strokeStyle = '#ffffff'; - context.stroke(); - this.circleTexture.refresh(); - - //create red circle canvas use to create sprite - this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96); - const contextRed = this.circleRedTexture.context; - contextRed.beginPath(); - contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false); - // context.lineWidth = 5; - contextRed.strokeStyle = '#ff0000'; - contextRed.stroke(); - this.circleRedTexture.refresh(); + this.initCirclesCanvas(); // Let's pause the scene if the connection is not established yet if (this.isReconnecting) { @@ -606,6 +582,40 @@ export class GameScene extends ResizableScene implements CenterListener { }); } + //todo: into dedicated classes + private initCirclesCanvas(): void { + // Let's generate the circle for the group delimiter + let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white'); + if (circleElement) { + this.textures.remove('circleSprite-white'); + } + + circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red'); + if (circleElement) { + this.textures.remove('circleSprite-red'); + } + + //create white circle canvas use to create sprite + this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96); + const context = this.circleTexture.context; + context.beginPath(); + context.arc(48, 48, 48, 0, 2 * Math.PI, false); + // context.lineWidth = 5; + context.strokeStyle = '#ffffff'; + context.stroke(); + this.circleTexture.refresh(); + + //create red circle canvas use to create sprite + this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96); + const contextRed = this.circleRedTexture.context; + contextRed.beginPath(); + contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false); + // context.lineWidth = 5; + contextRed.strokeStyle = '#ff0000'; + contextRed.stroke(); + this.circleRedTexture.refresh(); + } + private playAudio(url: string|number|boolean|undefined, loop=false): void { if (url === undefined) { audioManager.unloadAudio(); @@ -717,6 +727,14 @@ export class GameScene extends ResizableScene implements CenterListener { } } + private removeAllRemotePlayers(): void { + this.MapPlayersByKey.forEach((player: RemotePlayer) => { + player.destroy(); + this.MapPlayers.remove(player); + }); + this.MapPlayersByKey = new Map(); + } + private switchLayoutMode(): void { //if discussion is activated, this layout cannot be activated if(mediaManager.activatedDiscussion){ @@ -1024,14 +1042,7 @@ export class GameScene extends ResizableScene implements CenterListener { */ private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void { const currentPlayerId = this.connection.getUserId(); - - // clean map - this.MapPlayersByKey.forEach((player: RemotePlayer) => { - player.destroy(); - this.MapPlayers.remove(player); - }); - this.MapPlayersByKey = new Map(); - + this.removeAllRemotePlayers(); // load map usersPosition.forEach((userPosition : MessageUserPositionInterface) => { if(userPosition.userId === currentPlayerId){ @@ -1224,9 +1235,7 @@ export class GameScene extends ResizableScene implements CenterListener { // Let's put this in Game coordinates by applying the zoom level: xCenter /= ZOOM_LEVEL * RESOLUTION; yCenter /= ZOOM_LEVEL * RESOLUTION; - - //console.log("updateCameraOffset", array, xCenter, yCenter, this.game.renderer.width, this.game.renderer.height); - + this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1, xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2); }