1. General basics
Main tabs
- Screen Editor – full ZX screen editing with bitmap, attributes, selections, layers, text objects, and dithering. Also supports Next Layer 2 mode.
- Sprite Editor – sprite frames, optional masks, animation preview, BIN/ASM export. Also supports Next 8bpp/4bpp sprite mode.
- Font Editor – font or UDG editing, glyph transforms, preview, BIN/ASM export.
How drawing works
- Left mouse button draws or confirms the current tool operation.
- Right mouse button erases in bitmap-based editors.
- Middle mouse button samples the visible attribute (classic) or color index (Next) under the cursor in Screen Editor.
- Selections can become floating selections that can be moved before being committed.
- All drawing tools use Bresenham interpolation on drag, so no pixels are skipped even on fast movements.
| Concept | Meaning |
|---|---|
| INK | Foreground color (classic ZX: 0–7, bright variants via Bright flag). |
| PAPER | Background color. |
| Bright | Uses bright variants of the ZX palette. |
| Flash | Sets the ZX FLASH attribute bit. |
| Mask | Auxiliary per-pixel layer for sprites and fonts. |
| Text layer | A live, editable text object that appears as a separate entry in the Layers panel and is rendered on top of bitmap layers. |
| ASM preview | Generated assembly text preview of current data, updated after each stroke. |
| Layer 2 | ZX Spectrum Next full-color screen mode — 256×192, 256-color indexed palette, no attribute grid. |
| NXI | Next screen file format: 49152 bytes of pixel data + optional 512-byte palette. |
| SL2 | Alternative Next Layer 2 binary format (raw pixel data only, no header). |
| Theme switcher | Three buttons in the top-right of the header bar (🌙 / ⚡ / 🔄) that control the visual theme and layout density. See General basics → Theme switcher below. |
Theme switcher
The three buttons in the header bar let you control the application's visual theme and the layout density of the three-column workspace:
| Button | Theme | Effect |
|---|---|---|
| 🌙 Dark | Default dark theme | Full-width side columns (left 320 px, right 340 px). The right column collapses below the canvas at viewports narrower than 1620 px. |
| ⚡ Compact | Dark compact theme | Narrower side columns (left 230 px, right 240 px), reduced padding and font sizes. The three-column layout holds until the viewport is narrower than 1200 px — useful on smaller monitors or lower resolutions. |
| 🔄 Auto | Automatic | The theme is chosen automatically based on the current window width: Dark at ≥ 1620 px, Compact between 981–1619 px, and Dark again below 981 px (mobile). The selection updates live as you resize the window. |
localStorage between sessions.2. Screen Editor
The Screen Editor is the main workspace for building a ZX Spectrum screen. It combines a 256×192 bitmap, a 32×24 attribute layer, selection tools, paint tools, dithering, text objects, layer management, and SCR/ATTR/NXI import-export. Switch between classic ZX and Next Layer 2 modes via the screen mode selector at the top.
Top controls
| Control | What it does | How to use it |
|---|---|---|
| Screen name | Name of the current screen item. | Type directly into the text field. |
| Screen mode | Switches between Classic ZX Spectrum and ZX Spectrum Next Layer 2. When switching modes, text object colors are automatically converted to the nearest equivalent. | Select from the dropdown. Switching converts the current canvas including all text layers. |
| ↶ Undo / ↷ Redo | Undo or restore the last action. | Use the buttons or Ctrl+Z / Ctrl+Y. |
| − / + | Zoom out or in. | Use buttons or keyboard shortcuts. |
| ? | Opens the help dialog. | Click once. |
| Status | Shows what the editor is currently doing. | Read-only. |
Toolbox
| Group | Tools | Purpose |
|---|---|---|
| Selection | Rect sel, Oval sel, Free sel, Move | Create and manipulate selected areas. Move turns a selection into a floating selection that can be dragged before committing. |
| Draw | Pencil, Brush, Erase, Spray, Line, Text | Bitmap drawing and direct painting. Spray applies continuously on drag. Text places editable text objects directly on the canvas. |
| Shapes | Rect, Fill rect, Ellipse, Fill oval | Drag-based geometric drawing with live preview while dragging. |
| Paint & Color | Fill, Dither, Attr, Pick | Fill areas, apply dithering, paint attribute cells, or sample values from the canvas. |
Canvas and color controls
| Control | Meaning | How to use it |
|---|---|---|
| Show Attrs / Layer 2 | Toggles attribute coloring (classic) or shows Layer 2 label (Next). | In classic mode: useful when checking ZX color clash. |
| INK swatches | Select foreground color (classic mode). While a text object is being edited, clicking an INK swatch instantly changes its color. | Click one of the 8 ZX colors. In Next mode, use the 256-color palette grid. |
| PAPER swatches | Select background color (classic mode only). | Click one of the 8 ZX colors. |
| Bright | Attribute switch (classic mode). While a text object is being edited, toggling Bright instantly updates its color. | Toggle on or off. |
| Flash | Attribute switch (classic mode only). | Toggle on or off. |
| Transparent PAPER | Makes the current layer background transparent in the current 8×8 attribute cell. | Best used on upper layers in classic mode. Not available in Next mode. |
| INK ⇄ PAPER | Swaps the current foreground and background colors. | Useful for fast color inversion. |
| Hover attr | Shows the final visible INK/PAPER under the cursor (classic) or color index (Next). | Useful when working with multiple layers. |
| Brush / Spray / Density | Tool-specific sliders for size and density. | Adjust to match the active tool. |
| Dither len. | Controls the fade-out distance of the Dither tool stroke. | Higher values produce a longer gradient trail. |
| Dither mode | Selects the dither pattern: Solid, Checker, Sparse, or Radial. | Choose from the dropdown next to the Dither length slider. |
| Attr Only | Edits only the 32×24 attribute map (classic mode only). | Use for recoloring without changing bitmap pixels. Left-click writes the current INK+PAPER. Right-click writes with INK and PAPER swapped — useful for quickly inverting a cell's colors without changing the editor palette. |
| 1×1 / 8×8 / 16×16 | Grid overlays (classic mode only). 1×1 shows individual pixel boundaries. 8×8 shows attribute cell boundaries (the ZX 8×8 color constraint grid). 16×16 shows a coarser 16×16 pixel grid — handy when designing sprites or tiles intended for ZX Spectrum Next, where hardware sprites are 16×16 pixels. | Toggle each overlay independently. 16×16 is off by default. |
| Canvas resize handle | A thin drag strip located immediately below the canvas area. Drag it up or down to change the visible height of the canvas viewport (range: 100–1200 px). Useful on smaller screens or when working at high zoom levels where the canvas would otherwise scroll out of view. | Hover over the strip (a horizontal bar appears) and drag vertically. |
Text tool
Basic usage
- Select the Text tool from the Draw group in the toolbox.
- Click anywhere on the canvas — a floating editor box appears and gets focus immediately. Start typing right away.
- The text is rendered live on the canvas as you type — no need to confirm to see it.
- Press Ctrl+Enter or Esc to close the editor box. Clicking elsewhere on the canvas also closes it.
Text editor box
When editing, a floating editor box appears near the text. It has a drag handle (⠿) at the top — grab it to drag the editor anywhere in the canvas area so it doesn't cover what you're working on. The editor box is positioned automatically below or above the text depending on available space.
| Control / shortcut | What it does |
|---|---|
| Ctrl+Enter | Closes the text editor and confirms all edits. The text remains as a live layer. |
| Esc | Closes the text editor. Edits are preserved (text is stored live on every keystroke). |
| Click on canvas | Closes the text editor without creating a new text object at the click position. |
| Drag the ⠿ handle | Moves the editor box to any position within the canvas area. |
| Multiline support | Press Enter inside the editor for multi-line text. |
Text tool panel
When the Text tool is active, a panel appears below the canvas controls with the following options:
| Option | What it does |
|---|---|
| Font | Choose between Tiny 5×7 (compact pixel font), ZX ROM 8×8 (the original ZX Spectrum font), or Font editor (uses the font currently open in the Font Editor tab). |
| Bold | Renders each glyph one pixel wider for a bold effect. |
| Italic | Applies a slight horizontal slant to each glyph. |
| Delete text | Permanently removes the currently selected text object. |
Changing text color
| Mode | How to change color |
|---|---|
| Classic ZX mode | While the text editor is open, click any INK swatch or toggle Bright — the text color updates instantly. The selected INK + Bright combination becomes the text color. |
| Next Layer 2 mode | While the text editor is open, click any color in the 256-color palette grid or the quick-pick row — the text color updates instantly to that palette index. |
Moving text on the canvas
With the Text tool active, click and drag any existing text object on the canvas to reposition it. The text moves in real time. You can also move it via the Layers panel — select the text layer and use the Up/Down buttons.
Editing existing text
With the Text tool active, double-click any text object on the canvas (or click the ✎ button next to it in the Layers panel) to reopen the editor box and change the content.
Next Layer 2 mode
In Next mode the 256×192 canvas uses a fully indexed 256-color palette — no attribute grid, no INK/PAPER, no color clash. Each pixel stores a palette index (0–255). This maps directly to the ZX Spectrum Next Layer 2 screen format.
| Feature | Description |
|---|---|
| 256-color palette | The palette grid shows all 256 Next colors. Left-click assigns Color A (main draw color), right-click assigns Color B (secondary / erase color). |
| Color A / Color B chips | The two chips above the palette show the currently selected Next indices, their swatches, and numeric palette IDs. |
| Middle mouse | Middle-click on the canvas samples the color index under the cursor and assigns it to the active draw color. |
| Text color in Next mode | While editing a text object, clicking any color in the palette instantly changes the text color to that palette index. |
| Next preview adjustments | Below the palette are three live preview sliders: Brightness, Contrast, and Saturation (all −100…+100). They affect only the Screen Editor preview until applied. |
| Apply to layer | Commits the current Brightness / Contrast / Saturation preview changes permanently into the active Next bitmap layer. The editor remaps each painted pixel to the nearest Next palette entry and then resets the sliders back to 0. |
| Reset | Clears the Next preview adjustment sliders back to zero without modifying layer data. |
| Import L2 | Loads a raw Layer 2 file (49152 bytes of 8bpp indexed data, no header). Replaces the canvas pixel data. |
| Export L2 Raw | Exports 49152 bytes of raw indexed pixel data. Load directly into Next Layer 2 memory at address $C000 (bank 8). |
| Export PAL | Exports the 512-byte Next palette block (256 × 2 bytes in RRRGGGBB + B format). |
| Export SL2 | Exports an SL2 file — same pixel layout as L2 Raw, alternative extension used by some Next tools. |
| Export NXI | Exports an NXI file: 49152 bytes of pixel data followed by the 512-byte palette. This is the most complete Next screen format and can be loaded directly by NextBASIC or Z80 loaders. |
| Export NXI + NXP (compat) | Exports a compatibility pair for workflows that want screen data and palette as separate files. |
| Import NXI | Loads an NXI file. If the file contains palette data (≥ 49664 bytes) it is also applied to the editor palette. |
| Convert to Next | Converts the current classic ZX screen to Next Layer 2 format. Text object colors are also converted to the nearest Next palette index. |
| Convert to Classic | Converts the current Next Layer 2 canvas back to classic ZX Spectrum format. A conversion dialog appears with a live before/after preview and the following options: Method: Direct conversion (nearest ZX colour per pixel, fast), Dithering — Ordered Bayer (dot patterns simulate mid-tones within each 8×8 attribute cell), or Floyd-Steinberg dithering (error diffusion — see below). Dither strength (0–100 %): how strongly the Bayer pattern is applied. At 0 % it behaves like direct conversion; at 100 % full dithering is used. Matrix: Bayer 2×2 (finer), 4×4 (recommended), or 8×8 (coarser texture). Diffusion strength (0–100 %): intensity of error diffusion (Floyd-Steinberg only). Brightness / Contrast / Saturation (-100…+100): pre-process the source image before conversion. The preview updates live as you move the sliders. Text object palette indices are mapped to the nearest ZX ink color. |
LOAD "screen.nxi" LAYER 2 or from Z80 with a standard Layer 2 loader. The NXI format bundles pixels and palette together so the colors are exactly as you designed them.Palette Tools (Next)
In ZX Spectrum Next Layer 2 mode, the button 🎨 Open Palette Tools appears above the 256-color palette. It opens a dedicated dialog for editing the working Next palette and for remapping classic ZX SCR colors to Next indices.
| Area / control | What it does |
|---|---|
| Palette Editor tab | Main tab for editing the current 256-color Next palette used by the editor. |
| Preview — click pixel for info | Shows the current screen preview with the currently active palette. Clicking a pixel displays color information for that pixel. |
| Show used only | Filters the palette grid so you only see slots currently used on the canvas. |
| 🔍 Scan canvas | Scans the current Next canvas and marks used palette slots. Useful before enabling Show used only. |
| Palette slot click | Click any slot in the 256-color grid to open a popup editor for that slot. |
| RGB mode | Edit the selected slot directly with R, G, B sliders in the 0–7 Next range. |
| Grid mode | Instead of sliders, choose a color from a compact preset color grid and copy that color into the edited slot. |
| ✓ Apply (slot popup) | Confirms the edited color for the selected palette slot in the dialog’s working palette. |
| 🗑 Clear (slot popup) | Clears/resets the currently edited slot in the working palette. |
| 💾 Save JSON | Saves the current palette as a JSON file with all 256 entries, including palette bytes and RGB values. |
| 📂 Load JSON | Loads a palette from a JSON file into the dialog’s working palette. The change is not final until you confirm the dialog. |
| 📤 Export NXP | Exports the palette in NXP binary form for ZX Next workflows that expect a raw palette file. |
| 📥 Import NXP | Imports an NXP / raw palette file into the working palette. |
| ↺ Reset palette | Restores the default Next palette inside the dialog. |
| ✓ Apply (dialog) | Commits all Palette Tools changes back into the editor palette. Until then, edits remain only in the dialog’s working copy. |
| ✕ Cancel | Closes the dialog and discards unapplied palette edits. |
SCR Recolor tab
The second tab, 📺 SCR Recolor, is meant for remapping classic ZX Spectrum SCR / ULA colors to Next palette entries. It is available from the same Palette Tools dialog and works as a conversion helper for Next mode.
| Area / control | What it does |
|---|---|
| 📂 Load SCR | Loads a classic SCR file and analyzes which ULA colors are present. |
| 🎨 Load default ZX colors | Initializes the mapping with the standard 16 ZX colors even without loading an SCR file. |
| ULA color grid | Shows the 16 classic ZX colors (normal + bright). Selecting one highlights its mapping row. |
| Color mapping table | Each ULA color can be assigned to a specific Next palette color. This lets you define how classic colors should translate into Layer 2. |
| Next color picker | After selecting a ULA color, choose the replacement Next color from the Next grid. |
| ✓ Apply Recolor | Applies the current ULA → Next mapping to the loaded SCR preview / conversion workflow. |
| ↺ Reset mapping | Restores the default remapping table. |
| Import / status boxes | Show import summary, used colors, and workflow messages while building the remap. |
Layers and text layers
The Layers panel shows all bitmap layers and all text objects together in a unified list. Bitmap layers are marked with a filled square (⬛); text layers are marked with a blue T badge and show a preview of their content in quotes.
| Control | Applies to | What it does |
|---|---|---|
| Add | Bitmap | Creates a new bitmap layer with transparent attributes. |
| Duplicate | Both | Copies the active layer. For text layers, creates a copy offset by 4 pixels. |
| Delete | Both | Deletes the active layer or text object (with confirmation). At least one bitmap layer always remains. |
| Clear | Bitmap | Clears all pixels and attributes from the active bitmap layer. |
| ↑ Up / ↓ Down | Both | Changes layer order. For text layers, changes their z-order relative to other text objects. |
| Merge Layers | Both | Merges all visible bitmap layers into one, and rasterizes all visible text objects into the merged result. Text objects are permanently converted to pixels — use Undo to reverse. |
| Rename (✎) | Bitmap | Opens a dialog to rename the selected bitmap layer. |
| Edit text (✎) | Text | Opens the text editor box for the selected text layer. |
| Visibility checkbox | Both | Shows or hides a layer. Hidden text layers are excluded from rendering and exports. |
| Click on layer name | Bitmap | Activates the layer for drawing. |
| Click on text layer | Text | Selects the text object and switches to the Text tool. |
| Double-click on text layer | Text | Opens the text editor box immediately. |
| Transform (⟳) | Bitmap | Opens the Transform Layer dialog for the selected bitmap layer. Allows non-destructive rotation, scaling, and panning with a live preview before applying. |
| ⋯ (layer menu) | Bitmap | Opens the layer context menu with additional options: Rename, Transform, Dither export…, Color to transparency…, and Merge with layer below…. Click ⋯ again to close the menu. |
Transform Layer
The Transform Layer dialog opens via the ⟳ button next to a bitmap layer in the Layers panel. It provides non-destructive rotation, independent X/Y scaling, and free panning of the layer content, with a live preview that is applied only when you confirm with Apply.
| Control | What it does |
|---|---|
| Rotation | Enter an angle in degrees (−3600 … +3600) or drag the range slider (−180 … +180). Quick-pick chips: 0°, ±45°, ±90°, 135°, 180°. |
| Scale X / Scale Y | Independent scale factors (0.05× … 32×). Drag the sliders or type directly. Quick-pick chips: ¼×, ½×, ¾×, 1×, 1.5×, 2×, 3×, 4×. |
| 🔒 Lock X:Y | When active, X and Y scale always change together proportionally (uniform scaling). Click to toggle. |
| Attribute behaviour (classic mode) | Scale attrs with pixels — attribute cells are transformed together with the bitmap. Discard attrs — attribute data is ignored; only transformed pixel data is kept. |
| Live preview | Shows the result of the current settings on the full 256×192 canvas in real time. The preview is non-destructive — nothing is changed in the layer until you click Apply. |
| Pan (drag in preview) | Drag inside the live preview canvas to offset the layer content. The current offset is shown as Pan: X, Y. |
| ⊞ Snap 8×8 | When active, panning snaps to multiples of 8 pixels — useful for keeping content attribute-cell aligned. |
| Apply | Commits the transform permanently into the layer bitmap (and attribute data, depending on the attribute mode setting). Can be undone with Undo. |
| Reset | Resets all transform controls (angle, scale, pan) back to their defaults without modifying the layer. |
| Close | Closes the dialog. If Apply was not clicked, no changes are made to the layer. |
Dither Export
The Dither Export dialog opens via the ⋯ menu next to any bitmap layer → Dither export…. It converts the layer's colour content into a ZX Spectrum attribute-constrained representation using Ordered Bayer dithering, then writes the result back into that layer.
The Original panel shows a composite of all visible layers as they currently look. The Result panel shows the same composite but with the active layer replaced by its dithered version — so you can see exactly how the final result will look in context before confirming.
| Control | What it does |
|---|---|
| Colour dithering | Ordered Bayer dithering. For each 8×8 attribute cell the algorithm selects the best ZX ink+paper colour pair (using perceptual colour distance), then applies the Bayer matrix to distribute pixels between those two colours and simulate mid-tones. |
| B&W dithering | Monochrome mode. Uses white ink on black paper. The same Bayer matrix and strength settings apply. Useful for creating clean halftone patterns. |
| Floyd-Steinberg dithering | Error diffusion dithering inspired by the Image Spectrumizer algorithm. Works in two passes: first, the best ink+paper colour pair is selected for each 8×8 cell (same perceptual selection as Bayer); then Floyd-Steinberg error diffusion is applied pixel by pixel within each cell — quantisation error is spread to neighbouring pixels using the classic 7/3/5/1 weights. Compared to Bayer, it produces smoother gradients with fewer regular dot patterns and generally looks better on photographs and continuous-tone images. Error diffusion is kept within each cell boundary to prevent colour bleeding across attribute borders. |
| Dither strength | Controls the intensity of the Bayer pattern (0–100 %). At 0 % the result is equivalent to a direct nearest-colour conversion. At 100 % the full dither pattern is applied. 70 % is a good starting point. |
| Matrix | Selects the Bayer matrix size: Bayer 2×2, Bayer 4×4 (recommended), or Bayer 8×8. Larger matrices produce finer patterns with more tonal gradations; smaller matrices are coarser but cleaner at low zoom. |
| Diffusion strength | Controls the intensity of the Floyd-Steinberg error diffusion (0–100 %). At 0 % the result is equivalent to a direct conversion; at 100 % the full error is propagated. 80 % is a good starting point. Only visible when Floyd-Steinberg is selected. |
| Brightness / Contrast / Saturation | Pre-processing adjustments applied to the source image before dithering. Increasing contrast or saturation often improves colour cell selection. These adjustments are temporary and only affect the conversion — the original layer pixels are not modified by them. |
| Auto tune | Automatically finds the best brightness/contrast/saturation combination for the current dither method and strength. Useful as a starting point — you can fine-tune manually afterwards. |
| Split / Result only / Source only | Switches the preview between a split view (Original left, Result right), result only, or source only. |
| Apply to layer | Writes the dithered result into the layer. Paper pixels of the dithered cells are set to transparent — only the ink (dither pattern) pixels are written, so underlying layers show through the gaps. Original transparent cells (TRANSPARENT_ATTR) are always preserved as transparent. |
| Cancel | Closes the dialog without modifying the layer. |
Color to Transparency
The Color to Transparency dialog opens via the ⋯ menu next to any bitmap layer → Color to transparency…. It lets you pick one colour used in the layer and make every pixel of that colour fully transparent — useful for removing backgrounds or unwanted fills from a layer without affecting other colours.
The Original panel shows the layer composite as it currently looks. The Result panel shows the same composite with the chosen colour replaced by transparency, so you can judge the effect in context before applying.
| Control | What it does |
|---|---|
| Used colors in layer | Lists every visible colour present in the active layer with a colour swatch and the pixel count. Click a colour to select it. |
| Selected color | Shows the currently selected colour. The Result preview updates immediately when you pick a different colour from the list. |
| Split / Result only / Source only | Switches the preview between a split view (Original left, Result right), result only, or source only. |
| Apply to layer | Permanently removes all pixels of the selected colour from the layer (sets them to transparent). Can be undone with Undo. |
| Cancel | Closes the dialog without modifying the layer. |
Merge with Layer Below
Merge with Layer Below is available via the ⋯ menu next to any bitmap layer → Merge with layer below…. It composites the active bitmap layer onto the layer immediately below it and removes the active layer. The result is stored in the lower layer.
Selection panel
| Control | What it does | When to use it |
|---|---|---|
| Copy / Paste / Cut | Clipboard-based selection operations on bitmap data. | Use for duplication and repositioning of bitmap content. |
| To Layer | Moves or copies selected content into a new layer. | Useful for separating screen elements. |
| Delete | Deletes the selected contents. | Use after confirming the selected area. |
| Move | Turns the selection into a movable floating selection. | Use for repositioning. |
| Move 8 px | Snaps movement to 8-pixel steps. | Useful for attribute-aligned placement. |
Import / export / project files
When loading a project with Load Project, a progress overlay shows the loading stages. This is useful for large projects with many layers or text objects.
| Control | Mode | Purpose |
|---|---|---|
| Import Image | Both | Converts a regular image (JPG, PNG, …) to ZX-compatible screen data. In classic ZX mode a conversion dialog appears with a live before/after preview and these options: Crop / selection (Source panel): If the source image is larger than 256×192 px, a selection overlay appears directly on the Source preview. Drag the white rectangle to choose which part of the image to import. Resize it by dragging any of the 8 corner or edge handles. The info bar below the preview shows the current selection position and size in source pixels. The checkbox Lock 4∶3 constrains the selection to the exact 256∶192 aspect ratio — if the selection covers most of the image, a centered crop is placed automatically; for smaller selections only the shorter dimension is adjusted. Method: Direct conversion (two most common ZX colours per 8×8 cell), Dithering — Ordered Bayer (dot patterns simulate gradients and mid-tones), Black & White dithering (monochrome, white ink on black paper), or Floyd-Steinberg dithering (error diffusion — see below). Dither strength (0–100 %): intensity of the Bayer pattern (Bayer methods only). Matrix: Bayer 2×2 / 4×4 / 8×8 (Bayer methods only). Diffusion strength (0–100 %): intensity of error diffusion (Floyd-Steinberg only). Brightness / Contrast / Saturation (-100…+100): adjust the image before conversion. The preview canvas updates live. Auto tune: automatically finds a good brightness/contrast/saturation combination for the selected crop and conversion method. In Next mode the same crop overlay and Lock 4∶3 option are available. The conversion converts the selected region to the nearest Next palette index. |
| Import SCR / Import L2 | Classic / Next | Loads SCR/BIN screen data (classic) or raw 49152-byte Layer 2 data (Next). |
| Export SCR / Export L2 Raw | Classic / Next | Exports a standard 6912-byte SCR (classic) or raw Layer 2 pixel data (Next). Text objects are baked into the exported image. |
| Export ATTR / Export PAL | Classic / Next | Exports only the attribute block (classic) or the 512-byte Next palette (Next). |
| Export SL2 | Next only | Exports an SL2 file (raw Layer 2 data, alternative extension). |
| Export NXI | Next only | Exports pixels + palette as a single NXI file. Text is baked in. |
| Import NXI | Next only | Loads an NXI file including its palette. |
| Save Project / Load Project | Both | Saves or loads project JSON with all editor state including text layers. Load shows a progress bar overlay. |
3. Sprite Editor
The Sprite Editor handles frame-based sprite work. It supports two main modes: Classic ZX Spectrum (1bpp monochrome or color with ZX attributes) and ZX Spectrum Next 8bpp (indexed 256-color). Select the mode from the Sprite mode dropdown in the setup panel.
Classic ZX sprite mode
| Area | What it does |
|---|---|
| Sprite setup | Set sprite name, palette, bright, width (multiples of 8), height (any), zoom, monochrome/color mode, mask and grid. |
| Monochrome / Color | Monochrome stores only a 1bpp bitmap. Color additionally stores a ZX attribute per 8×8 cell. |
| Mask: ON/OFF | When on, generates or lets you manually edit a 1bpp mask (1 = transparent, 0 = opaque). Classic sprite routines use OR/AND masking. |
| Frame controls | New Frame, Duplicate Frame, Delete Frame — build multi-frame animations. |
| Sprite tools | Shift and rotate the active frame or all frames at once. See Sprite tools below. |
| Sprite canvas | Left draws, right erases. Dragging interpolates missing pixels. Middle-click picks color. |
| Mask panel | Edit mask pixels manually. Restore auto-generated mask with ↺ Auto. |
| Animation preview | Plays frames at the configured delay (ms). |
| Export BIN | Binary export of all frames: bitmap rows then mask rows per frame. |
| Export ASM | Assembly DB listing, one row per line, with frame labels and optional mask. |
| Import ASM / BIN | Re-imports previously exported data back into frames. |
Sprite tools — shift & rotate
The Sprite tools section in the Sprite Setup panel provides pixel-level shift and 90° rotation for the current frame or all frames at once. Both classic ZX and Next 8bpp modes are fully supported. If a mask is active, it is transformed together with the pixel data.
| Button | What it does |
|---|---|
| ← / → / ↑ / ↓ shift | Moves all pixels of the current frame one pixel in the chosen direction. Pixels that overflow the edge are discarded — the operation does not wrap around. In classic color mode the per-pixel color data moves with the pixels; the attribute grid (8×8 cells) stays anchored to the canvas. |
| ⟲ / ⟳ rot | Rotates the current frame 90° counter-clockwise or clockwise. Only works on square sprites (width = height). If the sprite is not square, a warning appears in the Sprite Setup panel. In classic mode, attribute cells are rotated together with the pixel data when the attribute grid is itself square. |
| ← / → / ↑ / ↓ all | Same as the single-frame shift buttons, but applied to every frame in the set. |
| ⟲ / ⟳ all | Same as the single-frame rotate buttons, but applied to every frame in the set. |
Next 8bpp sprite mode
In Next mode each pixel stores a palette index (0–255). Index 0 is the hardware transparent color by default. The editor uses the 256-color Next palette for drawing.
| Feature | Description |
|---|---|
| Width / Height | Both must be multiples of 16 (step 16). Minimum 16×16. The Next hardware sprite unit is always 16×16 pixels. |
| 256-color palette | Left-click a color to set the draw color. Right-click to set the transparent index. |
| Middle mouse on canvas | Picks the color index under the cursor. |
| Transparent index | Pixels with this index are treated as transparent by the Next sprite hardware. Default is index 0. |
| Export Next SPR | Exports an SPR file. For a 16×16 sprite: 256 bytes. For larger sprites see below. |
| Export ASM | DB listing in Next 8bpp format with sub-sprite labels for multi-tile sprites. |
| Export format | 8bpp raw — one byte per pixel (standard). 4bpp packed — two pixels per byte (uses hw4 format, 128 bytes per 16×16 tile). |
Large / multi-tile sprites
The ZX Spectrum Next hardware supports only 16×16 pixel sprites. To create larger characters or objects you combine multiple hardware sprites, each 16×16, positioned adjacent to each other in software.
The editor supports this directly: set any canvas size that is a multiple of 16 in both dimensions (e.g. 32×32, 32×48, 64×64). The editor then:
- Draws the info badge showing the sub-sprite grid, e.g. "Next sprite: 2×2 = 4× 16×16 sub-sprites".
- SPR export outputs all hardware tiles sequentially: left-to-right, top-to-bottom. A 32×32 sprite produces 4 × 256 = 1024 bytes (8bpp), ready for
SPRITE CONTINUEcalls. - ASM export produces a separate label for each 16×16 tile:
sprite_frame0_sub0_0:,sub1,sub2, etc., with a comment showing the pixel offset of each tile.
SPRITE N,X,Y,PAL,ID for the first tile, then SPRITE CONTINUE for subsequent tiles at X+16, X+32 offsets. The SPR file from this editor is laid out in exactly the order Next expects for sequential loading.4. Font Editor
The Font Editor manages either the standard character set (32..127) or UDGs (A..U). It supports glyph editing, mask editing, transforms, ZX ROM import, and ASM preview. The active font in the Font Editor can be used directly by the Text tool in the Screen Editor — select Font editor from the Text tool font dropdown.
| Area | What it does |
|---|---|
| Font setup | Set font name, width, height, zoom, mask mode, and grid. |
| Glyph tools | Shift and rotate the active glyph or the entire set; load ZX 8×8; import ROM/CH8/ASM-like input. |
| Character set | Switch between standard printable characters and UDGs. |
| Glyph canvas | Main glyph editor. Left-click draws; right-click erases. |
| Mask editor | Works like sprite mask editing when mask mode is enabled. Manual edits override the auto-generated mask until you restore it with ↺ Auto. |
| Mask fit preview | Visible when mask mode is on. Shows a composited preview of the active glyph rendered over a checkerboard background using the AND/OR mask technique — the same way a classic ZX sprite routine would draw the character. The checkerboard represents arbitrary background pixels. Use this to verify that the mask correctly hides the background around the glyph edges. |
| Glyph preview | Enlarged view of the active glyph at the current zoom. |
| Mask preview | Shows the current mask bitmap for the active glyph alongside the glyph preview. |
| Preview / Export | Large preview, mask preview, ASM preview, plus BIN/ASM import-export for both font and UDG sets. |
| Download ZX Routines | Generates a ready-to-use Z80 assembly file with DrawFontGlyph (and optionally DrawFontGlyphMasked) routines tailored to the current font dimensions. |
| Use in Screen Editor | Select Font editor from the Text tool's font dropdown to render screen text using the currently edited font. |
5. Keyboard and mouse controls
| Shortcut / control | Action |
|---|---|
| Left mouse | Draw / place / confirm most editor actions. In Text tool: click canvas to create a new text object with immediate focus. |
| Right mouse | Erase in bitmap editors. In Attr Only mode: writes the current attribute with INK and PAPER swapped — useful for inverting cell colors. In Next sprite mode: sets the transparent color index. |
| Middle mouse | Screen Editor: samples the visible attribute (classic) or color index (Next) under the cursor. Next Sprite Editor: picks the color index under the cursor. |
| Ctrl + Z | Undo. |
| Ctrl + Y | Redo. |
| Ctrl + Shift + Z | Redo. |
| Ctrl + C / V / X | Copy / Paste / Cut selection in Screen Editor. |
| Enter / Esc | Commit / cancel floating selection. In text editor: Esc closes the text editor box. |
| Ctrl + Enter | Confirm and close the text editor box. |
| Delete / Backspace | Deletes the active text object when the Text tool is selected and no editor box is open. |
| + / - | Zoom in / out in Screen Editor. |
| W A S D | Scroll around the zoomed screen canvas. |
6. Recommended workflows
Classic full-screen workflow
- Start in Screen Editor (Classic ZX Spectrum mode).
- Set INK, PAPER, and Bright; use INK ⇄ PAPER for quick reversal.
- Turn on the 8×8 grid to monitor attribute boundaries.
- Use layers for background, foreground, and overlays. Use Transparent PAPER on upper layers when lower-layer background should remain visible.
- Use Attr Only to fine-tune ZX attribute cells without damaging bitmap structure.
- Export with Export SCR when finished.
Text overlay workflow
- Select the Text tool from the toolbox.
- Click on the canvas where you want to place text — the editor opens immediately with focus, start typing.
- Change color by clicking an INK swatch (classic) or a palette color (Next) while the editor is open.
- Use Bold or Italic from the text panel for styling. Switch Font to ZX ROM 8×8 for authentic look.
- Drag the ⠿ handle to move the editor box if it covers your work.
- Press Ctrl+Enter to close the editor.
- Click and drag the text on the canvas to reposition, or use the Layers panel to manage visibility and order.
- When satisfied, use Merge Layers to rasterize the text into pixels for final export.
Dithering workflow
- Select the Dither tool from the Paint & Color group.
- Choose a dither pattern from the Dither dropdown: Solid, Checker, Sparse, or Radial.
- Adjust the Dither len. slider to control the fade-out distance of the stroke.
- Paint over the canvas — the tool progressively blends INK and PAPER within the attribute constraints.
Layer Dither Export workflow
Use this when you have a layer with solid or semi-transparent areas and want to convert its colours to ZX Spectrum attribute-constrained dithering — turning the layer into a dithered ink-only overlay that blends naturally with layers underneath.
- In the Layers panel, click ⋯ next to the bitmap layer you want to dither.
- Choose Dither export… from the context menu.
- In the dialog, select the method: Colour dithering (default) for full colour work, or B&W dithering for monochrome halftone effects.
- Set Dither strength — 70 % is a good starting point. Lower values produce cleaner, less noisy results; higher values better approximate mid-tones.
- Choose a Matrix: Bayer 4×4 is recommended for most work. Use 2×2 for a coarser, bolder look.
- Use the Brightness / Contrast / Saturation sliders to pre-process the source if needed, or click Auto tune to let the editor find a good starting point automatically.
- Check the Result panel — it shows the composite with all other visible layers, exactly as the final result will look.
- When satisfied, click Apply to layer. The dithered ink pattern is written to the layer; paper pixels become transparent so underlying layers show through.
Next Layer 2 screen workflow
- Switch to Screen Editor and select ZX Spectrum Next Layer 2 from the mode dropdown.
- Pick Color A with left-click and Color B with right-click in the 256-color palette grid. Middle-click on the canvas picks the color under the cursor.
- Draw freely — no color clash, no attribute grid.
- Use the Brightness / Contrast / Saturation sliders under the palette for temporary preview tuning. Use Apply to layer only when you want those changes baked permanently into the active layer; otherwise use Reset.
- Use Import NXI to load an existing Next screen, or Import L2 for raw pixel data.
- When done, use Export NXI for a complete file (pixels + palette), Export NXI + NXP (compat) for split compatibility output, or Export L2 Raw / Export SL2 for raw pixel data only.
- To load in NextBASIC:
LOAD "screen.nxi" LAYER 2.
Image import and Next → Classic conversion with dithering
- In classic ZX mode, click Import Image and select a JPG/PNG file — or switch the screen mode from Next Layer 2 to Classic ZX Spectrum. A conversion dialog opens.
- The dialog shows a live preview with the source image on the left (Source) and the converted ZX result on the right (Result). Both update automatically as you change any setting.
- If the source image is larger than 256×192 px, a selection overlay appears on the Source preview. Drag the white rectangle to select the region you want to import. Resize it using the corner or edge handles. The info bar below shows the current position and size in source pixels. Use Lock 4∶3 to snap the selection to the correct ZX aspect ratio.
- Choose the conversion method: Direct for speed and clean solid areas, or Dithering (Ordered Bayer) for photos and complex graphics where gradients matter.
- If dithering is selected, set the dither strength (70–100 % is a good starting point) and pick a matrix: Bayer 4×4 is the best general-purpose choice.
- Use the Brightness / Contrast / Saturation sliders to pre-process the source image. Increasing contrast often improves ZX conversion results by making colours more distinct. Click Auto tune to let the editor find a good starting point automatically.
- When the preview looks good, click Import. The conversion is applied to the canvas and can be undone.
Classic → Next conversion workflow
- Design your image in classic ZX Spectrum mode including any text layers.
- Use Convert to Next — each visible pixel is mapped to the nearest Next palette color. Text object colors are also converted automatically.
- Continue editing in Next mode with full 256-color freedom.
- Export as NXI.
Next sprite workflow (single 16×16)
- Switch to Sprite Editor, select ZX Spectrum Next 8bpp mode.
- Set size to 16×16 (default). Select palette colors and transparent index.
- Draw your sprite. Use middle-click to pick colors.
- Add frames for animation with New Frame.
- Export as Next SPR — 256 bytes per frame, load with
LOAD SPRITEor your own loader.
Next sprite workflow (large / multi-tile)
- Switch to Sprite Editor, select ZX Spectrum Next 8bpp mode.
- Set width and height to multiples of 16 (e.g. 32×32 for a 2×2 tile character). The info badge will show "2×2 = 4× 16×16 sub-sprites".
- Draw on the full canvas — the editor handles the internal tile split automatically.
- Export as Next SPR. The file contains all hardware tiles sequentially (left-to-right, top-to-bottom).
- In your Z80 code, load consecutive sprites with
LOAD SPRITE/NEXTREGcalls and position them at X, X+16, X+32, Y, Y+16, Y+32 as appropriate. - Alternatively use the ASM export which provides per-tile labels for direct inclusion in your sjasmplus or ASW source.
Classic sprite workflow
- Switch to Sprite Editor.
- Set width (multiple of 8), height, zoom, and mode (Monochrome or Color).
- Create frames with New Frame.
- Draw frames and preview them with Play.
- Use mask mode if your target routine requires explicit mask data.
- Export as BIN or ASM.
Typical font workflow
- Switch to Font Editor.
- Select Standard 32..127 or UDG A..U.
- Import an existing font, load ZX 8×8, or draw from scratch.
- Edit glyphs from the thumbnail grid one by one.
- Apply shift and rotate tools where needed.
- To use your font in the Screen Editor, go to the Text tool and select Font editor from the font dropdown.
- Export in BIN or ASM format.