⚡ Legacy Tools | Sorceress Wiki | Sorceress

Legacy Tools collects older Sorceress utilities that are still available for projects and workflows that depend on them. These tools are maintained as compatibility utilities rather than the primary modern toolset, but they can still be useful for previewing local HTML games, testing layouts across devices, and preparing sprite assets.

Open Legacy Tools

What it includes

The Legacy Tools area links to three older utilities:

Your Games — preview locally stored browser games through the Sorceress local server.
Layout Preview — view one selected game across many device frames at once.
Auto-Sprite — convert videos or image sequences into cleaned, cropped sprite sheets or PNG frame exports.

Use these tools when you need a legacy local preview setup, when you are working with local game folders, or when an older project was built around these utilities.

Your Games

Your Games is a local browser-game previewer. It connects to the Sorceress local server, reads your configured games folder, lists the game folders it finds, and opens the selected game inside a preview frame.

What it does

Shows whether the local server is connected or offline.
Lists local game folders from the configured games directory.
Lets you select a game and preview it directly in Sorceress.
Lets you change the games folder from the sidebar when the server is connected.
Lets you choose the default page to load, such as index.html or game.html.
Provides responsive, mobile, tablet, and desktop preview sizes.
Supports portrait/landscape rotation for selected device presets.
Supports Fit, 1:1, and True physical-size preview modes.
Includes refresh and fullscreen controls.
Includes a publish action for sending a local game into the community publishing flow.
Lets you hide or show the Games sidebar.
Remembers preview preferences such as selected device, rotation, scale mode, monitor settings, and default page.

Requirements

Your Games requires the Sorceress local server to be running. If the server is offline, the sidebar shows Server Offline and the game list will not load. Use Server Settings in the tool or go to Settings to configure the local server.

Your local games should be organized as one main games folder containing one folder per game. Each game folder should include the page you want Sorceress to load, usually index.html.

How to use Your Games

Start the Sorceress local server on your computer.
Open Legacy Tools and choose Your Games.
Check the server status in the left sidebar.
If needed, click the displayed games folder path and enter the folder that contains your game folders.
Click Refresh Games.
Select a game from the list.
Set Default Page if your game does not use index.html.
Use the top preview toolbar to switch between responsive, phone, tablet, and desktop sizes.
Use Refresh Game after editing local files.
Use Fullscreen when you want a larger playtest view.

Preview options

Responsive fills the available preview area with a widescreen frame. This is useful for quick testing without committing to a device preset.

Mobile presets include common phone-sized viewports, including iPhone SE, iPhone 14, iPhone 14 Pro Max, Pixel 7, and Galaxy S23.

Tablet presets include iPad Mini, iPad Air, iPad Pro 11", and iPad Pro 12.9" style sizes.

Desktop presets include HD 720p, Full HD 1080p, QHD 1440p, 4K UHD, and 5K.

When a device preset is selected:

Rotate switches between portrait and landscape.
Fit scales the selected device down to fit the available workspace.
1:1 shows the selected viewport at its actual CSS pixel size. Large presets may overflow and require scrolling.
True approximates the device’s physical screen size on your monitor.

For True size, configure:

Monitor size in inches.
Monitor resolution: 720p, 1080p, 1440p, 4K UHD, or 5K.

True-size preview is only as accurate as the monitor information you enter.

Layout Preview

Layout Preview is a multi-device testing board for local games. Instead of showing one preview at a time, it lets you add many device frames and compare how the same game layout behaves across phones, tablets, laptops, desktops, and TVs.

What it does

Connects to the same local server and game folder setup used by Your Games.
Lets you set a default page that is loaded for all previews.
Lets you select one local game from the left panel.
Lets you add device previews from the right panel.
Groups previews into rows.
Supports drag-and-drop rearranging within rows and between rows.
Provides Defaults for a common cross-device testing set.
Supports Refresh and Hard Refresh for all previews.
Lets you clear all device cards.
Lets you zoom individual devices in or out.
Lets you toggle true physical size per device.
Lets you mute, refresh, or remove individual previews.
Lets you hide or show the Games and Devices side panels.
Remembers your device layout, monitor settings, side-panel visibility, and default page.

Device categories

Layout Preview includes device groups for:

iOS phones
Android phones
iPad
Tablet
Laptop
Desktop
TV

Each device entry shows its viewport dimensions. Many entries also show device pixel ratio and physical diagonal information, which is used for true-size previewing.

The available set includes modern phones, tablets, laptops, desktops, ultrawide desktops, and TV resolutions. Examples include iPhone SE through iPhone 16 Pro Max, Pixel and Galaxy phones, iPads, Galaxy and Pixel tablets, laptop sizes, desktop 1080p/1440p/4K, ultrawide displays, and TV 720p/1080p/4K.

How to use Layout Preview

