Sprites.Media.Sprite

Sprites.Media.Sprite.Browser Void

Sprites.Media.Sprite.Browser(hostId)

The media library browser: the live table of the user's saved sprites, with the sort and filter controls above and the pager below. It mounts into the host element as a column, reads the store, and stays live as sprites are saved here or in another tab, showing a spinner until the first read lands. The Sprite column carries a preview and the name, links both into the editor, and clips a long name; paging runs client side over the filtered list. One call builds the whole page.

Returns nothing.

Sprites.Media.Sprite.Browser('ex-media-sprite-browser');

Sprites.Media.Sprite.BrushBox Object

Sprites.Media.Sprite.BrushBox(col, row, radius)

The square a brush covers, centred on a pixel. radius 0 is one pixel, 1 is three by three, 2 is five by five. Returns the top left and the side.

Returns the { x, y, w, h } box, live going forward and a plain box inside a lens.

const box = Sprites.Media.Sprite.BrushBox(5, 5, 2);
const x = Sprites.Reactive.Field(box, 'x');
const y = Sprites.Reactive.Field(box, 'y');
const w = Sprites.Reactive.Field(box, 'w');
const h = Sprites.Reactive.Field(box, 'h');
Sprites.Ui.Dom.Text('x=', x, ' y=', y, ' w=', w, ' h=', h);

Sprites.Media.Sprite.BrushCursor Void

Sprites.Media.Sprite.BrushCursor(active, over, at, radius, aspect)

The brush preview: a square outline around the pixels the brush would paint, drawn in sprite space inside a Vector. Shown while active and the pointer is over the sprite.

Returns nothing.

const at = Sprites.Reactive.Value({ x: 3.5, y: 3.5 });
const radius = Sprites.Reactive.Value(1);
const width = Sprites.Reactive.Value(8);
const pan = Sprites.Reactive.Value({ x: 4, y: 4 });
const show = Sprites.Reactive.Value(10);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Ui.Image.Vector(pan, show, () => {
    Sprites.Media.Sprite.Grid(width, width, 1);
    Sprites.Media.Sprite.BrushCursor(true, true, at, radius, 1);
  });
});

Sprites.Media.Sprite.BrushCursorBox Object

Sprites.Media.Sprite.BrushCursorBox(at, aspect, radius)

The box of cells the brush covers, from the pointer. A composite: it reads the pointer's x and y, turns them into the centre column and row through Sprites.Maths, and hands those to BrushBox.

Returns the { x, y, w, h } box the brush covers.

const at = Sprites.Reactive.Value({ x: 6, y: 3 });
const box = Sprites.Media.Sprite.BrushCursorBox(at, 2, 1);
const x = Sprites.Reactive.Field(box, 'x');
const y = Sprites.Reactive.Field(box, 'y');
const w = Sprites.Reactive.Field(box, 'w');
const h = Sprites.Reactive.Field(box, 'h');
Sprites.Ui.Dom.Text('x=', x, ' y=', y, ' w=', w, ' h=', h);

Sprites.Media.Sprite.BrushCursorH Sprites.Reactive.Value

Sprites.Media.Sprite.BrushCursorH(box)

The height of the cursor box, in cells.

Returns a read-only Sprites.Reactive.Value, the box height.

const box = Sprites.Media.Sprite.BrushBox(3, 3, 1);
const h = Sprites.Media.Sprite.BrushCursorH(box);
Sprites.Ui.Dom.Text('BrushCursorH = ', h);

Sprites.Media.Sprite.BrushCursorW Sprites.Reactive.Value

Sprites.Media.Sprite.BrushCursorW(box, aspect)

The drawn width of the cursor box: its cell width stretched by the aspect. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the drawn width.

const box = Sprites.Media.Sprite.BrushBox(3, 3, 1);
const w = Sprites.Media.Sprite.BrushCursorW(box, 2);
Sprites.Ui.Dom.Text('BrushCursorW = ', w);

Sprites.Media.Sprite.BrushCursorX Sprites.Reactive.Value

Sprites.Media.Sprite.BrushCursorX(box, aspect)

