Tileset Forge is a browser-based workspace for turning one or more source images into a clean, game-ready tileset. You can upload sheets, remove backgrounds with chroma key tools, automatically detect individual tiles, arrange them onto a new grid, repair pixels, preview transparency, save projects, and export PNG assets.
What it does
Tileset Forge is organized around three phases:
- Upload — add one or more source tileset images.
- Detect — key out a background color, clean edge contamination, and detect individual tiles.
- Build — place detected tiles onto a new grid, edit the result, and export.
It is especially useful for pixel-art and grid-based workflows where you have a sheet of separate sprites, props, terrain chunks, or tile art and want to normalize them into consistent cells for a game engine.
Requirements and access
- Tileset Forge runs in your browser.
- Uploaded files must be image formats your browser can read.
- You can upload multiple source sheets in one project.
- Saving and loading projects requires being signed in.
- Downloading from the Build phase is marked as a Pro feature in the tool. If you do not have access, the download area is locked.
Uploading source images
- Open Tileset Forge.
- In the Upload phase, drag images onto the upload area or click it to browse.
- You may select multiple images. The first image becomes the initial active sheet, and the rest are added as additional source sheets.
- After upload, Tileset Forge moves to the Detect phase.
The upload screen also includes a short intro video. You can ignore the video and upload directly when you are ready.
You can add more source sheets later from the Source Sheets section or the Add Sheet button in Build mode.
Working with source sheets
When your project contains more than one uploaded image, the Source Sheets panel lists each sheet with its name and dimensions.
- Click a sheet to make it active.
- Detection and cleanup settings are stored separately for each source sheet.
- Running detection replaces the detected tiles for the currently active sheet while keeping tiles detected from other sheets.
- Previously placed tiles from other sheets can remain in your build canvas.
This makes it possible to combine props, terrain, decorations, and variants from several separate image files into one output canvas.
Detecting tiles
Detection happens in the Detect phase. The usual workflow is:
- Select the source sheet you want to process.
- Adjust Chroma Key until the unwanted background is transparent in the preview.
- If needed, use Edge Chroma or Edge Trim to remove colored halos or contaminated edge pixels.
- Adjust Tile Detection settings.
- Click Detect Tiles.
- Review the green boxes and tile numbers overlaid on the source image.
- If the detected set looks good, click Continue to Build.
Detected tiles appear in the right-side Tiles panel. Hovering a tile previews a repeated tiling sample using its current processing settings.
If you change cleanup settings after detection, use Refresh Previews to update the tile thumbnails.
Chroma Key settings
Chroma Key removes a background color from the active source sheet before detection, thumbnail generation, placement, and export processing.
Active
Turns chroma key removal on or off for the active source sheet.
Color
The target background color to remove. Tileset Forge attempts to choose this automatically when an image is uploaded. You can change it by:
- Clicking the color swatch and selecting a color.
- Clicking the eyedropper, then clicking a pixel in the source image.
Auto-detect on upload
When enabled, Tileset Forge chooses an initial chroma key color when a source image is uploaded. If the result is wrong, manually pick a better background color.
Mode
Chroma Key has two modes:
- Global — removes all matching pixels throughout the image.
- Flood — removes matching pixels connected to the image edges only.
Use Flood when the background color also appears inside valid tile artwork and should not be removed from enclosed areas.
Tolerance
Controls how close a pixel must be to the selected chroma color before it is removed. The slider ranges from 1–200.
- Lower tolerance removes only very close color matches.
- Higher tolerance removes a broader range of similar colors.
- If tile interiors disappear, lower the tolerance.
- If background remains, raise the tolerance.
Preview and preview background
Use the Preview/Hide button to show or hide the keyed result in the viewport. When preview is visible, you can inspect transparency over these backgrounds:
- Checkerboard
- Black
- Dark blue
- Gray
- Green
- Magenta
- White
Bright preview colors such as green or magenta are useful for spotting leftover background pixels, while black or white can reveal edge halos.
Edge cleanup tools
Edge Chroma
Auto Edge Chroma detects and removes chroma-tinted fringe colors along transparency edges. This is useful when artwork was separated from a flat color background but still has colored antialiasing or outlines.
Options:
- Auto Edge Chroma — turns edge chroma cleanup on or off.
- Passes — how many fringe color passes to look for. Range: 1–20.
- Depth — how many pixels inward each automatic cleanup pass can affect. Range: 1–8.
- Run & Show Passes — analyzes the active source sheet and displays the discovered cleanup passes.
When passes are shown, you can edit them individually:
- Change the pass color with the color swatch.
- Use the eyedropper to sample a pass color from the source image.
- Adjust Tolerance for each pass. Range: 5–150.
- Adjust Depth for each pass. Range: 1–10.
- Remove a pass.
- Add a manual pass.
If cleanup removes too much of the artwork, reduce the pass tolerance or depth, or remove the offending pass. If fringe pixels remain, add or sample another pass and increase settings gradually.
Edge Trim
Edge Trim strips opaque pixels from the outer edge of each detected shape. It is intended for stubborn edge contamination that remains after chroma key and edge chroma cleanup.
Options:
- Enable Edge Trim — turns trimming on or off.
- Depth (px) — number of edge pixels to strip. Range: 1–16.
Use this carefully. A high trim value can remove legitimate outlines or small details.
Tile Detection settings
Min Tile Size
The minimum width and height, in pixels, for a detected tile. Range: 8–128, in steps of 4.
- Increase this to ignore tiny specks or debris.
- Decrease this if small tiles are not being detected.
Max Aspect Ratio
The maximum allowed width-to-height or height-to-width ratio for a detected tile. Range: 1–5, in steps of 0.5.
- Lower values favor square-ish tiles.
- Higher values allow long or tall tiles.
If long objects are missing, raise this value. If large strips of leftover background are detected as tiles, lower it and improve chroma cleanup.
Building a tileset
In the Build phase, you place detected tiles onto a new output grid.
Output Tile Size
Set the target tile cell size in pixels.
- Width and height can be edited independently.
- Values must be greater than 0.
- The interface supports values up to 512 px per dimension.
Each placed tile is processed into this cell size using its stretch, anchor, scale, nudge, flip, rotation, and source cleanup settings.
Scene Background
The scene background only affects preview visibility in the editor. It is not baked into transparent exports.
Options:
- Dark blue
- Black
- Green screen
- Magenta
- White
- Checkerboard
Use different backgrounds to check whether transparent pixels, halos, or seams are visible.
Grid size
The build canvas starts as a 10 × 10 grid. Controls appear around the canvas edges so you can add or remove rows and columns:
- Add/remove row above
- Add/remove row below
- Add/remove column left
- Add/remove column right
The grid cannot shrink below one row or one column. Removing rows or columns can discard placed tiles and pixel edits in that area.
Tile panel and brush preset
The right panel shows all detected tiles.
- Click a tile to select it, make it the current brush, and switch to the Place tool.
- Ctrl/Cmd-click toggles a tile selection.
- Shift-click selects a range.
- Select All selects every detected tile.
- Deselect clears the tile selection.
When one or more tiles are selected in Build mode, the Brush Preset controls define how newly placed tiles behave.
Stretch modes
- Fill — stretches the tile to fill the output cell exactly.
- Fit W — fits the tile to the output width while preserving aspect ratio.
- Fit H — fits the tile to the output height while preserving aspect ratio.
- Fit — fits the tile inside the cell while preserving aspect ratio.
Anchor
The anchor controls where the tile sits inside its cell when it does not fill the whole cell. The nine positions are:
- Top-left, top, top-right
- Left, center, right
- Bottom-left, bottom, bottom-right
Scale origin
The scale origin uses the same nine-position layout and controls where later scale adjustments grow or shrink from.
Build tools
The Build toolbar appears along the top of the canvas. You can click a tool or press its number key.
1 — Select
Select and move placed tile cells.
- Click a cell to select it.
- Shift-click selects a rectangular range from the last selected cell.
- Ctrl/Cmd-click toggles a cell selection.
- Drag selected cells to move them.
- Delete or Backspace removes selected cells.
- Ctrl/Cmd+C copies selected cells.
- Ctrl/Cmd+V pastes copied cells when a destination cell is selected.
2 — Place
Paint the current tile brush onto the grid.
- Click or drag to place tiles.
- Shift-drag constrains placement to a straight horizontal or vertical line.
3 — Clone
Clone pixels from one part of the built canvas to another.
- Click once to set the clone source.
- Paint to clone from that source.
- Alt-click to choose a new source.
- Adjust brush size from the toolbar. Brush size ranges from 1–32.
4 — Erase
Erase pixels from the built canvas with a circular brush.
- Click or drag to erase.
- Shift-drag erases in a straight horizontal or vertical line.
- Adjust brush size from the toolbar. Brush size ranges from 1–32.
5 — Paint
Paint solid-color pixels onto the built canvas.
- Choose a paint color from the toolbar.
- Click or drag to paint.
- Shift-drag paints in a straight horizontal or vertical line.
- Use the eyedropper button or press Q to sample a color from the canvas.
- Brush size ranges from 1–32.
6 — Slice
Erase a freehand enclosed area.
- Click and drag to trace around an area.
- Release to erase the enclosed region.
- Press Esc or right-click to cancel before applying.
7 — Marquee
Select and edit rectangular pixel regions.
Common actions:
- Click-drag to draw a rectangular selection.
- Drag inside a selection to move its pixels.
- Alt-drag inside a selection to copy its pixels.
- Drag selection edges to resize the selected region.
- Delete erases the selected region.
- Ctrl/Cmd+C copies the selected region.
- Ctrl/Cmd+V pastes it as a transformable region.
- Drag inside a pasted transform to move it.
- Drag handles to scale pasted content.
- Use the rotation handles to rotate pasted content.
- Hold Shift while rotating to snap rotation in 5° increments.
- Press Enter or click Place to commit pasted transformed content.
- Press Esc or click Cancel to discard the transform.
Editing placed tiles
When one or more placed cells are selected with the Select tool, a floating tile editor appears on the canvas.
Scale
Scale can be adjusted uniformly or independently on X and Y.
- Uniform scale grows or shrinks both axes.
- X scale changes width.
- Y scale changes height.
- Scale adjustments range from -16 to +16.
- The Origin grid controls where scaling expands or contracts from.
Nudge
Move the tile artwork inside its cell by pixel increments.
- Left/right changes X offset.
- Up/down changes Y offset.
- The current X,Y nudge values are shown in the editor.
Stretch
Change the placed tile’s stretch mode:
- Fill
- Fit W
- Fit H
- Fit
Anchor
Choose the tile’s alignment inside the cell using the nine-position anchor grid.
Transform
Placed tiles can be:
- Flipped horizontally
- Flipped vertically
- Rotated in 90° increments
- Deleted
Pixel edits made with clone, erase, paint, slice, and marquee tools are carried with selected cells when you move, copy, paste, flip, or rotate them in the standard grid view.
Canvas view controls
The top-right viewport controls include:
- Grid — shows or hides the build grid. Shortcut: G.
- Diamond — toggles a 45° diamond/isometric-style grid view.
- Global rotation — rotates placed tiles globally in 15° steps or by entering a degree value.
- Fit — fits the current content to the viewport.
- 100% — returns zoom to 1:1.
- Zoom percentage and canvas dimensions are displayed beside the controls.
Navigation:
- Scroll to zoom.
- Alt-drag or middle-drag to pan.
Diamond view is useful for previewing a tileset in an isometric-style layout. Some pixel overlay editing is designed around the standard rectangular grid, so switch back to the normal grid if you need precise pixel cleanup.
Saving and loading projects
The Project section lets signed-in users save work and reopen it later.
- Enter a project name.
- Click Save.
- Saved projects appear in the project list.
- Click a saved project to load it.
- Click New to clear the current saved-project association and start saving under a new name.
- Use the delete control beside a saved project to remove it.
You can also press Ctrl/Cmd+S to save.
A saved project includes source sheets, detected tiles, tile processing settings, build grid contents, pixel edits, preview background choice, diamond-grid setting, global rotation, and other editor state needed to restore the project.
When loading a larger project, Tileset Forge shows a loading overlay while the canvas and tile data are restored.
Export options
Downloads are available in Build mode for users with access to the export feature.
Before downloading, you can adjust:
Normal
Controls the strength of generated normal maps. Range: 0.5–8, in steps of 0.5.
Padding
When enabled, transparent pixels near visible content carry neighboring color information while remaining transparent. This helps reduce dark seams or filtering artifacts in game engines. Padding passes range from 1–8.
Download choices
Click Download Tileset(s), choose any combination of outputs, then click Download:
- Tile Sheet — exports the full built canvas as a PNG.
- Normals Map — exports a generated normal map PNG for the full built canvas.
- Individual Images (ZIP) — exports each placed grid cell as an individual PNG, with matching normal maps included in the ZIP.
If you export both the tile sheet and normal map at once, your browser may ask for permission to download multiple files. If that happens, allow downloads for the site or export one option at a time.
WizardGenie integration
When Tileset Forge is opened inside a compatible WizardGenie embed, Build mode can show a Drag to WizardGenie Explorer button. Drag it into WizardGenie Explorer to import a generated tileset image.
Mobile panels
On smaller screens, the side panels are available through mobile toggles:
- Forge opens the left settings and project panel.
- Inspect opens the right tile and export panel.
For detailed pixel editing, a desktop or larger tablet screen is recommended.
Keyboard shortcuts
| Shortcut | Action | |---|---| | 1 | Select tool | | 2 | Place tool | | 3 | Clone tool | | 4 | Erase tool | | 5 | Paint tool | | 6 | Slice tool | | 7 | Marquee tool | | G | Show/hide grid in Build mode | | Q | Toggle paint eyedropper while Paint tool is active | | Delete / Backspace | Delete selected cells or erase selected marquee region | | Esc | Cancel selection, slice, or marquee operation | | Ctrl/Cmd+C | Copy selected cells or marquee region | | Ctrl/Cmd+V | Paste copied cells or marquee region | | Ctrl/Cmd+Z | Undo recent grid or pixel edit | | Ctrl/Cmd+S | Save project | | Enter | Place transformed marquee paste | | Scroll | Zoom | | Alt-drag / middle-drag | Pan |
Tips and troubleshooting
Tiles are not detected
- Make sure Chroma Key is active.
- Pick the correct background color with the eyedropper.
- Increase Chroma Key tolerance if the background remains visible.
- Lower Min Tile Size if your tiles are small.
- Raise Max Aspect Ratio if tiles are long or tall.
- Check that the active source sheet is the one you intended to detect.
Too many small artifacts are detected as tiles
- Increase Min Tile Size.
- Improve chroma key cleanup before detecting.
- Use Edge Chroma or Edge Trim to remove fringe pixels and debris.
- Lower Max Aspect Ratio if long background remnants are being detected.
Parts of tiles disappear during background removal
- Lower Chroma Key tolerance.
- Try Flood mode instead of Global if the background color appears inside the artwork.
- Reduce or disable Edge Chroma passes.
- Reduce or disable Edge Trim.
Tiles have colored outlines after cleanup
- Enable Auto Edge Chroma.
- Click Run & Show Passes.
- Increase pass depth or tolerance gradually.
- Add a manual pass and sample the fringe color with the eyedropper.
- Use a contrasting preview background to verify the edge.
Exported tiles show seams in a game engine
- Enable Padding before export.
- Increase padding passes slightly.
- Export individual images if your engine workflow prefers one texture per tile.
- Check your engine’s texture filtering, wrapping, and pixel-art sampling settings.
I cannot download
- Downloading is shown as a Pro-gated action in the tool. If the button is locked, your account does not currently have access to that export action.
- If exporting multiple files, your browser may ask for permission to allow multiple downloads.
- If nothing happens when exporting individual images, make sure at least one tile is placed on the build grid.
The canvas is hard to inspect
- Use Fit to center and scale the canvas.
- Use 100% for pixel-accurate inspection.
- Change the preview background to checkerboard, green, magenta, black, or white to reveal transparency issues.
- Toggle the grid with G if grid lines obscure edge details.