Text
These examples draw text with drawText, using bitmap (pixel-grid) fonts and outline (.ttf/.otf) fonts.
| Example | What it shows |
|---|---|
| HelloText | a title that grows and shrinks, a multi-line caption, and the character set scrolling along the bottom (drawText, textSize/textAlign/textWidth) |
| PlaydateFont | an arcade attract screen drawn with a Playdate .fnt pixel font, loaded from a file bundled beside the sketch (BitmapFont(fntContentsOf:), textFont) |
| TypeAsGeometry | text as geometry: a real .ttf/.otf face drawn at display size, then the word's glyph outlines taken out as Shapes and changed two ways, rippled by a flow field and shaken by a seeded per-frame jitter (OutlineFont, textToShapes, Shape.mapPoints, randomSeed) |
| TextVolume | a wall of body text that fills the screen, redrawn every frame through the SDF glyph atlas with a brightness wave moving down the rows: the path for text at volume (textMode(.atlas)) |
| GlyphWave | each letter rising and falling on a traveling wave, tilting into the motion, with its own hue, drawn through the per-glyph drawText closure (drawText(_:at:) { g in … }, TextGlyph) |
| TextOnPath | a message laid along a wavy curve, each glyph rotated to the tangent and scrolling along it (drawText(_:along:offset:)) |
| TextBox | a paragraph wrapping inside a box whose width grows and shrinks, so the text reflows every frame across a line grid spaced by the font's leading (drawText(_:in:), word wrap + box alignment, textLeading) |
| VariableFont | a word changing shape through a variable font's weight and width axes, with a static weight ramp beneath it (OutlineFont.variation, weight) |
| StrokeText | single-line plotter type: Hershey pen paths stroked rather than filled, as a title that grows and shrinks plus a marquee moving on a wave (StrokeFont, strokeCap/strokeJoin) |
| TextMetrics | the metrics of a word drawn as marks (baseline, origin, ascent/descent bars, and bounding box) over a brightness ramp (textWidth/textAscent/textDescent/textBounds) |
| GlyphContours | a word's outline flattened to points and drawn three ways: a smooth curve, a polygon, and dots that shimmer like heat haze, each pushed sideways by a sine of its height, while the sample density rises and falls (textToShapes, drawCurve/drawPolygon/drawPoints) |
| Scripts | one specimen sheet in five scripts: Arabic right to left, Devanagari reordered, Thai with stacked marks, Japanese wrapped in a box with no spaces to break at, and an emoji drawn as the picture the font carries, plus one character that no installed face has, found before it draws (textDirection, per-piece drawText, fontsUsed(for:), textMissingCharacters) |
| Columns | the Pillow Book set down the page in columns that fill right to left, justified into its box, with the brackets and the comma using the sideways forms the font keeps for them (textDirection(.topToBottom), textJustify, box layout) |
| HangingStops | one passage in two identical boxes, each with a rule down its measured edge: in the right box, a full stop that would not fit sits past the rule instead of taking the character before it to the next line (textHangingPunctuation, box layout) |
| MongolianColumns | the other vertical script: columns that fill left to right, with the letters joined into one stroke, laid out by shaping the line across the page and then turning it a quarter turn (textDirection(.topToBottomLeftToRight), textBounds) |
Run one with swift run Example-Text-<Name>, for example swift run Example-Text-HelloText.