Add feature to move bubble

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -31,6 +31,10 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
         } else if (this.body.velocity.y > 0) { //moving down
             this.play(PlayerAnimationNames.WalkDown, true);
         }
+
+        if(this.bubble) {
+            this.bubble.moveBubble(this.x, this.y);
+        }
     }
     
     say(text: string) {

front/src/Phaser/Entity/SpeechBubble.ts

@@ -5,7 +5,13 @@ export class SpeechBubble {
     private bubble: Phaser.GameObjects.Graphics;
     private content: Phaser.GameObjects.Text;
 
-    constructor(scene: Scene, player: PlayableCaracter, text: string) {
+    /**
+     *
+     * @param scene
+     * @param player
+     * @param text
+     */
+    constructor(scene: Scene, player: PlayableCaracter, text: string = "") {
 
         let bubbleHeight = 50;
         let bubblePadding = 10;
@@ -49,14 +55,34 @@ export class SpeechBubble {
         this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: 20, color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
 
         let 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) {
+            let bubbleHeight = 50;
+            let bubblePadding = 10;
+            let bubbleWidth = bubblePadding * 2 + this.content.text.length * 10;
+            let 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.content.destroy()
+        this.bubble.destroy();
+        this.bubble = null;
+        this.content.destroy();
+        this.content = null;
     }
 
 }

front/src/Phaser/Game/MapManager.ts

@@ -4,6 +4,8 @@ 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;
@@ -22,14 +24,11 @@ export class MapManager implements MapManagerInterface{
     MapPlayers : Phaser.Physics.Arcade.Group;
     Scene: GameSceneInterface;
     Map: Phaser.Tilemaps.Tilemap;
-    BottomLayer: Phaser.Tilemaps.StaticTilemapLayer;
+    Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
-    TopLayer: Phaser.Tilemaps.StaticTilemapLayer;
+    Objects : Array<Phaser.Physics.Arcade.Sprite>;
     startX = (window.innerWidth / 2) / RESOLUTION;
     startY = (window.innerHeight / 2) / RESOLUTION;
 
-    //entities
-    private rock: Phaser.Physics.Arcade.Sprite;
-
     constructor(scene: GameSceneInterface){
         this.Scene = scene;
 
@@ -37,20 +36,26 @@ export class MapManager implements MapManagerInterface{
         this.Map = this.Scene.add.tilemap("map");
         this.Terrain = this.Map.addTilesetImage("tiles", "tiles");
         this.Map.createStaticLayer("tiles", "tiles");
-        this.BottomLayer = this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0).setDepth(-2);
+
-        this.TopLayer = this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0).setDepth(-1);
+        //permit to set bound collision
         this.Scene.physics.world.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
 
-        //add entitites
+        //add layer on map
-        this.rock = this.Scene.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true);
+        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(),{
+        /*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();
@@ -62,6 +67,36 @@ export class MapManager implements MapManagerInterface{
         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(
@@ -75,10 +110,8 @@ export class MapManager implements MapManagerInterface{
         this.CurrentPlayer.initAnimation();
 
         //create collision
-        this.Scene.physics.add.collider(this.CurrentPlayer, this.rock);
+        this.createCollisionWithPlayer();
-        //add collision layer
+        this.createCollisionObject();
-        this.Scene.physics.add.collider(this.CurrentPlayer, this.TopLayer);
-        this.TopLayer.setCollisionByProperty({collides:true});
     }
 
     EventToClickOnTile(){