Sprites.Media.Sprite.Layers

The layers panel: the stack of layers of the current frame, and the controls to add, clone, reorder, delete and hide them. Window is a resizable floating window, shown while its own visible flag is true. It holds a scrolling list of layer cards over a row of buttons. A card is a selectable option, so the selected layer darkens like a button group, and it carries the layer's thumbnail and a visible checkbox. The selected layer is the one the editor draws into; the view shows the visible layers flattened. The Tools window's Windows buttons open it; the selector and that window live in Sprites.Media.Sprite.Tool.

Sprites.Media.Sprite.Layers

Sprites.Media.Sprite.Layers.Preview Void

Sprites.Media.Sprite.Layers.Preview(thumb)

One layer's thumbnail preview: a small fixed square on a white ground, the layer drawn to fit, so a transparent layer reads as empty. The image scales to contain and renders pixelated, so the pixels stay crisp.

InputTypeDescription
thumbSprites.Reactive.ValueThe reactive PNG data URL of the layer.

Returns nothing.

const layer = Sprites.Media.Sprite.NewLayer(8, 8);
const pixels = Sprites.Object.Field(layer, 'pixels');
const painted = Sprites.Object.With(pixels, 27, 1);
const filled = Sprites.Object.With(layer, 'pixels', painted);
const thumb = Sprites.Media.Sprite.LayerThumbnail(filled, 8, 8, undefined, 1);
Sprites.Media.Sprite.Layers.Preview(thumb);
A layer's thumbnail on a white square.

Sprites.Media.Sprite.Layers.Card Void

Sprites.Media.Sprite.Layers.Card(layer, index, layers, frames, frameIndex, width, height, optionalSlots, aspect)

One layer card: a row of a selectable thumbnail and a visible checkbox. The thumbnail is an Option, so a click selects the layer and the selected card darkens; the checkbox is a two way flag written back into the layer through the frames list, so hiding a layer drops it from the flattened view.

InputTypeDescription
layerSprites.Reactive.ValueThe layer value.
indexNumberThe layer's position in layers.
layersSprites.Reactive.ValueThe frame's layers list.
framesSprites.Reactive.ValueThe two way frames list.
frameIndexNumber or Sprites.Reactive.ValueThe current frame.
widthNumber or Sprites.Reactive.ValueThe document width for the thumbnail.
heightNumber or Sprites.Reactive.ValueThe document height for the thumbnail.
optionalSlotsSprites.Reactive.ValueThe palette slot colours for the thumbnail.
aspectNumber or Sprites.Reactive.ValueThe pixel aspect for the thumbnail.

Returns nothing.

const layer = Sprites.Media.Sprite.NewLayer(8, 8);
const frame = Sprites.Reactive.ReadOnly({ layers: [layer] });
const frames = Sprites.Reactive.Value([frame]);
const selected = Sprites.Reactive.Value(0);
Sprites.Ui.Button.Select(selected, () => {
  Sprites.Media.Sprite.Layers.Card(layer, 0, [layer], frames, 0, 8, 8, undefined, 1);
});
A layer card: click the thumbnail to select, toggle the checkbox to hide.

Sprites.Media.Sprite.Layers.List Void

Sprites.Media.Sprite.Layers.List(frames, frameIndex, layers, selectedLayer, width, height, optionalSlots, aspect)

The scrolling list of layer cards: a Select over the selected layer so exactly one card darkens, an Each over the layers, and column-reverse so the top layer, the one drawn last, sits at the top of the list. It scrolls up and down inside the resizable window.

InputTypeDescription
framesSprites.Reactive.ValueThe two way frames list.
frameIndexNumber or Sprites.Reactive.ValueThe current frame.
layersSprites.Reactive.ValueThat frame's layers.
selectedLayerSprites.Reactive.ValueThe two way pick of the selected layer.
widthNumber or Sprites.Reactive.ValueThe document width for the thumbnails.
heightNumber or Sprites.Reactive.ValueThe document height for the thumbnails.
optionalSlotsSprites.Reactive.ValueThe palette slot colours for the thumbnails.
aspectNumber or Sprites.Reactive.ValueThe pixel aspect for the thumbnails.