The drawn left edge of the cursor box: its column stretched by the aspect. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the drawn left edge.

const box = Sprites.Media.Sprite.BrushBox(3, 3, 1);
const x = Sprites.Media.Sprite.BrushCursorX(box, 2);
Sprites.Ui.Dom.Text('BrushCursorX = ', x);

Sprites.Media.Sprite.BrushCursorY Sprites.Reactive.Value

Sprites.Media.Sprite.BrushCursorY(box)

The top edge of the cursor box, in cells.

Returns a read-only Sprites.Reactive.Value, the box top edge.

const box = Sprites.Media.Sprite.BrushBox(3, 3, 1);
const y = Sprites.Media.Sprite.BrushCursorY(box);
Sprites.Ui.Dom.Text('BrushCursorY = ', y);

Sprites.Media.Sprite.ClampSide Number

Sprites.Media.Sprite.ClampSide(n)

Clamp a side to the allowed range, as a whole number, between MinSide and MaxSide.

Returns the clamped whole number.

const side = Sprites.Media.Sprite.ClampSide(1000);
Sprites.Ui.Dom.Text('ClampSide(1000) = ', side);

Sprites.Media.Sprite.ColourPicker Void

Sprites.Media.Sprite.ColourPicker(visible, colour, bits, allowAlpha)

A modal wrapping Sprites.Colour.Picker. It edits a temp seeded from colour on open, so Select commits the temp to colour and Close discards it.

Returns nothing.

const orange = Sprites.Colour.FromHex('#ff8000');
const colour = Sprites.Reactive.Value(orange);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Edit colour');
Sprites.Media.Sprite.ColourPicker(visible, colour, 8, true);
const css = Sprites.Reactive.Calculate(() => {
  const packed = Sprites.Reactive.Get(colour);
  return Sprites.Colour.Css(packed);
});
Sprites.Ui.Dom.Text('css = ', css);

Sprites.Media.Sprite.Editor Object

Sprites.Media.Sprite.Editor(opts)

The sprite editor. Builds the view on the host, the pan and zoom overlay, and the Tools, Palette and Info windows. The Tools window switches its controls with the selected tool. opts.colours makes an indexed editor; left out, it is freeform. opts.modes lists the machine's sprite modes, each with a colour count, a pixel aspect and a size rule; the Info window picks the mode and the size. A mode with fewer colours wraps the pixels and the brush into range and shows a shorter palette. opts may also set width, height, pixelAspect, and state, tool or radius to share those values.

Each mode in opts.modes is { name, colours, pixelAspect } plus one size rule: allowedWidths and allowedHeights for two dropdowns, allowedSizes (an array of [width, height]) for one dropdown, or neither for typed width and height, bounded by minWidth, maxWidth, minHeight and maxHeight.

Returns the values it holds, so a page can read them.

const on = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(on, true, 'Launch editor');
Sprites.Reactive.If(on, () => {
  Sprites.Ui.Dom.Tag('div', () => {
    Sprites.Ui.Dom.Style('height', '260px');
    Sprites.Media.Sprite.Editor({ width: 16, height: 16 });
  });
});

Sprites.Media.Sprite.EmptyCells Array

Sprites.Media.Sprite.EmptyCells(w, h)

A fresh set of cells, all transparent. A flat array in row order, length w times h, every cell null.

Returns the cell array.

const cells = Sprites.Reactive.Get(Sprites.Media.Sprite.EmptyCells(4, 4));
const first = String(cells[0]);
Sprites.Ui.Dom.Text(cells.length, ' cells, all ', first);

Sprites.Media.Sprite.Grid Void

Sprites.Media.Sprite.Grid(width, height, aspect)

A thin line around every pixel, inside the sprite bounds, drawn inside a Vector. aspect widens the columns to match a wide-pixel view.

Returns nothing.

const width = Sprites.Reactive.Value(8);
const pan = Sprites.Reactive.Value({ x: 4, y: 4 });
const show = Sprites.Reactive.Value(10);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Ui.Image.Vector(pan, show, () => {
    Sprites.Media.Sprite.Grid(width, width, 1);
  });
});

