fixed a game crashed because of lack of animations and improved the character class

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<string, Sprite>();
 
@@ -73,10 +74,9 @@ export abstract class Character extends Container {
         });
         this.add(this.teleportation);*/
 
-        this.PlayerValue = name;
+        this.playerName = new BitmapText(scene, 0,  - 25, 'main_font', name, 7);
-        this.playerName = new BitmapText(scene, x, y - 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);

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

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();
-
+        this.removeAllRemotePlayers(); //cleanup the list  of remote players in case the scene was rebooted
-        //initialise camera
+        
         this.initCamera();
 
-        // Let's generate the circle for the group delimiter
+        this.initCirclesCanvas();
-        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();
 
         // 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<number, RemotePlayer>();
+    }
+
     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();
-
+        this.removeAllRemotePlayers();
-        // clean map
-        this.MapPlayersByKey.forEach((player: RemotePlayer) => {
-            player.destroy();
-            this.MapPlayers.remove(player);
-        });
-        this.MapPlayersByKey = new Map<number, RemotePlayer>();
-
         // 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);
     }