Draws frames, glows, colour fills or sprites over reel-grid cells and multi-cell spans, on top of the reel columns and without touching them. Browser only, inside the Pixi stage; it never reaches the RGS.
Cell Overlay is the visual half of Sticky Symbols, Expand Symbols, Hold And Win Grid and Locked Reels. Place it in the same Pixi container (or stage) as the Reel Column nodes, after them in the tree so it renders on top — or turn on Sort Children by Z on that parent and give the overlay a higher Z-Index. Its container takes no pointer events, so a highlight never steals a click from the symbol under it.
The geometry must match the Pixi Reel Controller. Cell Width, Cell Height, Cell Padding (the controller's row gap) and Column Padding (its column gap) are the controller's own values. Origin X and Origin Y are where column 0 and row 0 start inside the shared parent: with the controller's auto layout on, its centring offset (read column 0's X and Y); with auto layout off, the first column's own x and y.
Cell (row, col) covers x = originX + col * (cellWidth + columnPadding), y = originY + row * (cellHeight + cellPadding), size cellWidth x cellHeight. A span covers rows x cols cells including the gaps between them, anchored at its top-left cell. Positions are [row, col], 0-based and row first — the order Calculate Winnings and Cascade The Reels use.
Style picks how each cell or span is highlighted; the vector shapes are rounded by Corner Radius:
frame — a stroke of Thickness px drawn inside the cell edge, so it never spills onto a neighbour, with a brighter white core.glow — six translucent bands of Colour bleeding outward up to three times Thickness, plus the frame.fill — a wash of Colour at Fill Alpha across the cell, plus the frame. Fill Alpha applies to this style only.sprite — the image from Sprite Images keyed by the span's symbol, or by default for a plain cell, sized to the rectangle by Sprite Fit (contain letterboxes, cover crops). A missing image falls back to a frame and warns once in the console.
A span that carries a symbol draws its sprite under whichever style is active — a frame, glow or fill sits on top of the image — which is how an expanding symbol shows as one oversized image. Every redraw replaces everything drawn before it, so set Cells and Spans each round rather than accumulating them; Clear also forgets the current data, and Redraw draws it again. Pulse breathes the whole overlay between 45% and 100% of Alpha on the Pixi ticker at Pulse Speed cycles per second; the ticker is released when pulse is off, nothing is drawn, or the node unmounts.
The overlay does not hide or freeze the symbol beneath it. A fill or sprite covers the art only as far as its alpha allows, and the reel keeps spinning under a highlight. For a real lock the maths (Sticky Symbols, Hold And Win Grid) must keep the symbol in place, and the reel controller must be told not to spin that column.
Data
| Data | Description |
|---|
| Cells (array) | [row, col] pairs, 0-based, row first; { row, col } objects or a JSON string also work. Unusable positions are dropped. |
| Spans (array) | { row, col, rows, cols, symbol } rectangles anchored at their top-left cell; rows and cols default 1. Arrays [row, col, rows, cols, symbol] or a JSON string also work. |
| Sprite Images (object) | Map of symbol id to image URL, as an object or a JSON string. default serves plain cells in the sprite style. |
Grid
| Data | Description |
|---|
| Cell Width (number) | Width of one cell in px — the Pixi Reel Controller's value. Default 100, minimum 1. |
| Cell Height (number) | Height of one cell in px — the Pixi Reel Controller's value. Default 100, minimum 1. |
| Cell Padding (row gap) (number) | Vertical gap between rows in px — the controller's cellPadding. Default 0. |
| Column Padding (column gap) (number) | Horizontal gap between columns in px — the controller's columnPadding. Default 0. |
| Origin X (number) | X of column 0's left edge inside this node's parent container, in px. Default 0. |
| Origin Y (number) | Y of row 0's top edge inside this node's parent container, in px. Default 0. |
Style
| Data | Description |
|---|
| Style (enum) | How each cell or span is highlighted. Default frame; an unknown value falls back to it. Options: frame, glow, fill, sprite. |
| Colour (color) | Colour of the frame, glow and fill, as a hex string such as #FFD700. Default #FFD700. |
| Thickness (number) | Frame stroke width in px; the glow bleeds three times this far outward. Default 4, minimum 0. |
| Alpha (number) | Opacity of the whole overlay, 0..1; while pulsing the ticker drives it. Default 1. |
| Fill Alpha (number) | Opacity of the colour wash in the fill style, 0..1; other styles ignore it. Default 0.25. |
| Corner Radius (number) | Corner rounding of the frame, glow and fill in px. Default 8, minimum 0. |
| Sprite Fit (enum) | How a sprite is sized to its rectangle: letterboxed inside it, or cropped to fill it. Default contain. Options: cover, contain. |
Pulse
| Data | Description |
|---|
| Pulse (boolean) | Breathes the overlay's alpha on the Pixi ticker while something is drawn. Default off. |
| Pulse Speed (number) | Pulse cycles per second. Default 1, minimum 0. |
Appearance
| Data | Description |
|---|
| Z-Index (number) | Sort order among siblings; only applies when the parent has Sort Children by Z on, otherwise tree order decides. Default 0. |
| Visible (boolean) | Shows or hides the whole overlay. Default true. |
Actions
| Signal | Description |
|---|
| Clear | Forgets the current cells and spans and redraws empty; On Drawn still fires. |
| Redraw | Draws the current cells and spans again, for example after the layout changed. |
Outputs
General
| Data | Description |
|---|
| Container (object) | The overlay's PIXI.Container, for other Pixi nodes; it takes no pointer events. |
| Drawn Count (number) | Cells plus spans drawn by the last redraw; 0 after a clear. |
Events
| Signal | Description |
|---|
| On Drawn | Fires after every redraw, a clear included — read Drawn Count to tell them apart. |
Usage
- Drop Cell Overlay into the Pixi container that holds the Reel Column nodes, after them in the tree.
- Copy Cell Width, Cell Height, Cell Padding and Column Padding from the Pixi Reel Controller, and set Origin X / Origin Y to column 0's position inside that container.
- Wire the feature node's cell list into Cells, or its rectangles into Spans, then pick a Style and a Colour.
- For image highlights, fill Sprite Images with a map of symbol id to image URL and choose Sprite Fit.
- Feed fresh Cells / Spans every round, or fire Clear when the feature ends — each redraw replaces the last.