From 315fe7ca82b3674d07136d7a96233d827804d177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Thu, 29 Jul 2021 17:49:51 +0200 Subject: [PATCH] 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 | 35 +++++++++++++++++++++ front/src/Phaser/Components/TextUtils.ts | 40 ++++++++++++++---------- maps/tests/jitsi_custom_url.json | 8 ++++- 3 files changed, 66 insertions(+), 17 deletions(-) create mode 100644 docs/maps/text.md diff --git a/docs/maps/text.md b/docs/maps/text.md new file mode 100644 index 00000000..df3b2660 --- /dev/null +++ b/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. + +
+
+ +
The "font-family" property
+
+
diff --git a/front/src/Phaser/Components/TextUtils.ts b/front/src/Phaser/Components/TextUtils.ts index 972c50c7..e9cb9260 100644 --- a/front/src/Phaser/Components/TextUtils.ts +++ b/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; diff --git a/maps/tests/jitsi_custom_url.json b/maps/tests/jitsi_custom_url.json index 637796a1..855582ff 100644 --- a/maps/tests/jitsi_custom_url.json +++ b/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 },