Sprites.Grid

Sprites.Grid.Two.At Sprites.Reactive.Value

Sprites.Grid.Two.At(grid, col, row)

The cell of a grid at a column and a row, or undefined outside the grid. Each may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the cell.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [1, 2, 3, 4, 5, 6] });
const col = Sprites.Reactive.Value(0);
const row = Sprites.Reactive.Value(0);
const cell = Sprites.Grid.Two.At(grid, col, row);
Sprites.Ui.Input.Number(col, 0, 2);
Sprites.Ui.Input.Number(row, 0, 1);
Sprites.Ui.Dom.Text(' cell = ', cell);

Sprites.Grid.Two.Blank Sprites.Reactive.Value

Sprites.Grid.Two.Blank(width, height, fill)

A blank grid of a width and height, every cell the fill element, packed in row order. Each argument may be a constant or a reactive value, so the grid follows them.

Returns a read-only Sprites.Reactive.Value holding the blank grid.

const width = Sprites.Reactive.Value(3);
const grid = Sprites.Grid.Two.Blank(width, 2, 0);
Sprites.Ui.Input.Number(width, 1, 5);
const cells = Sprites.Object.Field(grid, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.FillRect Sprites.Reactive.Value

Sprites.Grid.Two.FillRect(grid, col, row, rectWidth, rectHeight, value)

A grid with a rectangle filled to a value: rectWidth by rectHeight cells from the top left at column, row, clipped to the grid. Returns the same grid when nothing inside changes, so an unchanged fill writes nothing. Each argument may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the grid with the rectangle filled.

const grid = Sprites.Reactive.Value({ w: 3, h: 3, cells: [0, 0, 0, 0, 0, 0, 0, 0, 0] });
const size = Sprites.Reactive.Value(2);
const filled = Sprites.Grid.Two.FillRect(grid, 0, 0, size, size, 1);
Sprites.Ui.Input.Number(size, 1, 3);
const cells = Sprites.Object.Field(filled, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.Flatten Sprites.Reactive.Value

Sprites.Grid.Two.Flatten(layers, width, height)

A single grid flattened from a stack of layers, each { pixels, visible }, bottom to top. Every layer shares the width and height. For each cell the topmost shown layer with a value there wins, and a value that is undefined lets the layers below show through, so the result is what the stack looks like composited. A hidden layer, visible false, is skipped. A primitive: one Calculate over a raw loop.

Returns a read-only Sprites.Reactive.Value holding the flattened { w, h, cells } grid.

const bottom = { pixels: [1, 1, 1, 1, 1, 1, 1, 1], visible: true };
const top = { pixels: [undefined, 2, 2, undefined, undefined, undefined, undefined, undefined], visible: true };
const layers = Sprites.Reactive.Value([bottom, top]);
const merged = Sprites.Grid.Two.Flatten(layers, 4, 2);
const cells = Sprites.Object.Field(merged, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text('cells = ', joined);

Sprites.Grid.Two.Height Sprites.Reactive.Value

Sprites.Grid.Two.Height(grid)

The height of a grid, the rows down. Read only; use HeightBinding to resize.

Returns a read-only Sprites.Reactive.Value holding the height.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [1, 2, 3, 4, 5, 6] });
const height = Sprites.Grid.Two.Height(grid);
const resize = Sprites.Grid.Two.HeightBinding(grid, 0);
Sprites.Ui.Input.Number(resize, 1, 6);
Sprites.Ui.Dom.Text(' height = ', height);

Sprites.Grid.Two.HeightBinding Sprites.Reactive.Value

Sprites.Grid.Two.HeightBinding(grid, paddingElement)

A two way binding to a grid's height. Read, it is the rows down; set, it resizes the grid to that height, cropping or padding rows with the padding element, and writes the new grid back. Every set is valid, so it is always settable.

Returns a two-way Sprites.Reactive.Value over the grid's height.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [1, 2, 3, 4, 5, 6] });
const height = Sprites.Grid.Two.HeightBinding(grid, 0);
Sprites.Ui.Input.Number(height, 1, 6);
const cells = Sprites.Object.Field(grid, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.Map Sprites.Reactive.Value

Sprites.Grid.Two.Map(grid, map)

A grid with a plain map applied to each cell, keeping the width and height. Map is a plain function of a cell and its index, run for each cell, so a whole-grid recolour or wrap is one pass. The grid may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the mapped grid.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [1, 2, 3, 4, 5, 6] });
const doubled = Sprites.Grid.Two.Map(grid, (cell) => cell * 2);
const cells = Sprites.Object.Field(doubled, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text('cells = ', joined);

Sprites.Grid.Two.Resize Sprites.Reactive.Value

Sprites.Grid.Two.Resize(grid, width, height, paddingElement)

A grid cropped or padded to a new width and height, keeping the cells that still fit and filling the new area with the padding element. The cells stay packed in row order. It is read only; use WidthBinding or HeightBinding to write a resize back.

Returns a read-only Sprites.Reactive.Value holding the resized grid.

const grid = Sprites.Reactive.Value({ w: 2, h: 2, cells: [1, 2, 3, 4] });
const width = Sprites.Reactive.Value(3);
const resized = Sprites.Grid.Two.Resize(grid, width, 2, 0);
Sprites.Ui.Input.Number(width, 1, 5);
const cells = Sprites.Object.Field(resized, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.Set Sprites.Reactive.Value

Sprites.Grid.Two.Set(grid, col, row, value)

A grid with one cell set to a value, at a column and a row. Returns the same grid when the cell falls outside or already holds the value, so an unchanged set writes nothing. Each argument may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the grid with the one cell set.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [0, 0, 0, 0, 0, 0] });
const col = Sprites.Reactive.Value(0);
const next = Sprites.Grid.Two.Set(grid, col, 0, 1);
Sprites.Ui.Input.Number(col, 0, 2);
const cells = Sprites.Object.Field(next, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.Width Sprites.Reactive.Value

Sprites.Grid.Two.Width(grid)

The width of a grid, the columns across. Read only; use WidthBinding to resize.

Returns a read-only Sprites.Reactive.Value holding the width.

const grid = Sprites.Reactive.Value({ w: 3, h: 2, cells: [1, 2, 3, 4, 5, 6] });
const width = Sprites.Grid.Two.Width(grid);
const resize = Sprites.Grid.Two.WidthBinding(grid, 0);
Sprites.Ui.Input.Number(resize, 1, 6);
Sprites.Ui.Dom.Text(' width = ', width);

Sprites.Grid.Two.WidthBinding Sprites.Reactive.Value

Sprites.Grid.Two.WidthBinding(grid, paddingElement)

A two way binding to a grid's width. Read, it is the columns across; set, it resizes the grid to that width, cropping or padding columns with the padding element, and writes the new grid back. Every set is valid, so it is always settable.

Returns a two-way Sprites.Reactive.Value over the grid's width.

const grid = Sprites.Reactive.Value({ w: 2, h: 2, cells: [1, 2, 3, 4] });
const width = Sprites.Grid.Two.WidthBinding(grid, 0);
Sprites.Ui.Input.Number(width, 1, 6);
const cells = Sprites.Object.Field(grid, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Two.Default Sprites.Reactive.Value

Sprites.Grid.Two.Default(grid, fallback)

A grid with each absent cell, undefined, replaced by the fallback, keeping every set cell. So a per cell attribute reads its own value, or the default where it holds none. A primitive: one Calculate over a raw map, in one node, so a change recomputes the array once rather than one node per cell.

Returns a read-only Sprites.Reactive.Value holding the filled grid.

Sprites.Grid.Two.FillAcross Sprites.Reactive.Value

Sprites.Grid.Two.FillAcross(grid, fallback)

A grid with each row filled across from the left: an absent cell, undefined, takes the value of the nearest set cell to its left in the same row, and the fallback when the row holds none to its left. So an attribute set once on a row holds along it until another overrides it, the inline attribute rule a serial text mode follows. A primitive: one Calculate over a raw loop.

Returns a read-only Sprites.Reactive.Value holding the filled grid.

Sprites.Grid.Two.Tile Sprites.Reactive.Value

Sprites.Grid.Two.Tile(indices, atlas, tileWidth, tileHeight, fill)

A large grid tiled from a grid of indices and an atlas of tiles. Each index cell places its tile, a flat list of tileWidth by tileHeight cells, into that block of the output, so an index grid of w by h becomes a cell grid of w times tileWidth by h times tileHeight. An index that is absent or past the atlas places a block of the fill. A primitive: one Calculate over a raw loop, the base of a character or tile screen.

Returns a read-only Sprites.Reactive.Value holding the tiled grid.

Sprites.Grid.Two.Choose Sprites.Reactive.Value

Sprites.Grid.Two.Choose(mask, on, off)

A grid built cell by cell from a mask grid and two grids of the same size: where the mask cell is set the output takes the on grid's cell, and where it is clear the off grid's cell. So a one bit glyph mask picks the ink colour where a pixel is set and the paper colour where it is clear. A primitive: one Calculate over a raw loop.

Returns a read-only Sprites.Reactive.Value holding the chosen grid.

Sprites.Grid.Two.Stretch Sprites.Reactive.Value

Sprites.Grid.Two.Stretch(grid, newWidth, newHeight)

A grid scaled to a new width and height by nearest-neighbour sampling, keeping the cells packed in row order. Each output cell takes the source cell nearest its position, so doubling a side repeats each row or column, which stretches a wide-pixel or tall-pixel sprite to square image pixels. Each argument may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the stretched grid.

const grid = Sprites.Reactive.Value({ w: 2, h: 2, cells: [1, 2, 3, 4] });
const width = Sprites.Reactive.Value(4);
const big = Sprites.Grid.Two.Stretch(grid, width, 2);
Sprites.Ui.Input.Number(width, 2, 6);
const cells = Sprites.Object.Field(big, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.At Sprites.Reactive.Value

Sprites.Grid.Three.At(volume, x, y, z)

The cell of a volume at an x, a y and a z, or undefined outside the volume. Each may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the cell.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [1, 2, 3, 4, 5, 6, 7, 8] });
const x = Sprites.Reactive.Value(0);
const y = Sprites.Reactive.Value(0);
const z = Sprites.Reactive.Value(0);
const cell = Sprites.Grid.Three.At(volume, x, y, z);
Sprites.Ui.Input.Number(x, 0, 1);
Sprites.Ui.Input.Number(y, 0, 1);
Sprites.Ui.Input.Number(z, 0, 1);
Sprites.Ui.Dom.Text(' cell = ', cell);

Sprites.Grid.Three.Blank Sprites.Reactive.Value

Sprites.Grid.Three.Blank(width, height, depth, fill)

A blank volume of a width, height and depth, every cell the fill element, packed in x, then y, then z order. It mirrors Sprites.Grid.Two.Blank one dimension up. Each argument may be a constant or a reactive value, so the volume follows them.

Returns a read-only Sprites.Reactive.Value holding the blank volume.

const depth = Sprites.Reactive.Value(2);
const volume = Sprites.Grid.Three.Blank(2, 2, depth, 0);
Sprites.Ui.Input.Number(depth, 1, 4);
const cells = Sprites.Object.Field(volume, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.Depth Sprites.Reactive.Value

Sprites.Grid.Three.Depth(volume)

The depth of a volume, the slices along the z axis. Read only; use DepthBinding to resize.

Returns a read-only Sprites.Reactive.Value holding the depth.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [1, 2, 3, 4, 5, 6, 7, 8] });
const depth = Sprites.Grid.Three.Depth(volume);
const resize = Sprites.Grid.Three.DepthBinding(volume, 0);
Sprites.Ui.Input.Number(resize, 1, 5);
Sprites.Ui.Dom.Text(' depth = ', depth);

