Sprites JavaScript Image Media
The image media: a bitmap editor over a pixel grid, from a freeform full-colour picture down to a machine screen drawn within its exact limits. Planned. The structure mirrors the sprite section: a core module for the editor and its state, a Canvas module for the drawing surface, a Tool module for the selector and Tools window, and a module for each tool. An image has layers but no animation frames, so where the sprite section has a Frames module this one does not. These are aspirational, sketched here to plan what they will hold; the modules land as they are built.
Modes, attributes and text
An image is drawn in a mode: freeform, or one of the target machines. The mode fixes the size choices, the palette and the colour rule, so the editor keeps the picture within a machine's limits as it is drawn. One editor covers every mode by holding the superset of their formats, the same superset the stored format carries. A mode paints its pixels one of three ways.
| Family | What the editor draws | Colour comes from | Modes |
|---|---|---|---|
| Direct | A colour, or a palette slot, into each pixel | The pixel itself | Freeform, VGA, Amiga |
| Attribute | Ink and paper pixels, plus a coarse colour grid | An attribute block shared over a group of pixels | Spectrum, C64, Oric |
| Text | Characters into a grid, from a font | Each character cell's own ink and paper | Teletext, C64 text, Oric text, PC text |
The attribute modes are the reason images need more than the sprite grid. Colour on a Spectrum belongs to an 8×8 block, not a pixel, so two colours meet only at a block edge; on the Oric an ink change sits inline in the pixel row and eats six pixels of width. The Attributes tool edits that coarse colour grid beside the pixels. The text modes swap the pixel grid for a character grid: each cell holds a character code, its ink and paper, and flags like flash, double height, and the Teletext graphics-or-text choice, and the glyph shape comes from a font. That font is a built-in ROM set, or, where the machine lets characters be redefined, a saved font item. Layers stack back to front and the upper ones may be transparent, but the finished image is opaque; there are no frames. The per machine detail lives on the platform pages.
Sprites.Media.Image Modules
Sprites.Media.Image
The image editor, its state and its windows, over a full-colour pixel grid.
Sprites.Media.Image.Cells
The attribute image editor and its model: a one bit pixel mask over per cell or inline ink and paper, for the Spectrum, the C64 hires and the Oric.
Sprites.Media.Image.Canvas
The drawing surface: the checkerboard backdrop, the tiled pixel view, and the brush cursor overlay.
Sprites.Media.Image.Tool
The tool infrastructure: the Tools window and its Windows buttons, reusing the shared sprite tool parts.
Sprites.Media.Image.Insert
The Insert panel: pick a saved sprite and stamp it into the current layer at the image centre.
Sprites.Media.Image.Modes
The mode picker: choose freeform or a target machine, and within it the resolution, colour count and palette the picture is locked to.
Sprites.Media.Image.Attributes
The Attributes tool: the coarse colour grid of an attribute mode, one ink and paper per block, with the machine's flags like bright and flash. Handles blocks that take up pixel space, as on the Oric.
Sprites.Media.Image.Text
The Text tool for a text mode: type characters into the cell grid, set each cell's ink and paper, and the flags for flash, double height and the Teletext graphics-or-text choice.
Sprites.Media.Image.Font
The font picker for a text mode: the built-in ROM set, or a saved font item where the machine allows redefined characters.
Sprites.Media.Image.Draw
The Draw tool: a freehand brush that lays colour on the canvas.
Sprites.Media.Image.Fill
The Fill tool: flood a connected region with a colour.
Sprites.Media.Image.Shape
The Shape tool: draw rectangles, ellipses and lines.
Sprites.Media.Image.Select
The Select tool: mark a region to move, copy or clear.
Sprites.Media.Image.Move
The Move tool: pan and zoom the view, with a Reset that refits the image.
Sprites.Media.Image.File
The File tool: import and export PNG and JPEG, and bring a photo in to the current mode, resized, quantised and dithered to fit.
Sprites.Media.Image.Layers
The layers: add, clone, reorder, hide and delete the layers, back to front. Upper layers may be transparent and show those below; the finished image is opaque. No frames.
Sprites.Media.Image.History
The edit history: undo and redo the last changes.