START HERE

Build pixel sprites and animation clips in your browser

A SpriteForge project contains its canvas, palette, pivot, layers, clips, frames, and cels. Draw on the active cel, add frames, preview the animation, then export it.

SpriteForge belongs to NoAliasTools. Your account, Cloud files and plans are at noaliastools.com.

Continue opens the newest recoverable work, the last browser project, or a new canvas. New Canvas lets you choose size, runtime scale, and palette first.

TOP MENU

Menus at a glance

FILE MENU

Projects and privacy

Open and save

Open and save help

Open files

Open files help

NoAliasTools Cloud

Cloud files help

Recovery keeps recent unsaved changes in this browser. SpriteForge updates it after completed changes and checks pending work every 30 seconds. After an interrupted session, only a newer snapshot matching the project is offered. A successful project save clears that snapshot.

Deleting a browser save also deletes its Recovery data. An open copy remains in the editor as a new unsaved project. Replacing a save keeps that save's stable ID.

Install the app

Help → Install SpriteForge opens the browser install prompt or explains why it is unavailable. On iPhone and iPad, use Share → Add to Home Screen. An installed app can reopen its cached shell offline; projects remain separate in browser storage.

When an installed app has an update ready, Help → Update SpriteForge appears. SpriteForge protects pending changes and restarts only after confirmation.

Device benchmark

Help → Device Benchmark runs a cancellable local check. It tests each size in three local runs and recommends the largest size stable in at least two runs. Projects and Recovery are not changed.

The latest result stays in localStorage and is not uploaded. It reflects current browser load; it does not change canvas limits or defaults.

Open Device Benchmark

Portable backup files

Local Project → Save to File downloads a version 2 .spriteforge backup. Load from File opens it or a version 1, SHA-256-verified PixelFoundry-to-SpriteForge handoff locally without an upload. Unsupported contracts and changed payloads are rejected. Loaded files remain unsaved until you choose Save Project to Browser.

Drawing and layers help

LEFT TOOL RAIL

Drawing tools

On desktop, choose a tool to open its controls. In Tablet Mode, tap to select it; hold or right-click for options. Tap the active tool again to close them. Tooltips show each shortcut.

Normal maps

Normal maps help

Paint and color

Lighten and Darken adjust existing colors once per drag. Horizontal and Vertical mirror paint around Pivot X and Pivot Y; enable both for four-way mirroring.

Move

V activates Move. Drag anywhere on the canvas to move every pixel in the active layer on the current frame. Hold Ctrl/Cmd while dragging to use Move temporarily. Movement stops at the canvas edge so no visible pixels are discarded. Locked or hidden layers cannot be moved, and each completed drag is one Undo step.

Selection

M activates rectangle Select; use Shift+M for ellipse, Q for lasso, Shift+Q for polygon, or W for magic wand. These tools create a pixel mask. Rectangle and ellipse have eight boundary handles. Drag inside to move pixels. Copy, cut, paste, clear, flip, rotate, and skew affect only the selection. Normal selections stop at the canvas edge so their visible pixels are not clipped. Escape cancels a polygon or clears the selection. Right-click selected pixels, or hold them on a tablet, to open the selection context menu. Right-click anywhere outside the selection to clear it.

Use Resize Selection in the selection context menu to scale pixels with the canvas handles. Hold Shift to keep the ratio, as in Aseprite; Ctrl/Cmd remains available as a SpriteForge alias. Move the preview if needed, then use the check button to apply it. The X button or Escape cancels without changing pixels. Pasted images larger than the canvas are kept whole. Scroll to reach handles outside the canvas, then move or resize the image before applying it.

File → New Project from Selection creates a separate document. Choose the current frame or all frames in the clip. All Layers preserves layer order, visibility, and locks; turn it off to merge visible layers. The source stays unchanged.

Floating selection

Floating selection help

Free rotation…

Free rotation help

Custom brushes

Create a brush from the selected pixels of the active layer or an image in the Brush context. Name, rename, select, delete, export and import local brushes with keyboard-accessible controls. Choose center or top-left origin and original or foreground colors. Colors map to the nearest project palette entry; ties use the lower index. Strokes support mirror, Wrap, selection limits and Undo/Redo. Brushes stay in this browser across projects and reloads.

Brush preset library help

Shapes and IsoBox

L activates Line, U Rectangle, and Shift+U Circle/Ellipse. All open Shapes, which also contains IsoBox. Draw with a 1–8 px stroke; circles and rectangles can be filled. IsoBox creates a 2:1 pixel box with separate face colors. Fixed mode uses exact dimensions. In Free Draw, drag the base, set the height, then click or release to apply it.

