Text and fonts

A Text draws its Value (several lines are fine) at its entity, Size world units a line, in its Color, lined up by its Align (centered on the entity, starting at it or ending at it). Its Vertical Align places its lines up and down: Middle (the default) centers them on the entity, so more lines grow up and down from it; Top hangs them from it, the first line’s top at the entity however many lines follow (a contract, a page, a log that grows downwards); Bottom stands them on it, the last line’s bottom there (a chat whose new lines push the old ones up). A Wrap Width (world units, before the transform’s scale, like Size) breaks its lines between words so none is wider, going by the font’s own letters, so 7 keeps a long sentence within 7 units across (a word wider than that has a line to itself); 0, the default, breaks lines only where the text does. A Top-aligned text with a Wrap Width is a block of text whose top left is its entity, with Align Left. A Background (a color; transparent, the default, draws none) puts a box just behind the text, as wide as its widest line and as tall as all of them as they’re drawn, so a label stays readable over a busy floor and the box grows and shrinks with its words (“IDLE”, then “UNLOADING C05-1 3/4”); Padding (world units, before the transform’s scale, like Size) is how far it reaches past the letters on every side. It follows Align, Vertical Align, Wrap Width, a HUD’s scale and the text’s Order, and is drawn with the text, under its letters. A Typewriter types out wrapped text where it will end up: a word doesn’t start at the end of one line and jump to the next as it’s typed. Scripts set VerticalAlign and WrapWidth on the Text like any other property, and drawing.Text takes vertical and wrapWidth for text a component draws itself. Its Font is a font file in Assets (.ttf, .otf or .ttc, such as Fonts/PressStart2P-Regular.ttf), which ships with the game and is read again when the file changes, or an installed font’s name (Consolas), or empty (or Selawik Semibold) for the built-in font, Selawik Semibold (Microsoft’s open-source stand-in for Segoe UI, which Griff’s text used before, with the same metrics). The Font field’s ▾ opens a font picker that shows each font’s name in its own face and groups them: first those safe to ship, which go with the game wherever it’s played (the built-in font; the free fonts that ship with Griff for games, Press Start 2P for pixel art, Atkinson Hyperlegible Bold, a clean sans made to be easy to read, Crimson Text SemiBold, a book serif, and JetBrains Mono Bold; and the project’s own font files), then, set apart under a warning, fonts only on this PC, which aren’t shipped, may be missing on players’ computers and draw in the built-in font in a browser. Picking a free font copies it and its license into Assets/Fonts (so does Art > Add Free Font, which also sets the selected text in it), from where the game ships it and its export’s notices name it; type a name or drop a font file from the Assets panel on the field too. A font named that’s nowhere (no such file in Assets, nothing installed by that name) is flagged in yellow, and both exports, desktop and web, warn of each installed font a scene or prefab still names and each font file Assets hasn’t got. Any component’s or script’s string property called Font, or ending in Font (TitleFont), or marked [Names(NameKind.Font)], gets the same picker. Griff reads fonts and rasterizes their glyphs itself, in plain .NET (Griff.Fonts, with StbTrueTypeSharp), so text draws the same in the editor, an exported game and a browser: each glyph is rasterized once, at 64 pixels a line, onto an atlas page, and text is drawn as one smoothed quad a glyph, so a score or a timer that changes every frame makes no garbage. A character the font hasn’t got comes from the built-in font, then from a part of DejaVu Sans Bold (arrows, shapes, symbols such as ♥, Greek and Cyrillic), then, on Windows, a glyph at a time from Windows’ own fonts on the player’s computer (Chinese, Japanese and Korean from Microsoft YaHei, Yu Gothic, Malgun Gothic or Microsoft JhengHei, the one for the computer’s language first; emoji from Segoe UI Emoji, in one color; other scripts from Segoe UI, Nirmala UI and the like), as WPF drew them: drawn there and never shipped, copied or baked. In a browser there are no installed fonts, so a character none of the game’s fonts has draws as the font’s missing-glyph box: for those, choose a font file that has them. An installed font is drawn from the player’s own computer and never copied into a game: on a computer without it, and always in a browser, the built-in font draws instead (the web export warns of each), so prefer font files.

Typewriter text

Add a Typewriter next to a Text and the text types itself out, Speed letters a second, pausing briefly at punctuation, with an optional blip Sound. Whenever a script changes the text, the new line types out from the start. It runs on real time, so it works in a paused game.