Sprites.Grid.Three.DepthBinding Sprites.Reactive.Value

Sprites.Grid.Three.DepthBinding(volume, paddingElement)

A two way binding to a volume's depth. Read, it is the slices along z; set, it resizes the volume to that depth, cropping or padding slices with the padding element, and writes the new volume back. Every set is valid, so it is always settable.

Returns a two-way Sprites.Reactive.Value over the volume's depth.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 1, cells: [1, 2, 3, 4] });
const depth = Sprites.Grid.Three.DepthBinding(volume, 0);
Sprites.Ui.Input.Number(depth, 1, 4);
const cells = Sprites.Object.Field(volume, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.Height Sprites.Reactive.Value

Sprites.Grid.Three.Height(volume)

The height of a volume, the rows down the y axis. Read only; use HeightBinding to resize.

Returns a read-only Sprites.Reactive.Value holding the height.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [1, 2, 3, 4, 5, 6, 7, 8] });
const height = Sprites.Grid.Three.Height(volume);
const resize = Sprites.Grid.Three.HeightBinding(volume, 0);
Sprites.Ui.Input.Number(resize, 1, 5);
Sprites.Ui.Dom.Text(' height = ', height);

Sprites.Grid.Three.HeightBinding Sprites.Reactive.Value

Sprites.Grid.Three.HeightBinding(volume, paddingElement)