Isometric drawing help

CANVAS

Canvas, source grid, and pivot

The source grid is one frame's true pixel size; zoom changes only the view. Resize Canvas changes the visible area from one of nine alignments without scaling. Scale Image resizes every cel with nearest-neighbour sampling; linked dimensions retain the current image aspect ratio.

Layers can reach up to two canvas widths beyond every edge, as in Photoshop: whatever you move or paste over the edge stays in the project. Resize Canvas only changes the visible area, Scale Image scales everything. Image → Crop to Canvas deletes everything outside the canvas in every frame; Undo brings it back.

The blue pivot guides mark the shared runtime placement point and are not exported. Use Image → Pivot → Edit Pivot to drag either axis or both together. Each drag is undoable. Show Pivot X and Show Pivot Y only control the guides. Choose Done or press Escape to leave pivot editing.

The mouse wheel zooms around the pointer. Fit Canvas centers the whole canvas at the largest fitting zoom, down to 1% when needed. Hold Space and drag to pan; middle-mouse dragging remains available as a SpriteForge alias. On tablets, use two fingers to pan and zoom.

Projects support 8–16,384 pixels per axis. The linked-dimensions button keeps width and height equal; switch it off for rectangular canvases.

Single shows one frame. All Frames shows the clip as a horizontal strip, but drawing still changes only the active frame and layer. Crosshair uses pixel tool cursors in the SpriteForge interface and the native pointer in Studio; Brush Preview shows the exact pencil, brush, or eraser footprint.

Wrap repeats artwork across the fixed canvas edges. Drag to move a seam; hold Shift to lock one axis. Pencil, Brush, Eraser, Fill, Eyedropper, Shapes, or Select can edit the shifted sides and corners. Fill connects matching areas across edges, and shapes keep the geometry shown while wrapping crossed pixels.

Select works across the shifted seam with Rectangle, Ellipse, Lasso, Polygon, and Magic Wand. Edit, copy, cut, move, delete, flip, rotate, or skew the selected pixels. Resize Selection, New Project from Selection, and pivot editing are unavailable in Wrap. Its offsets and guides create no Undo step and never change the project or its exports.

Choose a theme, light, or dark checkerboard, a solid color, or no canvas background. Grid, onion skins, 50% Previous Overlay, silhouette, selections, pivot guides, and brush previews affect only the view. Transparent pixels stay transparent in PNGs.

Canvas overlays let you choose 0–32 previous and following onion frames separately, their two tint colors, tinting on or off, and opacity from 0 to 100%. Settings stay in this browser and do not change your project, Undo history, or exports. Frame-strip view hides onion overlays.

SpriteForge uses WebGL2 when available and falls back to Canvas2D automatically. The renderer does not change project data or exports.

Large structural changes may show Updating Project while SpriteForge prepares Undo and applies the result.

TIMELINE

Frames, clips, and cels

A cel is one layer in one frame. Click to activate it, Shift+Click for a rectangular range, or Ctrl/Cmd+Click to toggle cels. Drag a side handle to extend the range; use a frame-header handle for complete columns. Copy, cut, paste, and clear affect the selected block.

Clips have their own frames, timing, and Loop, Once, or Ping Pong playback. Create, rename, duplicate, or delete clips and frames. Use the left/right arrow keys or [/] to change frames. A frame is as wide as it lasts. The bar below the tracks sets the duration of the selected frame; the duration button above the tracks sets it for the whole clip after confirmation. Enter starts or stops playback.

Window → Event Track and Audio Track show or hide these two tracks. Detach Timeline moves the timeline into its own window; closing that window brings it back.

On tablets, tap frame headers to add or remove whole columns and show Copy, Cut, Paste, Clear, and Done. Hold and drag a cel to select a rectangular range.

Pixel tools and selection transforms affect all selected timeline cels. Linked cels are painted once; protected frames and layers are skipped. Each stroke or operation is one undo step.

Linked cels share their pixels across frames of the same layer. Use Duplicate as linked frame, or select cels and link them to the active frame. The chain marks linked cels. Unlink selected cels creates independent copies. Ordinary frame duplication always copies pixels. Drawing and Undo affect all linked frames; clearing or replacing a cel removes only that frame from the link.

Locked and disabled frames

Lock the selected frame with the lock in the bar below the tracks; a locked frame shows a lock in its header. Locked frames still play. Edits to linked cels are blocked until you unlink them or unlock the frame.

Disabled frames stay in the timeline, dimmed. Playback, onion skin, animation checks and exports skip them. Shift+D toggles selected frames; Shift+L toggles their locks.

