Adding the ability to display "Text" objects from Tiled

I honestly don't believe text objects look good on map, and in real maps, I think text should be written on tiles.

However, for a variety of use cases (like in test maps in the /maps/test directory, it can be useful to be
able to display some text easily on a map.

This PR adds the ability to display this text.

Note: the "font" support cannot work correctly, as Tiled is listing fonts from the local
system, and those fonts are not available in a browser.

front/src/Phaser/Components/TextUtils.ts

@@ -0,0 +1,45 @@
+import {ITiledMapObject} from "../Map/ITiledMap";
+import Text = Phaser.GameObjects.Text;
+import {GameScene} from "../Game/GameScene";
+import TextStyle = Phaser.GameObjects.TextStyle;
+
+export class TextUtils {
+    public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
+        if (object.text === undefined) {
+            throw new Error('This object has not textual representation.');
+        }
+        const options: {font?: string} = {};
+        let font = '';
+        if (object.text.italic) {
+            font += 'italic ';
+        }
+        // Note: there is no support for "strikeout" and "underline"
+        let fontSize: number = 16;
+        if (object.text.pixelsize) {
+            font += object.text.pixelsize+'px ';
+            fontSize = object.text.pixelsize;
+        } else {
+            font += '16px ';
+        }
+        if (object.text.fontfamily) {
+            font += '"'+object.text.fontfamily+'"';
+        }
+        if (font !== '') {
+            options.font = font;
+        }
+        const textElem = scene.add.text(object.x, object.y, object.text.text, options);
+        textElem.setFontSize(fontSize);
+        let color = '#000000';
+        if (object.text.color !== undefined) {
+            color = object.text.color;
+        }
+        textElem.setColor(color);
+        if (object.text.wrap) {
+            textElem.setWordWrapWidth(textElem.width);
+        }
+        textElem.setAngle(object.rotation);
+        if (object.text.halign !== undefined) {
+            textElem.setAlign(object.text.halign);
+        }
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -23,6 +23,7 @@ import {
     ITiledMapLayer,
     ITiledMapLayerProperty,
     ITiledMapObject,
+    ITiledText,
     ITiledMapTileLayer,
     ITiledTileSet
 } from "../Map/ITiledMap";
@@ -84,6 +85,7 @@ import DOMElement = Phaser.GameObjects.DOMElement;
 import {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
+import {TextUtils} from "../Components/TextUtils";
 import {LayersIterator} from "../Map/LayersIterator";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
@@ -412,6 +414,13 @@ export class GameScene extends ResizableScene implements CenterListener {
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
             }
+            if (layer.type === 'objectgroup') {
+                for (const object of layer.objects) {
+                    if (object.text) {
+                        TextUtils.createTextFromITiledMapObject(this, object);
+                    }
+                }
+            }
         }
         if (depth === -2) {
             throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at. This layer cannot be contained in a group.');

front/src/Phaser/Map/ITiledMap.ts

@@ -136,6 +136,20 @@ export interface ITiledMapObject {
      * Polyline points
      */
     polyline: {x: number, y: number}[];
+
+    text?: ITiledText
+}
+
+export interface ITiledText {
+    text: string,
+    wrap?: boolean,
+    fontfamily?: string,
+    pixelsize?: number,
+    color?: string,
+    underline?: boolean,
+    italic?: boolean,
+    strikeout?: boolean,
+    halign?: "center"|"right"|"justify"|"left"
 }
 
 export interface ITiledTileSet {