Skip to content
filedom
Esc
↑↓navigate↵open⌘Jpreview
On this page

Text

Shows or hides a block of laid-out text tiles.

import { Text, textTiles } from 'filedom';

const banner = textTiles(['YOU WIN'], { kind: 'sliced' }, iconSize);

<Text tiles={banner} at={won ? { x: 480, y: 320 } : null} />

Render Text inside a Stage. Text only handles layout. textTiles decides what the tiles are, and Text places them around an origin as ordinary Sprites.

Props

PropType
tilesTextBlock

A laid-out block from textTiles or stripTiles.

TypeTextBlock
atStagePoint | null

Block center; null hides it.

TypeStagePoint | null
anchor?"center" | "bottom"

What `at` names: the block center (default) or the center of its bottom edge.

Type"center" | "bottom"
onDemand?boolean

Create the tiles on show so they draw over user-dragged icons, instead of minting them at mount. See Sprite.

Typeboolean

Shapes

textTiles(lines, shape, iconSize) returns { tiles, width, height }. The glyphs and sliced shapes uppercase the text. The shape sets how large the text reads and how many files it costs:

Shape Tiles Reads
{ kind: 'sliced', charsPerTile? } one per 3 characters, or charsPerTile a kerned line, used for banners and help
{ kind: 'glyphs', boxed? } one per character largest and widest
{ kind: 'grid', charsPerCell, linesPerCell, paintedFraction? } one per cell a dense block, fewest files

stripTiles(rows, iconSize) lays out tiles you baked yourself, one array per line.

Tiles own their files

Every tile is a static sprite with one file of its own, minted at mount in the order the tiles are written (row-major). A block’s overlaps, such as the boxed band or the grid’s bleed, depend on that creation order. Pooled files of one face are created together and handed out in any order, so a repeated letter or a blank cell could get an older file and have its ink covered by a neighbour.

Text needs no prebake entry, since prebake only sizes pooled piles.

onDemand controls z. Static tiles are minted at mount, so an icon the user drags later draws over them. On-demand tiles are created at their positions on every show (about 15ms a tile), so they are the newest files on the desktop. Use onDemand in drag-driven games. With at={null}, static tiles wait at the park and on-demand tiles are deleted.

Anchoring

anchor="bottom" puts the center of the block’s bottom edge on at. Use it to pin a help panel clear of a play area:

<Text
  tiles={textTiles(lines, { kind: 'grid', charsPerCell: 3, linesPerCell: 2 }, iconSize)}
  anchor="bottom"
  at={showHelp ? { x: width / 2, y: height - iconSize * 0.7 } : null}
/>

Was this page helpful?