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 },