The Image Editor is the pixel-level editing tool embedded within the Character Designer, Asset Generator, and Spritesheet Editor. It provides palette management, drawing tools, color merging, transparency controls, and whole-image operations (mirror, move, scale, resize) for refining AI-generated images into clean pixel art.

Overview¶

The Image Editor appears as the Image Editor tab (second tab) in the image wizard panel. It is part of a three-tab workflow:

1. AI Image -- View the raw AI output, configure grid size and color count, run pixel snap.
2. Image Editor -- Edit the pixel art with drawing tools and palette controls.
3. Preview -- View the final asset with transparency (non-background assets only).

Layout¶

The Image Editor is split into two areas:

• Left: Palette Sidebar -- Color swatches, transparent color picker, and preview generation.
• Right: Toolbar and Canvas -- View controls, drawing tools, and the editable pixel canvas.

While this tab is active, an Image menu also appears in the title bar. See Image menu.

Toolbar¶

The toolbar at the top of the canvas area contains these controls:

View Controls¶

Drawing Tools¶

History¶

Undo covers pixel edits, palette changes, and every command in the Image menu.

Palette Sidebar¶

Color Swatches¶

The palette displays all colors extracted from the pixel-snapped image as clickable swatches. Each swatch shows the color and can be interacted with:

• Click a swatch to select it as the active drawing color.
• Double-click a swatch to open a color picker and change that color. All pixels of the old color are replaced with the new color across the entire image.
• Shift+click a swatch to merge it into the currently selected color. All pixels of the shift-clicked color are replaced with the selected color, and the swatch is removed from the palette.

Below the swatches, the currently selected color is shown with its hex code and pixel count.

Transparent Color Picker¶

For non-background assets (characters, props, UI elements), the palette sidebar includes a Transparent color picker:

1. Set the transparent color using the color picker or hex input.
2. Click the First button to quickly set it to the first color in the palette.
3. Click Generate Preview to create a version of the image with that color replaced by transparency.

The preview opens in the Preview tab.

Image menu¶

The Image menu in the title bar is available whenever the Image Editor tab is open. Every command applies to the whole image, keeps hard pixel edges (no smoothing), and can be undone with Ctrl+Z.

Mirror Image¶

Mirroring horizontally is the quickest way to get a "facing left" version of a sprite drawn facing right.

Move Pixels¶

Pixels pushed past the edge of the canvas are dropped, and the vacated column or row is filled with the transparent color if one is set, otherwise with the first palette color. Hold the shortcut down to nudge repeatedly. Use this to center a sprite inside its frame before saving.

Scale Image…¶

Opens the Scale Image dialog, which resamples the artwork to a new size using nearest-neighbor scaling so the pixels stay crisp.

• Pixels / Percent toggle -- Enter the new size in absolute pixels or as a percentage of the current size. Switching units keeps the value you already typed.
• Width / Height -- The target size. The minimum is 1 pixel.
• Lock button -- When the padlock is closed (the default), changing one dimension updates the other to keep the aspect ratio. Click it to unlock and stretch freely.
• The line Current: W x H px → New: W x H px shows the result before you commit.
• Apply performs the scale; Cancel or clicking outside the dialog closes it without changes.

Resize Canvas…¶

Opens the Resize Canvas dialog. Unlike scaling, the artwork keeps its size; only the canvas around it grows or shrinks.

• Pixels / Percent, Width / Height, and the aspect Lock work exactly as in Scale Image.
• Anchor -- A 3x3 grid of arrows. Pick where the existing image should sit inside the new canvas: a corner, an edge midpoint, or the center (default). When shrinking, the anchor decides which side gets cropped.
• Newly exposed canvas is filled with the transparent color if one is set, otherwise with the first palette color.
• Apply performs the resize; Cancel closes the dialog.

Typical uses: padding a 60x60 sprite out to a clean 64x64 frame, or trimming empty space around a prop. After a scale or resize, the saved asset's dimension metadata is updated to the new size.

Preview Tab¶

The Preview tab (available for non-background assets) shows the final asset with transparency applied. It provides:

• View controls -- 1:1 view, zoom in/out.
• Background selection -- View the transparent asset against:
• Pink background (to verify transparency)
• Background 1 (sample game background)
• Background 2 (sample game background)

AI Image Tab¶

The first tab in the wizard shows the raw AI-generated image with these controls:

Grid Overlay¶

Toggle the grid overlay to visualize how the image will be divided into pixels during the snap process. Adjust the Grid size slider (1-32 pixels) until the overlay grid aligns with the pixel boundaries visible in the generated image.

Color Count¶

Use the Colors slider to set the number of palette colors for quantization. Available values: 8, 16, 24, 32, 40, 48, 64.

Pixel Snap¶

Click Get Pixel Perfect to process the image:

1. The image is divided into grid cells.
2. Each cell is reduced to a single color (the dominant color in that cell).
3. Colors are quantized to the specified palette size using k-means clustering.
4. The result is a clean pixel art image at reduced resolution.

Saving¶

Click Save Pixel Art (or Update Asset in edit mode) at the bottom of the panel to save. The system stores:

• The original AI-generated image
• The processed pixel art image
• The transparent version (for non-background assets)
• Palette metadata, dimensions, and grid size