Pencil, Brush and Eraser can draw during playback. Each stroke stays on its starting frame and has one undo step. Turn off Draw during playback to pause when you start drawing.

Frame rate and interpolation

Exact frame rates keep playback, audio and markers on one timebase. GIF and Aseprite round cumulative boundaries; the export dialog shows the total timing difference.

Transform interpolation help

In-betweens help

Direction clips…

Direction clips help

Animation audio

Show the audio track with Window → Audio Track and load a local audio file for the clip in its track head. Reassign it after reopening; only its name, duration, offset, excerpt and markers are saved. Positive offsets delay audio and negative offsets trim its beginning. Audio never uploads or enters exports. Drag the playhead to scrub. Set markers with Add marker or Shift+K, edit their names and times in the audio settings, drag them, move focused markers with arrows or delete them. Snapping is optional. Alt+Left and Alt+Right jump between markers. Select matching frames and markers, then Align frames to markers in one Undo step. Timeline zoom and scrolling include the waveform. Ping-pong plays audio only forwards; the Music player pauses during clip audio.

Source start and end crop the reference file independently of the clip offset. Drag the two handles on the audio track or in the audio settings, or enter milliseconds there. Arrow keys adjust a focused handle, Shift uses 10 ms, Home and End use its limits, and Escape cancels a drag. Each change is one Undo step. Excluded audio is dimmed in the timeline and never plays when scrubbing. Files save only excerpt metadata; all animation exports stay silent.

Slices and nine-slice

Slices help

Nine-slice export help

Game data

Point editing help

Event editing help

Game data preview help

Game data checks help

Game data export help

Assistant game data help

Character package help

PROJECT STRUCTURE

Palette and layers

Palette index 0 is always transparent. Add, name, edit, sort, replace, or remove colors. A project uses at most 1024 entries including transparency. Removing or sorting colors keeps pixel colors intact.

Presets map existing pixels to their nearest colors. Available presets are Grayscale 8, Handheld Green, Retro 16, Ink, Warm Sepia, Forest, Ocean, Sunset, Soft Pastel, and Neon Night. The File button beside Presets loads or saves a local .spriteforge-palette file; loading one remaps the project and uploads nothing.

Palette files and Lospec

Palette files help

Lospec palettes help start LospecLospec palettes help

Groups, variants, and cycles

Palette groups let a color belong to several freely named groups. Use the filter to show one group. Palette groups opens membership, naming, order and deletion. Sorting and replacing colors preserve group references; all edits support Undo and Redo.

Palette variants recolor one or more freely named groups without duplicating pixels. Select a variant to view it; export dialogs choose their palette independently. Atlas and batch export can create separate sprites for the original and every variant. Runtime data and character packages retain all variant definitions. Removing group membership also removes replacements that no longer belong to the variant.

Palette cycles animate colors without changing pixels. Choose a group or ordered palette indices, milliseconds per step, direction and loop or ping-pong. Enable canvas cycling to see it while playing. Preview always uses cycles. Image exports bake at most 10 seconds and 512 frames per clip; the dialog shows the count and warns about loop boundaries. Runtime data and character packages preserve the definitions.

Hue/Saturation…

Hue/Saturation help

Pixel-art rules

Pixel-art rules store optional limits for visible colors, colors per tile, tile size, allowed groups, channel depth and source sprite dimensions. Empty limits are unrestricted; example profiles are optional. The existing quality check reports diagnostic codes. Show rule violations marks pixels and tiles on the canvas without exporting the overlay. Original, variants and cycle samples are checked; large analyses report incomplete results explicitly.

Layers, groups, and masks

Add, rename, reorder, hide, lock, or delete layers. Higher visible layers appear above lower ones. Locked layers cannot be edited; deleting a layer removes all its cels after confirmation.

Merge with the layer below combines a layer with the drawing layer directly beneath it in every frame of every clip. Both layers must be unlocked, at full opacity and without masks, and no frame may be locked. Undo restores both layers.

Create nested groups with New Group. Drag a layer or group onto the middle of a group row to put it inside; dropping above or below places it beside the target. The folder button collapses the group. Visibility and locking apply to all descendants. Group deletion removes its contents, and Undo restores the hierarchy.

Set layer opacity from 0 to 100% in the timeline. PNG sheets and atlases preserve alpha; GIF remains indexed and uses a fixed transparency dither with up to 255 visible colors. Opacity changes are undoable and saved in your project.

Mask editing help

Layer blend modes

Layer blend modes help

Indexed blend export help

Layer effects

Layer effects help

Reference images

