Adding a "font-family" property for text objects. (#1311)

- Tiled displays your system fonts.
- Computers have different sets of fonts. Therefore, browsers never rely on system fonts
- Which means if you select a font in Tiled, it is quite unlikely it will render properly in WorkAdventure

To circumvent this problem, in your text object in Tiled, you can now add an additional property: `font-family`.

The `font-family` property can contain any "web-font" that can be loaded by your browser.

This allows us to use the "Press Start 2P" 8px font in text objects, which renders way better than the default "Sans serif" font of your browser.

docs/maps/text.md

@@ -0,0 +1,35 @@
+{.section-title.accent.text-primary}
+# Writing text on a map
+
+## Solution 1: design a specific tileset (recommended)
+
+If you want to write some text on a map, our recommendation is to create a tileset that contains
+your text. You will obtain the most pleasant graphical result with this result, since you will be able
+to control the fonts you use, and you will be able to disable the antialiasing of the font to get a 
+"crispy" result easily.
+
+## Solution 2: using a "text" object in Tiled
+
+On "object" layers, Tiled has support for "Text" objects. You can use these objects to add some
+text on your map.
+
+WorkAdventure will do its best to display the text properly. However, you need to know that:
+
+- Tiled displays your system fonts.
+- Computers have different sets of fonts. Therefore, browsers never rely on system fonts
+- Which means if you select a font in Tiled, it is quite unlikely it will render properly in WorkAdventure
+
+To circumvent this problem, in your text object in Tiled, you can add an additional property: `font-family`.
+
+The `font-family` property can contain any "web-font" that can be loaded by your browser.
+
+{.alert.alert-info}
+**Pro-tip:** By default, WorkAdventure uses the **'"Press Start 2P"'** font, which is a great pixelated
+font that has support for a variety of accents. It renders great when used at *8px* size.
+
+<div>
+    <figure class="figure">
+        <img src="https://workadventu.re/img/docs/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <figcaption class="figure-caption">The "font-family" property</figcaption>
+    </figure>
+</div>

front/src/Phaser/Components/TextUtils.ts

@@ -1,35 +1,43 @@
-import type {ITiledMapObject} from "../Map/ITiledMap";
-import type {GameScene} from "../Game/GameScene";
+import type { ITiledMapObject } from "../Map/ITiledMap";
+import type { GameScene } from "../Game/GameScene";
+import { type } from "os";
 
 export class TextUtils {
     public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
         if (object.text === undefined) {
-            throw new Error('This object has not textual representation.');
+            throw new Error("This object has not textual representation.");
         }
         const options: {
-            fontStyle?: string,
-            fontSize?: string,
-            fontFamily?: string,
-            color?: string,
-            align?: string,
+            fontStyle?: string;
+            fontSize?: string;
+            fontFamily?: string;
+            color?: string;
+            align?: string;
             wordWrap?: {
-                width: number,
-                useAdvancedWrap?: boolean
-            }
+                width: number;
+                useAdvancedWrap?: boolean;
+            };
         } = {};
         if (object.text.italic) {
-            options.fontStyle = 'italic';
+            options.fontStyle = "italic";
         }
         // Note: there is no support for "strikeout" and "underline"
         let fontSize: number = 16;
         if (object.text.pixelsize) {
             fontSize = object.text.pixelsize;
         }
-        options.fontSize = fontSize + 'px';
+        options.fontSize = fontSize + "px";
         if (object.text.fontfamily) {
-            options.fontFamily = '"'+object.text.fontfamily+'"';
+            options.fontFamily = '"' + object.text.fontfamily + '"';
         }
-        let color = '#000000';
+        if (object.properties !== undefined) {
+            for (const property of object.properties) {
+                if (property.name === "font-family" && typeof property.value === "string") {
+                    options.fontFamily = property.value;
+                }
+            }
+        }
+        let color = "#000000";
         if (object.text.color !== undefined) {
             color = object.text.color;
         }
@@ -38,7 +46,7 @@ export class TextUtils {
             options.wordWrap = {
                 width: object.width,
                 //useAdvancedWrap: true
-            }
+            };
         }
         if (object.text.halign !== undefined) {
             options.align = object.text.halign;

maps/tests/jitsi_custom_url.json

@@ -58,11 +58,17 @@
                  "height":94.6489098314831,
                  "id":1,
                  "name":"",
+                 "properties":[
+                        {
+                         "name":"font-family",
+                         "type":"string",
+                         "value":"\"Press Start 2P\""
+                        }],
                  "rotation":0,
                  "text":
                     {
                      "fontfamily":"Sans Serif",
-                     "pixelsize":11,
+                     "pixelsize":8,
                      "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens on meet.jit.si (check this in the network tab). Note: this test only makes sense if the default configured Jitsi instance is NOT meet.jit.si  (check your .env file)",
                      "wrap":true
                     },