Basic Workflow
Generate an organized sprite sheet by uploading a Texture file and its corresponding Atlas data. The tool natively supports PNG/JSON pairs and compiled .xnb assets.
Verified File Patterns
- Texture:
animation_variant00.png / win_variant00.xnb
- Atlas:
animation_atlas_variant00.json / win_atlas_variant00.xnb
Designed for compatibility with any game asset following the standard coordinate structure, with extensive testing on Characters folder assets.
Conversion & Export
The conversion engine reconstructs your assets into a precision grid layout while preserving all metadata and image quality.
Standard Exports
- PNG/JSON: The reconstructed sprite sheet and its SpeedRunners-compliant atlas.
- Sprites: A ZIP archive of every frame as standalone, cropped PNGs.
- GIF: Instant animation preview at 12 or 24 FPS.
Visual Overlays
- Grid Overlay: Visual guide showing cell boundaries.
- Bounding Boxes: Shows the
bounding_box for each frame.
Tip: De-duplication
Game animations often reuse identical frames to control timing. The export process automatically detects and removes these duplicate frames to optimize file size, updating the JSON to reference the same source sprite. This explains why you might see gaps in the numbering (e.g., Flip0015 jumping to Flip0017).
If you require a raw sprite sheet containing all redundant frames, use the Download PNG option inside the Frame Editor tab.
Packed Export
Generate optimized sheets with Duplicate Detection and Whitespace Trimming, with optional XNB files ready for the game. Available algorithms:
- Auto: Automatically selects the best algorithm based on frame count.
- Best Long Side Fit: Optimizes for standard sprite sheets.
- Best Area Fit: Minimizes wasted space (best for 35-50 frames).
- Bottom Left: Traditional packing, best for large sheets (200+ frames).
Specialized Utilities
Atlas Converter
Bridge the gap between external texture packers and SpeedRunners. Converts Array or Hash formats into the game's native structure while ensuring proper frame naming conventions.
Frame Editor
Manage animation sequences by duplicating or stripping individual frames. Leverage existing vanilla assets as templates to build custom character sheets in minutes by removing unwanted frames and reconfiguring the composition of animation groups.
How does it work?
This tool reconstructs the game's unified coordinate space. It uses the base_w and base_h values from the JSON to define a consistent grid canvas for every frame. Each sprite is then precision-placed within its cell using its bounding_box_x and bounding_box_y offsets from the top-left corner.
The result is an unpacked sprite sheet where every frame occupies its full visual boundaries. Because this layout mirrors the game's internal rendering system, anything you place within a cell will appear perfectly aligned in-game relative to the character's pivot point.
Why aren't sprites centered in their cells?
SpeedRunners uses a fixed anchor point rendering system. Instead of centering frames, it draws them relative to the character's static world position. This ensures smooth transitions between animations of varying sizes without any visual "jittering" or jumping.
Modifying Canvas Dimensions (base_w / base_h)
Extra Space adds 128px of transparent margin on all four sides. Physical cells grow while their original logical dimensions are preserved, and negative offsets keep sprites in their in-game positions. Extra Space may not be available for every sprite sheet because very large output images can exceed the browser's reliable canvas and memory limits. The exported PNG/XNB includes a PNG tEXt chunk so VariantX can restore that space when the files are imported again. This metadata is only added when Extra Space is enabled. Use VariantX's XNB Converter or Packed XNB export afterward; another XNB converter may remove the metadata and cause the extra space to be lost on reimport.
Tip: Packing & Optimization
After editing your frames, you can run the new sprite sheet through this tool again to generate a Packed version with optimized spacing and duplicate detection.
Aseprite Workflow
Integrate directly into your pipeline with the variantx.lua script. It automatically imports your assets into a structured animation timeline with tags, allowing for immediate editing and playback.
Installation: Place the script in File › Scripts › Open Scripts Folder.
Usage: Run File › Scripts › variantx. The script auto-detects imported sprites and offers:
- Import: Load PNG + JSON with automatic animation tags from frame names.
- Export (Aligned): Grid-based sheet preserving all frames in order.
- Packed: Optimized export with trimming and duplicate detection.
Zero-configuration: Both exports generate PNG + JSON ready for use in SpeedRunners, no additional setup required.
This tool uses xnb.js (LGPL v3) for xnb file handling and SpeedRunners Atlas Builder (MIT) as reference for atlas XNB packing.