Start the Sorceress local server.
Open Legacy Tools and choose Layout Preview.
In the left panel, set Default Page if needed.
Select a game from the game list.
In the right panel, choose a device category.
Click a device to add it to the preview area.
Use Defaults to load a common set of phone, tablet, laptop, and desktop previews.
Drag device cards to rearrange them or move them to different rows.
Use per-device controls to zoom, refresh, mute audio, toggle true size, or remove a card.
Use toolbar actions to refresh all, hard refresh, clear, or hide/show side panels.

Rows and drag-and-drop layout

Each preview card belongs to a row. When you drag a card, Layout Preview shows row drop targets and insertion areas so you can place the device before or after another card, or move it into a different row. This is useful for organizing test sets, such as one row for phones, one for tablets, and one for desktop or TV layouts.

Refresh options

Refresh reloads all currently visible previews normally.

Hard Refresh reloads previews with a cache-busting refresh. Use this when you have edited local files and a preview still appears stale.

Individual cards also include their own refresh button when you only want to reload one device.

True Size settings

The True Size toggle on a device card uses your monitor settings to approximate that device’s physical display size. Configure these settings in the right panel:

Monitor size in inches.
Monitor resolution: 1080p, 1440p, 4K, or 720p.

The tool displays the calculated monitor PPI. True Size is an approximation and depends on accurate monitor information.

Auto-Sprite

Auto-Sprite is a legacy asset-processing tool for converting videos or image sequences into sprites. It can extract frames, remove backgrounds, crop and normalize frame sizes, clean edges, preview animation, export sprite sheets, export individual PNG frames, and hand off sprite sheets to Sprite Analyzer.

What it does

Accepts video files or image files.
Supports multiple videos in a queue.
Treats image batches as frame inputs.
Lets you choose start frame, end frame, and frame interval before extracting video frames.
Shows extracted frames and lets you focus, select, delete, restore, and preview frames.
Offers classic chroma key background removal.
Offers CorridorKey for green-screen footage.
Provides edge cleanup tools for fringe removal, edge smoothing, and borders.
Supports multiple edge chroma passes and an automatic edge-chroma workflow.
Supports crop modes for animation-safe framing or tight content framing.
Lets you choose aspect ratios, height presets, custom dimensions, padding, scale, and character offset.
Lets you drag the character in the preview to reposition it on the canvas.
Provides preview zoom, pan, background colors, and simple scene backgrounds for checking edges.
Exports sprite sheets or ZIP files of PNG frames.
Can send sprite sheets to Sprite Analyzer.
Supports saved settings profiles for signed-in users.

Uploading media

Auto-Sprite accepts either videos or images in a single upload. Do not mix videos and images in the same upload action. If you upload multiple videos, they appear in a file queue. If you upload images, they are treated as frame inputs.

To upload:

Open Auto-Sprite from Legacy Tools.
Drag files into the upload area, or click the upload area and choose files.
For videos, choose frame extraction settings.
Process the video, or process all videos in the queue.
For image batches, frames are loaded directly.

Video extraction settings

For videos, configure:

Start Frame — the first frame to extract.
End Frame — the frame boundary to extract up to.
Extract Every Nth Frame — skips frames to reduce animation length. Higher values extract fewer frames.

The tool displays an estimated number of frames to extract before processing.

Working with the file queue

When multiple videos are loaded, the right panel shows a file list. Each item shows whether it has been processed. You can:

Click a file to switch to it.
Remove an individual file from the queue.
Clear all queued files.
Process all videos.
Apply the current chroma key, crop, and edge settings to all files.
Export all processed videos as individual sprite sheets or as grouped PNG ZIPs.

This is useful when several animations were recorded with the same background and should share the same cleanup settings.

Frame selection and deletion

The frame panel shows thumbnails for all extracted frames.

You can:

Click a frame to focus it in the preview.
Use standard multi-select behavior to mark multiple frames.
Use Select All to mark all included frames.
Use Deselect All to clear the marked selection.
Use Delete to remove marked frames from the included set.
Press Delete or Backspace to delete marked frames.
Click Restore on a deleted frame to include it again.
Change thumbnail size with the size slider.

Deleted frames are excluded from preview and export unless restored.

Background removal modes

Auto-Sprite includes two background removal modes.

Classic Chroma

Classic Chroma removes a selected solid background color in the browser. It works with any solid color background.

Classic Chroma has two modes:

Global — removes matching color anywhere in the frame.
Flood — removes matching color connected to the frame edges, helping preserve similarly colored details inside the subject.

Use the color swatch, hex field, or eyedropper to choose the key color. Adjust Tolerance to control how broadly colors are removed. If too much of the character disappears, reduce tolerance or switch from Global to Flood.

CorridorKey

CorridorKey is designed for green-screen footage and can produce cleaner edges with automatic despill. It is best when the background is green and the subject does not contain important green details.

CorridorKey options include:

Key Color — choose the green-screen color with the swatch, hex field, or eyedropper.
Tolerance — controls the alpha-hint mask used for the keying pass.
Alpha Hint Preview — shows a mask preview so you can evaluate whether the key color and tolerance are targeting the background correctly.
Cloud GPU or Local GPU processing.

