What it does
The pack paints one picture, ui-texture-paper, when it attaches. It builds the sheet from irregular facets at three
scales, each tilted its own way and lit its own shade, warped so none is a neat polygon, over a gentle roll, with fibres
and the odd speck. The tile wraps both ways with no visible join, and its tone is centred on mid grey, so under the ui
pack's default 'overlay' mode it shades the fill colour without lightening it overall. A ui style names it with
texture: 'paper', and a sprite can use the picture directly. A game carries it only when it composes the pack.
Features
- Crumpled facets — three scales of creases, lit from the top left, over a soft roll.
- Fibres and specks — a fine paper grain, from none to strong.
- Tiling and grey — repeats both ways with no join, and takes any colour from the style.
- Generated, not downloaded — painted once at startup;
paperTexture()gives the same RGBA bytes for tools and tests.
Good for
- Notes, letters and quest logs in adventure and RPG games.
- Treasure maps and parchment under a cream or tan fill.
- Scrapbook and doodle games, with panels like scraps of notepaper.
- Sprites and backgrounds that need a paper surface.
Make it yours
The options are name (the picture is ui-texture-<name>), size (the tile's side, 256 px), crumple (0 smooth to
1 balled up, 0.6 by default), fibres (0 to 1, 0.5) and seed, which changes the creases but not their kind. A
style then sets textureScale, textureStrength, textureAngle, textureMode and textureOn. Lightly crumpled paper
under a pale grey fill is a page from a notebook; balled-up paper under cream, with the texture on the rim too, is an
old letter.
A quick look
// manifest: … ui, ui-texture-paper
game.ui.panel({ w: 320, h: 200, style: { fill: '#f1e3c2', texture: 'paper', textureStrength: 0.8, radius: 6, border: 2, borderColor: '#8a6a3a' } });
game.spawn({ texture: 'ui-texture-paper', width: 128, height: 128 }); // or as a spriteWorks with
ui— reads it through a style's texture field.ui-texture-woodandui-texture-stone— the other generated textures, for planks and stone.
Good to know
- One texture per pack; for a second cut in the same game, paint
paperTexture()'s bytes under another name yourself. - It is generated on the main thread: a few tens of milliseconds at 256 px, four times that at 512.
- It is grey only, so under
textureMode: 'image'it shows as grey. - The atlas has no mipmaps, so keep
textureScalenear the texture's size or it shimmers in motion. Headless, the picture stays blank.