Reference images are embedded once in the project and appear in every frame in the editor. Load a file or explicitly read an image from the clipboard. Select the reference row to set X, Y, width and height; drag the image to move it. Its layer opacity, visibility and lock apply to the image. Undo restores imports and transforms. References never appear in animation previews or PNG, GIF, atlas, Aseprite and Godot exports. Clipboard access requires browser permission; loading a file remains available.

FILES

Import and export

File → Import → Import from File opens horizontal PNG sheets and animated GIFs. Before importing, choose the destination and whether to keep the current frame size or use the file dimensions. New Canvas is the default and opens an independent unsaved tab; Replace Current Canvas is optional and replaces the active clip after confirmation. For an ambiguous PNG sheet, choose its horizontal frame count explicitly. GIF timing is kept.

Import Aseprite / TexturePacker opens one matching PNG and JSON pair as a new unsaved project. All decoding stays in the browser.

Image batch import help

Aseprite import report

Import .aseprite or .ase from the File menu using Import from File. Layers, groups, frames, linked cels and directional tags open in a new project. Indexed, RGBA and grayscale map to a project palette. More than 1023 visible colors require explicit reduction or cancellation. The import report lists skipped data and conversions, including alpha dithering. Invalid files leave the current project unchanged.

Export formats

Export Whole Project or one clip. Source files use the authored grid; Runtime files apply project scale. Choose transparent PNG sheets, animated GIFs, Aseprite PNG + JSON, or Godot PNG + TRES. Whole-project GIF export downloads one GIF per clip. GIFs preserve frame timing and Loop/Once playback; Ping-Pong clips are written forward and backward. Frames above GIF's limit of 255 visible colors are reduced for that export and reported in the status. Export only downloads files; it does not change the project or write into another game.

Atlas and batch export opens the local export dialog. Export one atlas for the selected clip or the whole project, or all clips separately in one ZIP. Choose 1×, 2×, 3×, and 4× without smoothing. Use {project}, {projectId}, {clip}, {clipId}, and {scale} in filenames; duplicate names are rejected.

Trim removes transparent edges while keeping source sizes and offsets in metadata. Extrude repeats edge pixels by 0–4 export pixels; spacing remains transparent. Packing is deterministic, never rotates frames, and splits output across pages within the maximum size. Power-of-two sizes round each page up within that limit.

Choose Aseprite, Godot, Phaser 3 Multi-Atlas, TexturePacker JSON Hash or Array, Unity JSON with an Editor importer, PNG sheets, or animated GIFs. Unity requires the included script under Assets/Editor and the 2D Sprite package in Unity 2021.2 or newer. Select the JSON files and run Assets / SpriteForge / Import selected atlas JSON. This imports slices and pivots; animation timing remains in JSON. Phaser uses load.multiatlas. The ZIP manifest records clips, durations, and playback.

Save template stores the export options for this project in this browser. Templates are tool settings and do not change pixels, Undo history, project files, or Cloud revisions. Export remains free and local. You can cancel packing and encoding before the ZIP download starts.

WINDOW MENU

Workspace, preview, and quality checks

Hide or resize Inspector and Timeline. Toggle Live Preview and Clip Settings separately, or use Detach Live Preview for a synchronized window. Canvas and preview backgrounds are independent.

Interface Style switches between Studio and SpriteForge. Theme selects Auto, Light, or Dark. Custom Cursors switches the SpriteForge default and pointer graphics back to native browser cursors. Preview Flip mirrors only the preview. Reset Layout restores workspace and view settings but keeps Interface Style, Custom Cursors, and project data.

SpriteForge requires a browser-reported screen size of at least 900×768 CSS pixels. Pixel density does not make a phone eligible. If a tablet is blocked in portrait, rotate it to landscape. Browser bars and the on-screen keyboard may resize the workspace but do not change device eligibility. Passing this check does not guarantee performance; use Device Benchmark when unsure.

Window → Tablet Mode overrides automatic detection until Reset Layout. Use the Canvas, Timeline, and Inspect tabs; drawing tools appear only in Canvas. Playback and fullscreen remain in the tablet action rows.

Live Preview removes shared transparent margins across the clip. It uses one stable crop for all frames, so animation does not jump.

Live Quality reports dimensions, coverage, pivot placement, palette use, empty frames, and other risks without changing the project. On tablets, it starts collapsed for the current session.

Preview stage

Stage help

Music library

Music opens the bundled copyright-free soundtrack. Select participating tracks, then use Previous, Play, Next, or Shuffle. Your selection stays in this browser. The tracks belong to noaloastools/tobedone and may be used while streaming SpriteForge or your own content.

REFERENCE

Keyboard shortcuts