The local option requires a connected local CorridorKey setup and a compatible NVIDIA GPU with CUDA and sufficient VRAM. If the local server is offline, use the setup link in Settings or switch processing mode.

CorridorKey warns that despill may affect green parts of the character, such as clothing or eyes. If the subject contains important green details, use Classic Chroma instead.

Edge cleanup tools

After a background removal mode is active, Auto-Sprite shows edge tools.

Edge Chroma

Edge Chroma removes colored fringe left by chroma keying. It targets only edge pixels, so it is safer than applying another global key pass.

The main controls are:

Auto Edge Chroma — automatically detects and removes distinct fringe colors from the edge.
Passes — controls how many automatic fringe colors to detect.
Manual Advanced Configuration — opens per-pass settings.

Manual pass settings include:

Color — the fringe color to target.
Eyedropper — sample a fringe color from the preview.
Tolerance — how broadly the pass matches the target color.
Depth — how many edge pixels inward the pass may affect.

You can add more passes after Edge Chroma is active, or remove the edge chroma effect.

Edge Smooth

Edge Smooth softens jagged staircase edges by blending exposed edge pixels. Enable the checkbox, then adjust Strength. Higher strength produces stronger smoothing but can also make edges softer.

Edge Tools

Edge Tools adds a colored border around the character. Options include:

Border Color — the color of the border.
Position — Inner, Outer, or Center.
Width — border width in pixels.
Edge Trim — erodes contaminated edge pixels before adding the border.
Fade — fades the border transparency.
Invert fade direction — switches which side of the border is most transparent.

Use Apply Edge Tools to preview the border, Re-apply after changing settings, or Remove to take it off.

Cropping, canvas, and preview controls

The top preview toolbar controls the final frame size and positioning.

Crop modes:

Animation — preserves consistent frame boundaries across the animation. This is usually best for sprite animations.
Tight — crops to visible content and scales uniformly to fit the canvas.
Tight Stretch — crops to visible content and stretches to fill the canvas.

Aspect ratios include:

Square / 1:1
4:3
16:9
3:4
9:16

Height presets include:

You can also enter a custom width and height.

Position and sizing controls include:

Pos — X and Y offsets from center.
Reset — returns the character to the center.
Pad — adds padding around the content.
Scale — enlarges content within the frame.

Preview controls include:

Play/pause animation preview.
Preview FPS.
Zoom percentage and zoom reset.
Mouse-wheel zoom.
Pan with middle mouse or Alt+drag.
Drag the character directly when crop frames are available.
Background swatches, custom background color, and scene backgrounds for edge checking.

Exporting and handoff

When output is ready, use the Download menu. Available export options include:

Sprite Sheet — one PNG containing all included frames in a grid.
PNG ZIP — individual PNG frame files in a ZIP.
All Sprite Sheets — exports processed queued videos as individual sprite sheets.
All PNG ZIPs — exports processed queued videos as grouped PNG frame exports.

Auto-Sprite can also send output to Sprite Analyzer. When multiple processed videos are open, the send action can include multiple sheets.

Downloads and some handoff actions may prompt you to sign in or upgrade, depending on your account state.

Settings profiles

Signed-in users can save and load Auto-Sprite settings profiles. Profiles store your current chroma key, edge tools, and crop settings so you can quickly reuse them later.

From the Profiles menu, you can:

Save the current settings as a new profile.
Update the active profile.
Save as a new profile when another profile is active.
Load a saved profile.
Delete a profile.

Profiles are especially useful when you repeatedly process footage from the same capture setup.

Common troubleshooting

Server Offline in Your Games or Layout Preview

Start the Sorceress local server and confirm your server settings. If the server is running but the tool still shows offline, refresh the page and check the configured server address in Settings.

No games found

Make sure the selected games folder contains one folder per game, and each game folder contains the entry page you are trying to load. If your game uses a page other than index.html, update Default Page.

A game preview is stale

Use Refresh Game in Your Games. In Layout Preview, use Refresh for a normal reload or Hard Refresh if cached files are still appearing.

True Size looks wrong

Check your monitor size and resolution settings. True Size depends on the monitor information you enter; incorrect size or resolution will produce inaccurate physical scaling.

Auto-Sprite says not to mix videos and images

Upload either video files or image files in a single upload action. If you need both, process them separately.

Chroma key removes part of the character

Lower the tolerance, switch from Global to Flood mode, or choose a more precise key color with the eyedropper. If the subject contains green details, avoid CorridorKey and use Classic Chroma with careful settings.

Edge tools do not appear

Edge tools appear after frames are loaded and a background removal mode is active. Process your frames first, then apply Classic Chroma or CorridorKey.

CorridorKey local processing is unavailable

Check the local server status in the CorridorKey panel. If it is offline, open Settings and follow the local setup instructions, or switch to Cloud GPU.

Sprite export is unavailable

If the Download button asks you to sign in or upgrade, follow the prompt. Also make sure you have generated crop frames by choosing a canvas size or allowing Auto-Sprite to build the default canvas preview.