Returns nothing.

const back = Sprites.Media.Sprite.NewLayer(8, 8);
const front = Sprites.Media.Sprite.NewLayer(8, 8);
const layers = [back, front];
const frame = Sprites.Reactive.ReadOnly({ layers: layers });
const frames = Sprites.Reactive.Value([frame]);
const selected = Sprites.Reactive.Value(1);
Sprites.Media.Sprite.Layers.List(frames, 0, layers, selected, 8, 8, undefined, 1);
Two stacked layer cards, the top layer first; click to select.

Sprites.Media.Sprite.Layers.Buttons Void

Sprites.Media.Sprite.Layers.Buttons(frames, frameIndex, layers, selectedLayer, layerIndex, width, height)

The layer buttons: Add and Clone a layer just above the selected one and select it, Up and Down swap the selected layer with its neighbour and follow it, and Delete removes it unless it is the last layer. Each composes a new layers list, folds it into the frames through WithLayers, and Sets the frames. Up disables at the top, Down at the bottom, and Delete while one layer is left.

InputTypeDescription
framesSprites.Reactive.ValueThe two way frames list.
frameIndexNumber or Sprites.Reactive.ValueThe current frame.
layersSprites.Reactive.ValueThat frame's layers.
selectedLayerSprites.Reactive.ValueThe two way pick of the selected layer.
layerIndexNumber or Sprites.Reactive.ValueThe clamped value of the selected layer.
widthNumber or Sprites.Reactive.ValueThe document width for new layers.
heightNumber or Sprites.Reactive.ValueThe document height for new layers.

Returns nothing.

const document = Sprites.Media.Sprite.NewDocument(8, 8);
const data = Sprites.Reactive.Value(document);
const frames = Sprites.Object.Field(data, 'frames');
const current = Sprites.Array.At(frames, 0);
const layers = Sprites.Object.Field(current, 'layers');
const selected = Sprites.Reactive.Value(0);
const count = Sprites.Array.Length(layers);
const last = Sprites.Maths.Subtract(count, 1);
const layerIndex = Sprites.Maths.Clamp(selected, 0, last);
Sprites.Media.Sprite.Layers.Buttons(frames, 0, layers, selected, layerIndex, 8, 8);
Add, Clone, Up, Down and Delete acting on a live frames list.

Sprites.Media.Sprite.Layers.Window Void

Sprites.Media.Sprite.Layers.Window(visible, frames, frameIndex, layers, selectedLayer, layerIndex, width, height, optionalSlots, aspect)

The Layers panel window: a resizable floating panel, shown while visible is true, with a close button. It fills as a column: a scrolling list of layer cards over a fixed row of buttons, so the list grows a scrollbar while the buttons stay put as the window resizes. The window owns its live rect, so it keeps its dragged corner and size across a close and reopen.

InputTypeDescription
visibleSprites.Reactive.ValueShows the window while true.

Returns nothing.

const document = Sprites.Media.Sprite.NewDocument(8, 8);
const data = Sprites.Reactive.Value(document);
const frames = Sprites.Object.Field(data, 'frames');
const current = Sprites.Array.At(frames, 0);
const layers = Sprites.Object.Field(current, 'layers');
const selected = Sprites.Reactive.Value(0);
const count = Sprites.Array.Length(layers);
const last = Sprites.Maths.Subtract(count, 1);
const layerIndex = Sprites.Maths.Clamp(selected, 0, last);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Open Layers window');
Sprites.Media.Sprite.Layers.Window(visible, frames, 0, layers, selected, layerIndex, 8, 8, undefined, 1);
Open the Layers panel; it carries its own close button.