Letter tiles and selection · Expansion packs · Phaser AE

What it does

A board lays tiles out as a grid (with holes for a shaped puzzle), a ring, a row or any points you give, and letters them from a typography font, baked once per letter so a letter that changes never lays text out again. Each tile has a state, and each state a colour, size and opacity in the style; changes ease rather than jump, and tiles pop, bounce, shake, turn over and glide on cue.

Selection comes in four gestures: touching tiles one after another, any tiles in any order with an elastic tail to the finger, a straight line snapped to eight directions, or taps. A tile joins only when the pointer comes near its middle, so a fast diagonal swipe does not catch the tile it passes, and going back onto the previous tile takes the last off. When the pointer lets go, the board asks your judge and animates the verdict: an accept bounces the tiles, flashes and throws sparks, and can stay on the board as a coloured highlight; a reject shakes and flashes red.

The selection is painted as one stroke through the tile centres, so its width, caps and joins always agree, and a sprite shader over it gives it an effect sized in tiles, not pixels: a soft glow, a neon tube, flames licking up off it, electric arcs crawling along it, a flowing rainbow, glitter or a highlighter pen, or a shader of your own.

Features

Four layouts — grid (with a mask for holes), ring, row and points, all centred where you say.
Five ready styles — cream, slate, candy, glass and ink, or your own shape, bevel, colours and states.
States you name — selected, found and the rest, plus your own (correct, present, absent), each eased in.
Four gestures — path, free, line and tap, with backtracking, a forgiving hit test and a length limit.
Your rules, its animation — canAdd decides each tile and judge each word; the board shows the answer.
One matched stroke — round joins and caps that always meet, with an elastic tail to the finger.
Eight stroke effects — clean, glow, neon, fire, electric, rainbow, sparkle and highlighter, or any sprite shader.
Kept highlights — found words stay, each in the next colour of a palette, as in a word search.
Tile animation — pop, bounce, shake, flip to a new letter or state, glide to a new layout or a shuffled order.
Reusable boards — relayout glides tiles to a new layout and size, adding and taking off tiles, so one board serves every word of a game.
Traced selections — trace plays a path tile by tile through the same judge: solvers, hints and typed words.
Particle bursts — sparks, confetti or stars from a found word's tiles when particles-2d is composed.

Good for

Letter grids, a trace through touching tiles with the rules' canExtend as canAdd.
Letter wheels, a ring of letters traced in any order, shuffled with arrange.
Word searches, straight-line selection and a coloured highlight for every word found.
Guessing games, rows that turn over to their marks and a keyboard of tap tiles that takes each letter's colour.
Racks and word builders, a row of tiles that pops each new letter in.
Crosswords, cells as points that turn over as words are found.

Make it yours

A board takes its layout, letters, style (a name or your own TileStyle with any states), layer and depth, selection mode and rules, stroke (effect, colour, width, opacity, elastic, dots) and entrance; board.stroke changes live. Effects are sprite shader definitions sized in tiles, so a game can copy one from STROKE_EFFECTS and change it.

Two materially different boards: a seven-by-seven grid of slate tiles in path mode with a fire stroke and wrapping edges allowed by canAdd; and a ring of six candy letters in free mode with a neon stroke and a soft elastic tail. A third is a row of tiles in tap mode, the keys of an on-screen keyboard.

A quick look

A letter grid's board, with the rules deciding:

const board = game.letterTiles.board({
    layout: { kind: 'grid', cols: 4, rows: 4, x: 400, y: 320, cell: 90 },
    letters: round.observation().tiles, style: 'cream',
    select: {
        mode: 'path',
        canAdd: (path, tile) => round.canExtend(path, tile),
        judge: path => round.trace(path).ok ? 'accept' : 'reject',
    },
    stroke: { effect: 'fire' },
});

Works with

typography — required: the letters are baked from its fonts.
sprite-shaders — required: the stroke effects are its shaders.
particles-2d — optional: bursts when a word is found.
word-guess, word-search, letter-grid and letter-wheel — the rules it draws in their demos.
english-words — the words behind any game it draws.

Good to know

It knows no rules; a board without a judge lets every selection fade.
Tiles are square in their layout; a wider key is a board of its own.
Letters appear when their font has arrived, and not at all in a headless run.
The stroke's shader runs over the board's area while a selection shows; on a slow device prefer clean or glow.

Changes

3.0.0-1 (2026-10-21)

Fixed: a relayout to fewer tiles no longer throws at the next draw when a highlight, a trace or a selection names a tile it takes off. Such a highlight goes, a trace through one stops unjudged, and a selection keeps its tiles before the first one taken off.
Fixed: setting a tile's letter or state, setLetters without flip and relayout's letters now win over a flip still to land that change, so a reused board never shows a letter from the last game. Added tile.flipping and tile.cancelFlip().
Fixed: tiles a relayout adds arrive one after another, stagger seconds apart (a new option, 0.03 by default), and every popping tile springs as it arrives, the first one included. Each new tile keeps its own entrance, so a fade fades in on a board that pops.
Improved: relayout and arrange ease each tile's size with its place instead of snapping it, and a duration of 0 moves the tiles at once.
Fixed: a relayout that changes a board's size no longer adds two stroke canvases every time. Boards reuse the pack's canvases, and a destroyed board's go to the next board that fits them.
Added: board.burst changes an accepted word's particles while playing, and burst in the board's options, a verdict or accept takes a particles-2d recipe of your own; a verdict or accept can name a preset for that word.
Improved: select, trace, accept, reject and highlight throw at once for an index that is not a tile of the board, and relayout and arrange for a negative or non-numeric duration.