Sprites.Media.Sprite.Frames

The animation frames: add, delete and step through the frames of the sprite. Window is an independent floating window, shown while its own flag is true, so it can be open in any combination with the other panels, and it carries a close button. Its buttons are Add, Delete, Previous and Next, stand-ins for now until the frame actions land. The Windows buttons that open it, the selector and the Tools window live in Sprites.Media.Sprite.Tool.

Sprites.Media.Sprite.Frames

Sprites.Media.Sprite.Frames.Preview Void

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

One frame's thumbnail preview: a small fixed square on a white ground, holding the frame's visible layers flattened and drawn to fit. The image scales to contain the thumbnail, keeps its pixels crisp, and rounds its corners.

InputTypeDescription
thumbString or Sprites.Reactive.ValueThe frame's PNG data URL, which the image follows.

Returns nothing.

const frame = Sprites.Media.Sprite.NewFrame(16, 16);
const thumb = Sprites.Media.Sprite.FrameThumbnail(frame, 16, 16, undefined, 1);
Sprites.Media.Sprite.Frames.Preview(thumb);
A blank frame's flattened thumbnail, drawn on a white square.

Sprites.Media.Sprite.Frames.Card Void

Sprites.Media.Sprite.Frames.Card(frame, index, width, height, optionalSlots, aspect)

One frame card: a selectable thumbnail option, so a click selects the frame and the selected card darkens like a button group. It builds the frame's flattened thumbnail and shows it inside the option.

InputTypeDescription
frameSprites.Reactive.ValueThe frame value, its layers flattened for the thumbnail.
indexNumberThe frame's position in the frames list, the option's value.
widthNumber or Sprites.Reactive.ValueThe document width, for the thumbnail.
heightNumber or Sprites.Reactive.ValueThe document height, for the thumbnail.
optionalSlotsArray or Sprites.Reactive.ValueThe slot colours for an indexed sprite, or absent for freeform.
aspectNumber or Sprites.Reactive.ValueThe pixel aspect baked into the thumbnail.

Returns nothing.

const frame = Sprites.Media.Sprite.NewFrame(16, 16);
const selected = Sprites.Reactive.Value(0);
Sprites.Ui.Button.Select(selected, () => {
  Sprites.Media.Sprite.Frames.Card(frame, 0, 16, 16, undefined, 1);
});
A single selectable frame card, darkened while it is the pick.

Sprites.Media.Sprite.Frames.Strip Void

Sprites.Media.Sprite.Frames.Strip(frames, selectedFrame, width, height, optionalSlots, aspect)

The scrolling strip of frame cards: a select over the selected frame so exactly one card darkens, and an each over the frames in play order, laid in a row that scrolls left and right.

InputTypeDescription
framesSprites.Reactive.ValueThe frames list, drawn in play order.
selectedFrameSprites.Reactive.ValueThe two way pick, the card that darkens.
widthNumber or Sprites.Reactive.ValueThe document width, for each thumbnail.
heightNumber or Sprites.Reactive.ValueThe document height, for each thumbnail.
optionalSlotsArray or Sprites.Reactive.ValueThe slot colours for an indexed sprite, or absent for freeform.
aspectNumber or Sprites.Reactive.ValueThe pixel aspect baked into each thumbnail.

Returns nothing.

const first = { layers: [ { pixels: [], visible: true } ] };
const second = { layers: [ { pixels: [], visible: true } ] };
const frames = Sprites.Reactive.Value([first, second]);
const selectedFrame = Sprites.Reactive.Value(0);
Sprites.Media.Sprite.Frames.Strip(frames, selectedFrame, 16, 16, undefined, 1);
Two frame cards in a scrolling row; click one to select it.

Sprites.Media.Sprite.Frames.Buttons Void

Sprites.Media.Sprite.Frames.Buttons(frames, selectedFrame, frameIndex, width, height)

The frame buttons: Add lays a blank frame just after the current one and selects it, Clone copies the current frame in the same place, Back and Forward swap the current frame with its neighbour and follow it, and Delete removes it. Each composes a new frames list and Sets it. Back disables at the first frame, Forward at the last, and Delete while one frame is left.

InputTypeDescription
framesSprites.Reactive.ValueThe two way frames list, where each action commits.
selectedFrameSprites.Reactive.ValueThe two way pick, moved to follow each action.
frameIndexNumber or Sprites.Reactive.ValueThe clamped current frame index.
widthNumber or Sprites.Reactive.ValueThe document width, for a new frame.
heightNumber or Sprites.Reactive.ValueThe document height, for a new frame.

Returns nothing.

const first = Sprites.Media.Sprite.NewFrame(16, 16);
const frames = Sprites.Reactive.Value([first]);
const selectedFrame = Sprites.Reactive.Value(0);
Sprites.Media.Sprite.Frames.Buttons(frames, selectedFrame, 0, 16, 16);
const count = Sprites.Array.Length(frames);
Sprites.Ui.Dom.Text(' frames = ', count);
Add or Clone grows the frames list; Delete disables while one frame is left.

Sprites.Media.Sprite.Frames.Window Void

Sprites.Media.Sprite.Frames.Window(visible, frames, selectedFrame, frameIndex, width, height, optionalSlots, aspect)

The Frames panel's window: a floating panel of Add, Delete, Previous and Next, shown while visible is true, with a close button that clears visible. The buttons are stand-ins for now, each doing nothing until the frame actions land.

InputTypeDescription
visibleSprites.Reactive.ValueShows the window while true.

Returns nothing.

const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Open Frames window');
Sprites.Media.Sprite.Frames.Window(visible);
Open the Frames panel; it carries its own close button.