315fe7ca82
- 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.
59 lines
2 KiB
TypeScript
59 lines
2 KiB
TypeScript
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.");
|
|
}
|
|
const options: {
|
|
fontStyle?: string;
|
|
fontSize?: string;
|
|
fontFamily?: string;
|
|
color?: string;
|
|
align?: string;
|
|
wordWrap?: {
|
|
width: number;
|
|
useAdvancedWrap?: boolean;
|
|
};
|
|
} = {};
|
|
if (object.text.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";
|
|
if (object.text.fontfamily) {
|
|
options.fontFamily = '"' + object.text.fontfamily + '"';
|
|
}
|
|
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;
|
|
}
|
|
options.color = color;
|
|
if (object.text.wrap === true) {
|
|
options.wordWrap = {
|
|
width: object.width,
|
|
//useAdvancedWrap: true
|
|
};
|
|
}
|
|
if (object.text.halign !== undefined) {
|
|
options.align = object.text.halign;
|
|
}
|
|
|
|
const textElem = scene.add.text(object.x, object.y, object.text.text, options);
|
|
textElem.setAngle(object.rotation);
|
|
}
|
|
}
|