Sprites.Media.Sprite.GridColumnX Sprites.Reactive.Value

Sprites.Media.Sprite.GridColumnX(k, aspect)

The drawn x of grid line k: its column stretched by the aspect. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the drawn x of the line.

const x = Sprites.Media.Sprite.GridColumnX(3, 2);
Sprites.Ui.Dom.Text('GridColumnX(3, 2) = ', x);

Sprites.Media.Sprite.GridRows Sprites.Reactive.Value

Sprites.Media.Sprite.GridRows(height)

The count of grid lines down the height, one past each row. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the grid line count down.

const rows = Sprites.Media.Sprite.GridRows(8);
Sprites.Ui.Dom.Text('GridRows(8) = ', rows);

Sprites.Media.Sprite.Info Void

Sprites.Media.Sprite.Info(modes, modeIndex, state, width, height)

The Info window: an always-present floating panel docked to the stage's bottom right. It holds a Mode dropdown and, below it, the size controls for the current mode. Picking a mode sets the colour count and the pixel aspect, and resets the size when the current one falls outside the mode.

Returns nothing.

const modes = [
  { name: 'High-res', colours: 2, pixelAspect: 1, allowedSizes: [[24, 21]] },
  { name: 'Multicolour', colours: 4, pixelAspect: 2, allowedSizes: [[12, 21]] },
];
const modeIndex = Sprites.Reactive.Value(0);
const sprite = Sprites.Reactive.Get(Sprites.Media.Sprite.New(24, 21));
const state = Sprites.Reactive.Value(sprite);
const width = Sprites.Reactive.Calculate(() => Sprites.Reactive.Get(state).w);
const height = Sprites.Reactive.Calculate(() => Sprites.Reactive.Get(state).h);
Sprites.Media.Sprite.Info(modes, modeIndex, state, width, height);
Sprites.Ui.Dom.Text('mode = ', modeIndex);

Sprites.Media.Sprite.New Object

Sprites.Media.Sprite.New(w, h)

A new sprite state at the given size, or 32 by 32, empty. The state is { w, h, cells }.

Returns the new sprite state.

const s = Sprites.Reactive.Get(Sprites.Media.Sprite.New(8, 8));
Sprites.Ui.Dom.Text('New(8, 8): ', s.w, ' by ', s.h, ', ', s.cells.length, ' cells');

Sprites.Media.Sprite.Paint Object

Sprites.Media.Sprite.Paint(state, col, row, colour)

Paint one cell to a colour. Returns a new state, or the same one when the cell falls outside the grid or already holds that colour, so an unchanged paint sets nothing.

Returns the new or unchanged state.

const blank = Sprites.Reactive.Get(Sprites.Media.Sprite.New(8, 8));
const s = Sprites.Media.Sprite.Paint(blank, 2, 3, Sprites.Media.Sprite.White);
Sprites.Ui.Dom.Text('cell (2,3) = ', s.cells[3 * 8 + 2]);

Sprites.Media.Sprite.PaintBrush Object

Sprites.Media.Sprite.PaintBrush(sprite, col, row, radius, colour)

Paint every cell a brush covers to a colour, or null to erase. Cells outside the grid are skipped. Returns a new state, or the same one when nothing changes.

Returns the new or unchanged state.

const blank = Sprites.Reactive.Get(Sprites.Media.Sprite.New(8, 8));
const s = Sprites.Media.Sprite.PaintBrush(blank, 3, 3, 1, Sprites.Media.Sprite.White);
const painted = s.cells.filter((c) => c != null).length;
Sprites.Ui.Dom.Text('painted ', painted, ' cells');

Sprites.Media.Sprite.Palette Void

Sprites.Media.Sprite.Palette(indexed, slots, brush, visible, edit)

The Palette window: a floating panel docked to the stage's bottom left. Indexed, it holds a Sprites.Colour.Palette of the slot colours and an Edit button; freeform, it holds a Sprites.Colour.Picker inline.

Returns nothing.