A two way binding to a volume's height. Read, it is the rows down; set, it resizes the volume to that height, cropping or padding rows with the padding element, and writes the new volume back. Every set is valid, so it is always settable.

Returns a two-way Sprites.Reactive.Value over the volume's height.

const volume = Sprites.Reactive.Value({ w: 2, h: 1, d: 1, cells: [1, 2] });
const height = Sprites.Grid.Three.HeightBinding(volume, 0);
Sprites.Ui.Input.Number(height, 1, 4);
const cells = Sprites.Object.Field(volume, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.Resize Sprites.Reactive.Value

Sprites.Grid.Three.Resize(volume, width, height, depth, paddingElement)

A volume cropped or padded to a new width, height and depth, keeping the cells that still fit and filling the new space with the padding element. The cells stay packed in x, then y, then z order. It is read only; use a side binding to write a resize back.

Returns a read-only Sprites.Reactive.Value holding the resized volume.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 1, cells: [1, 2, 3, 4] });
const depth = Sprites.Reactive.Value(2);
const resized = Sprites.Grid.Three.Resize(volume, 2, 2, depth, 0);
Sprites.Ui.Input.Number(depth, 1, 4);
const cells = Sprites.Object.Field(resized, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.Width Sprites.Reactive.Value

Sprites.Grid.Three.Width(volume)

The width of a volume, the columns across the x axis. Read only; use WidthBinding to resize.

Returns a read-only Sprites.Reactive.Value holding the width.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [1, 2, 3, 4, 5, 6, 7, 8] });
const width = Sprites.Grid.Three.Width(volume);
const resize = Sprites.Grid.Three.WidthBinding(volume, 0);
Sprites.Ui.Input.Number(resize, 1, 5);
Sprites.Ui.Dom.Text(' width = ', width);

