Displaying the name of a player above its head (names are not passed through the network yet)

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -1,13 +1,20 @@
 import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
 import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
 import {SpeechBubble} from "./SpeechBubble";
+import BitmapText = Phaser.GameObjects.BitmapText;
 
 export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
     private bubble: SpeechBubble;
+    private playerName: BitmapText;
 
-    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) {
+    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) {
         super(scene, x, y, texture, frame);
 
+        // Yes, I know, I'm declaring a sprite inside a sprite. ARP, save me from this madness :)
+        this.playerName = new BitmapText(scene, x, y - 32, 'main_font', name, 8);
+        this.playerName.setOrigin(0.5).setCenterAlign();
+        scene.add.existing(this.playerName);
+
         this.scene.sys.updateList.add(this);
         this.scene.sys.displayList.add(this);
         //this.setScale(2);
@@ -36,6 +43,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
         if(this.bubble) {
             this.bubble.moveBubble(this.x, this.y);
         }
+        this.playerName.setPosition(this.x, this.y - 32);
     }
 
     stop(){

front/src/Phaser/Game/GameScene.ts

@@ -63,6 +63,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
         );
+        this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+
         cypressAsserter.preloadFinished();
     }
 
@@ -166,6 +168,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             this,
             this.startX,
             this.startY,
+            this.playerName
         );
         this.CurrentPlayer.initAnimation();
 
@@ -253,6 +256,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             this,
             MessageUserPosition.position.x,
             MessageUserPosition.position.y,
+            'Foo'
         );
         player.initAnimation();
         this.MapPlayers.add(player);

front/src/Phaser/NonPlayer/NonPlayer.ts

@@ -6,13 +6,13 @@ import {MessageUserPositionInterface} from "../../Connexion";
 import {playAnimation} from "../Player/Animation";
 
 export class NonPlayer extends PlayableCaracter {
-    
+
     isFleeing: boolean = false;
     fleeingDirection:any = null //todo create a vector class
-    
+
-    constructor(scene: Phaser.Scene, x: number, y: number) {
+    constructor(scene: Phaser.Scene, x: number, y: number, name: string) {
-        super(scene, x, y, Textures.Player, 1);
+        super(scene, x, y, Textures.Player, name, 1);
-        this.setSize(32, 32); //edit the hitbox to better match the caracter model
+        this.setSize(32, 32); //edit the hitbox to better match the character model
     }
 
 
@@ -26,15 +26,15 @@ export class NonPlayer extends PlayableCaracter {
         if (this.isFleeing) return;
         this.say("Don't touch me!");
         this.isFleeing = true;
-        
+
         setTimeout(() => {
             this.say("Feww, I escaped.");
             this.isFleeing = false
             this.fleeingDirection = null
         }, 3000);
-        
+
-        let vectorX = this.x - player.x; 
+        let vectorX = this.x - player.x;
         let vectorY = this.y - player.y;
         this.fleeingDirection = {x: vectorX, y: vectorY}
     }
-}
+}

front/src/Phaser/Player/Player.ts

@@ -31,9 +31,10 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         Scene: GameSceneInterface,
         x: number,
         y: number,
+        name: string,
         PlayerValue: string = Textures.Player
     ) {
-        super(Scene, x, y, PlayerValue, 1);
+        super(Scene, x, y, PlayerValue, name, 1);
 
         //create input to move
         this.userInputManager = new UserInputManager(Scene);