const colours = ['#f44', '#4f4', '#44f', '#ff4'].map(Sprites.Colour.FromHex);
const slots = Sprites.Reactive.Value(colours);
const brush = Sprites.Reactive.Value(0);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Show palette window');
Sprites.Media.Sprite.Palette(true, slots, brush, visible, null);
Sprites.Ui.Dom.Text('brush index = ', brush);

Sprites.Media.Sprite.PalettePicker Void

Sprites.Media.Sprite.PalettePicker(visible, index, palette)

A modal wrapping Sprites.Colour.Palette. index is a binding it sets, on Select, to the position of the chosen colour in palette; Close leaves it.

Returns nothing.

const index = Sprites.Reactive.Value(0);
const palette = ['#f44', '#4f4', '#44f', '#ff4'].map(Sprites.Colour.FromHex);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Pick a colour');
Sprites.Media.Sprite.PalettePicker(visible, index, palette);
Sprites.Ui.Dom.Text('index = ', index);

Sprites.Media.Sprite.PixelColumn Sprites.Reactive.Value

Sprites.Media.Sprite.PixelColumn(i, width, aspect)

The drawn left edge of pixel i: its column stretched by the aspect. A composite over Sprites.Maths: i wrapped by the width gives the column, then the aspect stretches it.

Returns a read-only Sprites.Reactive.Value, the drawn left edge.

const x = Sprites.Media.Sprite.PixelColumn(5, 4, 2);
Sprites.Ui.Dom.Text('PixelColumn(5, 4, 2) = ', x);

Sprites.Media.Sprite.PixelRow Sprites.Reactive.Value

Sprites.Media.Sprite.PixelRow(i, width)

The row of pixel i: i over the width, rounded down. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the pixel row.

const row = Sprites.Media.Sprite.PixelRow(5, 4);
Sprites.Ui.Dom.Text('PixelRow(5, 4) = ', row);

Sprites.Media.Sprite.Pixels Void

Sprites.Media.Sprite.Pixels(cells, width, aspect, resolve)

One filled square per opaque cell, in its colour, drawn inside a Vector. resolve turns a cell integer into a CSS colour. aspect stretches each pixel on the x axis.

Returns nothing.

let s = Sprites.Reactive.Get(Sprites.Media.Sprite.New(4, 4));
const red = Sprites.Colour.FromHex('#f44');
s = Sprites.Media.Sprite.Paint(s, 1, 1, red);
const blue = Sprites.Colour.FromHex('#44f');
s = Sprites.Media.Sprite.Paint(s, 2, 2, blue);
const cells = Sprites.Reactive.Value(s.cells);
const width = Sprites.Reactive.Value(4);
const pan = Sprites.Reactive.Value({ x: 2, y: 2 });
const show = Sprites.Reactive.Value(6);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Ui.Image.Vector(pan, show, () => {
    Sprites.Media.Sprite.Pixels(cells, width, 1, Sprites.Colour.Css);
  });
});

Sprites.Media.Sprite.Resize Object

Sprites.Media.Sprite.Resize(state, nw, nh)

Resize the grid to nw by nh, keeping the cells that still fit and filling new area with transparent. Returns a new state, or the same one when nothing moves.

Returns the resized state.

const blank = Sprites.Reactive.Get(Sprites.Media.Sprite.New(8, 8));
const s = Sprites.Media.Sprite.Resize(blank, 4, 16);
Sprites.Ui.Dom.Text('resized to ', s.w, ' by ', s.h);

Sprites.Media.Sprite.Thumbnail String

Sprites.Media.Sprite.Thumbnail(sprite, resolve, aspect)

A PNG data URL of the sprite, one image pixel per sprite pixel, transparent where a cell is empty. resolve maps a cell to a CSS colour, the same mapper the view draws with, and aspect stretches the pixels on the x axis to match a wide-pixel mode. A plain value helper over a snapshot state, so it can run in a save handler to keep a stored thumbnail current with the pixels.

Returns a PNG data URL string.