Sprites.Grid.Three.WidthBinding Sprites.Reactive.Value

Sprites.Grid.Three.WidthBinding(volume, paddingElement)

A two way binding to a volume's width. Read, it is the columns across; set, it resizes the volume to that width, cropping or padding columns with the padding element, and writes the new volume back. Every set is valid, so it is always settable.

Returns a two-way Sprites.Reactive.Value over the volume's width.

const volume = Sprites.Reactive.Value({ w: 1, h: 2, d: 1, cells: [1, 2] });
const width = Sprites.Grid.Three.WidthBinding(volume, 0);
Sprites.Ui.Input.Number(width, 1, 4);
const cells = Sprites.Object.Field(volume, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Sprites.Grid.Three.Map Sprites.Reactive.Value

Sprites.Grid.Three.Map(volume, map)

A volume with a map applied to each cell, keeping the width, height and depth, as a reactive volume that follows the source. map is a reactive function of a cell value and its index, the same shape Sprites.Grid.Two.Map takes. The volume may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the mapped volume.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [1, 2, 3, 4, 5, 6, 7, 8] });
const doubled = Sprites.Grid.Three.Map(volume, (cell) => {
  return Sprites.Maths.Multiply(cell, 2);
});
const cells = Sprites.Object.Field(doubled, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text('cells = ', joined);

Sprites.Grid.Three.Set Sprites.Reactive.Value

Sprites.Grid.Three.Set(volume, x, y, z, value)

A volume with one cell set to a value, at an x, a y and a z. Returns the same volume when the cell falls outside the volume or already holds the value, so an unchanged set writes nothing. It mirrors Sprites.Grid.Two.Set one dimension up. Each argument may be a constant or a reactive value. It is read only.

Returns a read-only Sprites.Reactive.Value holding the volume with the one cell set.

const volume = Sprites.Reactive.Value({ w: 2, h: 2, d: 2, cells: [0, 0, 0, 0, 0, 0, 0, 0] });
const z = Sprites.Reactive.Value(0);
const next = Sprites.Grid.Three.Set(volume, 0, 0, z, 1);
Sprites.Ui.Input.Number(z, 0, 1);
const cells = Sprites.Object.Field(next, 'cells');
const joined = Sprites.Text.Join(cells, ', ');
Sprites.Ui.Dom.Text(' cells = ', joined);

Tiled

A large two dimensional pixel block held as a grid of fixed square tiles, for a high resolution image. A { w, h, tile, tiles } grid: w and h are the pixel size, tile the side of one square tile, and tiles a flat list, in row order over the tile grid, of one Uint32Array per tile, each of tile times tile packed RGBA colours. A pixel is one packed RGBA integer, r highest and a lowest, the same packing Sprites.Colour uses; a fully transparent pixel, alpha zero, is the absent pixel. Editing copies only the tiles a change touches, so a paint on a million pixel image is one small tile copy, not a million cell copy.

Sprites.Grid.Tiled.Width Sprites.Reactive.Value

Sprites.Grid.Tiled.Width(grid)

The pixel width of a tiled grid, the columns across. Read only; use Resize to change it.

Returns a read-only Sprites.Reactive.Value holding the pixel width.

const width = Sprites.Reactive.Value(40);
const grid = Sprites.Grid.Tiled.Blank(width, 24, 16, 0);
const read = Sprites.Grid.Tiled.Width(grid);
Sprites.Ui.Input.Slider(width, 16, 64);
Sprites.Ui.Dom.Text(' width = ', read);

Sprites.Grid.Tiled.Height Sprites.Reactive.Value

Sprites.Grid.Tiled.Height(grid)

The pixel height of a tiled grid, the rows down. Read only; use Resize to change it.

Returns a read-only Sprites.Reactive.Value holding the pixel height.

const height = Sprites.Reactive.Value(24);
const grid = Sprites.Grid.Tiled.Blank(40, height, 16, 0);
const read = Sprites.Grid.Tiled.Height(grid);
Sprites.Ui.Input.Slider(height, 16, 64);
Sprites.Ui.Dom.Text(' height = ', read);

Sprites.Grid.Tiled.Tile Sprites.Reactive.Value

Sprites.Grid.Tiled.Tile(grid)

The tile side of a tiled grid, the square block size the tiles are cut into. Read only.

Returns a read-only Sprites.Reactive.Value holding the tile side.

const tile = Sprites.Reactive.Value(8);
const grid = Sprites.Grid.Tiled.Blank(32, 32, tile, 0);
const read = Sprites.Grid.Tiled.Tile(grid);
Sprites.Ui.Input.Slider(tile, 4, 16);
Sprites.Ui.Dom.Text(' tile = ', read);

Sprites.Grid.Tiled.Blank Sprites.Reactive.Value

Sprites.Grid.Tiled.Blank(width, height, tile, fill)

A blank tiled grid of a pixel width and height, cut into tile by tile squares, every pixel the fill colour, a packed RGBA integer. Pass zero as the fill for a fully transparent block. Each argument may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the blank tiled grid.

const fill = Sprites.Reactive.Value(0xff4444ff);
const grid = Sprites.Grid.Tiled.Blank(32, 32, 16, fill);
const pixel = Sprites.Grid.Tiled.At(grid, 0, 0);
Sprites.Ui.Button.SetValue(fill, 0x4444ffff, 'Make it blue');
Sprites.Ui.Dom.Text(' top left pixel = ', pixel);

Sprites.Grid.Tiled.At Sprites.Reactive.Value

Sprites.Grid.Tiled.At(grid, col, row)

The pixel at a column and a row, a packed RGBA integer, or undefined outside the grid. Read only; to change a pixel build the new grid with FillRect or Stamp and set the grid. Each argument may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the packed pixel.

const blank = Sprites.Grid.Tiled.Blank(32, 32, 16, 0);
const grid = Sprites.Grid.Tiled.FillRect(blank, 0, 0, 10, 10, 0xff4444ff);
const col = Sprites.Reactive.Value(0);
const pixel = Sprites.Grid.Tiled.At(grid, col, 0);
Sprites.Ui.Input.Slider(col, 0, 20);
Sprites.Ui.Dom.Text(' pixel = ', pixel);

Sprites.Grid.Tiled.FillRect Sprites.Reactive.Value

Sprites.Grid.Tiled.FillRect(grid, col, row, rectWidth, rectHeight, value)

A tiled grid with a rectangle filled to a packed RGBA colour: rectWidth by rectHeight pixels from the top left at col, row, clipped to the grid. Only the tiles the rectangle touches are copied, each once. Returns the same grid when nothing inside it changes, so an unchanged fill writes nothing. Each argument may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the grid with the rectangle filled.

const blank = Sprites.Grid.Tiled.Blank(32, 32, 16, 0);
const size = Sprites.Reactive.Value(8);
const filled = Sprites.Grid.Tiled.FillRect(blank, 0, 0, size, size, 0xff4444ff);
const corner = Sprites.Grid.Tiled.At(filled, 6, 6);
Sprites.Ui.Input.Slider(size, 2, 16);
Sprites.Ui.Dom.Text(' pixel at 6,6 = ', corner);

Sprites.Grid.Tiled.Stamp Sprites.Reactive.Value

Sprites.Grid.Tiled.Stamp(grid, col, row, source)

A tiled grid with a source block stamped into it at a column and a row. source is a { w, h, cells } row order grid of packed RGBA colours, a cell of undefined leaving the grid below it, so a picked sprite lands with its transparent pixels see through. Only the tiles the stamp touches are copied. Returns the same grid when nothing changes.

Returns a read-only Sprites.Reactive.Value holding the grid with the source stamped in.

const blank = Sprites.Grid.Tiled.Blank(32, 32, 16, 0);
const source = { w: 2, h: 2, cells: [0xff4444ff, 0xff4444ff, 0xff4444ff, 0xff4444ff] };
const col = Sprites.Reactive.Value(4);
const stamped = Sprites.Grid.Tiled.Stamp(blank, col, 4, source);
const pixel = Sprites.Grid.Tiled.At(stamped, 5, 5);
Sprites.Ui.Input.Slider(col, 0, 10);
Sprites.Ui.Dom.Text(' pixel at 5,5 = ', pixel);

Sprites.Grid.Tiled.Resize Sprites.Reactive.Value

Sprites.Grid.Tiled.Resize(grid, width, height, paddingColour)

A tiled grid cropped or padded to a new pixel width and height, keeping the pixels that still fit and filling the new area with the padding colour, a packed RGBA integer. Returns the same grid when the size does not change. Each argument may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the resized tiled grid.

const blank = Sprites.Grid.Tiled.Blank(16, 16, 16, 0xff4444ff);
const width = Sprites.Reactive.Value(24);
const resized = Sprites.Grid.Tiled.Resize(blank, width, 16, 0);
const pixel = Sprites.Grid.Tiled.At(resized, 20, 0);
Sprites.Ui.Input.Slider(width, 16, 32);
Sprites.Ui.Dom.Text(' pixel at 20,0 = ', pixel);

Sprites.Grid.Tiled.Flatten Sprites.Reactive.Value

Sprites.Grid.Tiled.Flatten(layers, width, height, tile)

A single tiled grid flattened from a stack of layers, each { tiles, visible }, bottom to top. Every layer shares the width, height and tile. For each pixel the topmost shown layer with a non transparent pixel there wins, and a transparent pixel, alpha zero, lets the layers below show through. A hidden layer, visible false, is skipped.

Returns a read-only Sprites.Reactive.Value holding the flattened tiled grid.

const bottom = Sprites.Grid.Tiled.Blank(16, 16, 16, 0xff4444ff);
const topFull = Sprites.Grid.Tiled.FillRect(Sprites.Grid.Tiled.Blank(16, 16, 16, 0), 0, 0, 8, 16, 0x4444ffff);
const bottomTiles = Sprites.Object.Field(bottom, 'tiles');
const topTiles = Sprites.Object.Field(topFull, 'tiles');
const topOn = Sprites.Reactive.Value(true);
const bottomLayer = Sprites.Reactive.ReadOnly({ tiles: bottomTiles, visible: true });
const topLayer = Sprites.Reactive.ReadOnly({ tiles: topTiles, visible: topOn });
const layers = [bottomLayer, topLayer];
const flat = Sprites.Grid.Tiled.Flatten(layers, 16, 16, 16);
const pixel = Sprites.Grid.Tiled.At(flat, 2, 2);
Sprites.Ui.Input.Checkbox(topOn);
Sprites.Ui.Dom.Text(' pixel at 2,2 = ', pixel);

Sprites.Grid.Tiled.ToTwo Sprites.Reactive.Value

Sprites.Grid.Tiled.ToTwo(grid)

A tiled grid flattened to a { w, h, cells } row order grid of packed RGBA colours, a transparent pixel, alpha zero, becoming undefined, so it feeds a thumbnail encoder the same way a sprite grid does. It reads every pixel, so a page runs it for a saved preview, not on every paint.

Returns a read-only Sprites.Reactive.Value holding the { w, h, cells } grid.

const blank = Sprites.Grid.Tiled.Blank(16, 16, 16, 0);
const size = Sprites.Reactive.Value(4);
const filled = Sprites.Grid.Tiled.FillRect(blank, 0, 0, size, size, 0xff4444ff);
const two = Sprites.Grid.Tiled.ToTwo(filled);
const cell = Sprites.Grid.Two.At(two, 2, 2);
Sprites.Ui.Input.Slider(size, 1, 8);
Sprites.Ui.Dom.Text(' cell at 2,2 = ', cell);

Sprites.Grid.Tiled.FromTwo Sprites.Reactive.Value

Sprites.Grid.Tiled.FromTwo(grid, tile)

A tiled grid packed from a { w, h, cells } row order grid of packed RGBA colours, cut into tile by tile squares, an undefined cell becoming transparent, alpha zero. It is the inverse of ToTwo, so a resolved flat screen, like an attribute image's, can feed the tiled canvas surface. A primitive: one Calculate over a raw loop. It reads every pixel, so a page runs it on a small screen, not a large one.

Returns a read-only Sprites.Reactive.Value holding the { w, h, tile, tiles } tiled grid.

const two = Sprites.Reactive.Value({ w: 4, h: 4, cells: [0xff4444ff, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 0x4444ffff] });
const tile = Sprites.Reactive.Value(2);
const tiled = Sprites.Grid.Tiled.FromTwo(two, tile);
const corner = Sprites.Grid.Tiled.At(tiled, 0, 0);
Sprites.Ui.Input.Slider(tile, 2, 4);
Sprites.Ui.Dom.Text(' top left pixel = ', corner);