SpritePop Settings Guide

Drop a file anywhere onto the left panel upload zone or click the box to choose a file with your native file picker.

Privacy note: Files stay in your local browser memory. No data is sent over the network.

Paste a direct link to an online image and click Load. The host server must provide standard CORS headers for canvas drawing.

How many frames exist horizontally across each row of the sheet.

How many frame rows exist vertically down the sprite sheet. Total frames equals Columns multiplied by Rows.

Outer padding around the entire outer perimeter of the sprite sheet before the first frame starts.

Gap or gutter size in pixels between individual frames.

Shifts the slice origin horizontally (X) or vertically (Y). Useful when character art has uneven border spacing.

Displays the exact pixel width and height calculated for each frame after subtracting offsets, margins, and gaps.

Choose between Frames Per Second (1 to 60 FPS) for standard game loops or Milliseconds per Frame for millisecond-specific frame pacing.

Isolate a subsection of a multi-animation sprite sheet. For example, set Start to 0 and End to 7 to preview an 8-frame walk cycle on a sheet that contains other moves. Setting End Frame to 0 uses the maximum available frame count.

When enabled, playback automatically loops back to the start frame after reaching the end frame.

Plays the animation forward to the end frame, then plays it backward to the start frame in a continuous bounce cycle.

Inverts the default animation direction, playing frames in descending order.

Smoothly scale the frame preview. Image smoothing is disabled on the canvas so pixel art remains crisp with zero anti-aliasing blur.

Use the 1:1 button for native pixel dimensions, or Fit to auto-scale large or tiny frames into the preview area.

Change the canvas background to verify transparent silhouettes or test high-contrast visibility. Options include Checkerboard, Dotted Grid, Solid Black, Solid White, Dark Zinc, and high-visibility Cyan, Magenta, or Green.

Draws a visible frame border directly over the canvas frame to verify slicing boundaries and check for cut-off pixels.

Renders a semi-transparent ghost of the previous frame behind the current frame. Ideal for inspecting motion curves, arcs, and frame-to-frame spacing.

Use the center play button to start or pause playback. Use the previous and next step buttons to inspect individual frames one step at a time.

Displays numbered tiles for every frame in sequence. Click any tile to jump straight to that frame. The active frame highlights in real time during animation.

Renders the currently displayed canvas frame into a clean, transparent PNG and initiates an immediate browser download named sprite_frame_[N].png.

Exports a structured JSON file containing all slice coordinates, timing configurations, frame ranges, and total counts. Ready for integration into your custom game engine or asset loader.