let s = Sprites.Reactive.Get(Sprites.Media.Sprite.New(4, 4));
const red = Sprites.Colour.FromHex('#f44');
s = Sprites.Media.Sprite.Paint(s, 1, 1, red);
const blue = Sprites.Colour.FromHex('#44f');
s = Sprites.Media.Sprite.Paint(s, 2, 2, blue);
const url = Sprites.Media.Sprite.Thumbnail(s, Sprites.Colour.Css, 1);
Sprites.Ui.Dom.Tag('img', () => {
  Sprites.Ui.Dom.Attribute('src', url);
  Sprites.Ui.Dom.Style('width', '64px');
  Sprites.Ui.Dom.Style('height', '64px');
  Sprites.Ui.Dom.Style('image-rendering', 'pixelated');
});

Sprites.Media.Sprite.Tool.Draw.Controls Void

Sprites.Media.Sprite.Tool.Draw.Controls(selectedDrawMode, radius, brushCss, paletteVisible)

The Draw tool's controls: a Pencil and Eraser selector over the brush sizes and the current colour. Pencil lays the brush colour; Eraser clears cells to transparent. The colour square opens the Palette on a click. This holds what the old Brush window held, now inside the Tools window.

Returns nothing.

const selectedDrawMode = Sprites.Reactive.Value('pencil');
const radius = Sprites.Reactive.Value(0);
const brushCss = Sprites.Reactive.Value('#ff8000');
const paletteVisible = Sprites.Reactive.Value(false);
Sprites.Media.Sprite.Tool.Draw.Controls(selectedDrawMode, radius, brushCss, paletteVisible);
Sprites.Ui.Dom.Text('mode = ', selectedDrawMode, ', size = ', radius);

Sprites.Media.Sprite.Tool.File.Controls Void

Sprites.Media.Sprite.Tool.File.Controls()

The File tool's controls: Import and Export. Stand-ins for now, each a button that does nothing until the file actions land.

No inputs.

Returns nothing.

Sprites.Media.Sprite.Tool.File.Controls();

Sprites.Media.Sprite.Tool.Frames.Controls Void

Sprites.Media.Sprite.Tool.Frames.Controls()

The Frames tool's controls: Add, Delete, Previous and Next. Stand-ins for now, each a button that does nothing until the frame actions land.

No inputs.

Returns nothing.

Sprites.Media.Sprite.Tool.Frames.Controls();

Sprites.Media.Sprite.Tool.History.Controls Void

Sprites.Media.Sprite.Tool.History.Controls()

The History tool's controls: Undo and Redo. Stand-ins for now, each a button that does nothing until the history actions land.

No inputs.

Returns nothing.

Sprites.Media.Sprite.Tool.History.Controls();

Sprites.Media.Sprite.Tool.Labelled Void

Sprites.Media.Sprite.Tool.Labelled(label, build)

One labelled block of a tool's controls: a small caption over its build. A tool's Controls may stack several of these, so each block names itself here rather than the window naming the whole section.

Returns nothing.

Sprites.Media.Sprite.Tool.Labelled('Brush', () => {
  Sprites.Ui.Button.Group.Column(() => {
    Sprites.Media.Sprite.Tool.Todo('1×1');
    Sprites.Media.Sprite.Tool.Todo('3×3');
  });
});

Sprites.Media.Sprite.Tool.Layers.Controls Void

Sprites.Media.Sprite.Tool.Layers.Controls()

The Layers tool's controls: Add, Delete, Up and Down. Stand-ins for now, each a button that does nothing until the layer actions land.

No inputs.

Returns nothing.

Sprites.Media.Sprite.Tool.Layers.Controls();

Sprites.Media.Sprite.Tool.Move.Controls Void

Sprites.Media.Sprite.Tool.Move.Controls(resetView)

The Move tool's controls: a Reset button that recentres and refits the whole sprite. resetView is the command it runs.

Returns nothing.

const count = Sprites.Reactive.Value(0);
const resetView = Sprites.Reactive.Value(null, () => {
  const n = Sprites.Reactive.Freeze(count);
  Sprites.Reactive.Set(count, n + 1);
});
Sprites.Media.Sprite.Tool.Move.Controls(resetView);
Sprites.Ui.Dom.Text('reset ', count, ' times');

Sprites.Media.Sprite.Tool.Section Void

Sprites.Media.Sprite.Tool.Section(selectedToolName, name, build)

A tool's section: its build, shown only while name is the selected tool. The window builds one Section per tool; the matching one shows and the rest stay closed, so the lower half of the window follows the selector.

Returns nothing.

const selectedToolName = Sprites.Reactive.Value('move');
Sprites.Media.Sprite.Tool.Selector(selectedToolName);
Sprites.Media.Sprite.Tool.Section(selectedToolName, 'move', () => {
  Sprites.Ui.Dom.Text('Move controls');
});
Sprites.Media.Sprite.Tool.Section(selectedToolName, 'draw', () => {
  Sprites.Ui.Dom.Text('Draw controls');
});

Sprites.Media.Sprite.Tool.Select.Controls Void

Sprites.Media.Sprite.Tool.Select.Controls()

The Select tool's controls: Move, Rotate and Clone. Stand-ins for now, each a button that does nothing until the selection actions land.

No inputs.

Returns nothing.

Sprites.Media.Sprite.Tool.Select.Controls();

Sprites.Media.Sprite.Tool.Selector Void

Sprites.Media.Sprite.Tool.Selector(selectedToolName)

The tool selector: one untitled button group, one option per tool. Picking an option sets selectedToolName, which the window reads to show that tool's controls.

Returns nothing.

const selectedToolName = Sprites.Reactive.Value('move');
Sprites.Media.Sprite.Tool.Selector(selectedToolName);
Sprites.Ui.Dom.Text('tool = ', selectedToolName);

Sprites.Media.Sprite.Tool.Todo Void

Sprites.Media.Sprite.Tool.Todo(label)

A stand-in button for an action not built yet: a secondary button bound to a value nothing reads, so a click is harmless until the real action lands. The label names what it will do.

Returns nothing.

Sprites.Media.Sprite.Tool.Todo('Import');

Sprites.Media.Sprite.Tool.Window Void

Sprites.Media.Sprite.Tool.Window(selectedToolName, selectedDrawMode, radius, brushCss, paletteVisible, resetView)

The Tools window: a slim floating window docked to the stage's top left. The selector picks the tool; below it the selected tool's controls show. The window has no close button and does not resize.

Returns nothing.

const selectedToolName = Sprites.Reactive.Value('move');
const selectedDrawMode = Sprites.Reactive.Value('pencil');
const radius = Sprites.Reactive.Value(0);
const brushCss = Sprites.Reactive.Value('#ff8000');
const paletteVisible = Sprites.Reactive.Value(false);
const resetView = Sprites.Reactive.Value(null);
const on = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(on, true, 'Show tools window');
Sprites.Reactive.If(on, () => {
  Sprites.Media.Sprite.Tool.Window(selectedToolName, selectedDrawMode, radius, brushCss, paletteVisible, resetView);
});
Sprites.Ui.Dom.Text('tool = ', selectedToolName, ', draw = ', selectedDrawMode);

Sprites.Media.Sprite.View Void

Sprites.Media.Sprite.View(cells, width, height, pan, show, aspect, resolve, overlay)

The sprite view: a Vector filling its container. It draws the pixels, the thin grid, then a thicker dark outline around the whole sprite. overlay is an optional build run last, for tool feedback in sprite space.

Returns nothing.

const blank = Sprites.Reactive.Get(Sprites.Media.Sprite.New(8, 8));
const s = Sprites.Media.Sprite.Paint(blank, 3, 4, Sprites.Media.Sprite.White);
const cells = Sprites.Reactive.Value(s.cells);
const width = Sprites.Reactive.Value(8);
const pan = Sprites.Reactive.Value({ x: 4, y: 4 });
const show = Sprites.Reactive.Value(11);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '180px');
  Sprites.Media.Sprite.View(cells, width, width, pan, show, 1, Sprites.Colour.Css);
});

Sprites.Media.Sprite.White Number

Sprites.Media.Sprite.White

Opaque white as a packed colour, the freeform brush default. A constant, not a function.

Value the packed colour Sprites.Colour.Pack(255, 255, 255, 255).

Sprites.Ui.Dom.Text('White = ', Sprites.Media.Sprite.White);