How to Use a Sprite Sheet Online
To use a sprite sheet, load the image, divide its regular grid into frames, then preview or inspect those frames in sequence.
With SpriteReel, the essential settings are columns, rows and frame timing. No account or installation is needed.
1. Load the sprite sheet
Open the viewer, then drag in an image or choose one from your device. Local files are read by your browser and are not uploaded to SpriteReel.
You can instead paste a direct HTTPS image URL. The remote host must allow the image to be loaded from another website.
2. Set the grid
Count the frames across the image to get the columns, then count the frames down to get the rows. SpriteReel divides the full image into equal-sized cells.
Frame width = image width ÷ columns. Frame height = image height ÷ rows.
For example, SpriteReel's 1,950 × 130 pixel flame strip uses 15 columns and 1 row, producing 130 × 130 pixel frames.
Packed texture atlases with different-sized sprites need their accompanying metadata and cannot be described by one row-and-column grid.
3. Preview the animation
Apply the grid, then press play. If the preview includes parts of neighbouring frames, recheck the row and column counts.
Frame timing is measured in milliseconds: 100 ms is 10 frames per second, while about 33 ms is 30 frames per second. Loop repeats the sequence; ping-pong plays forward and then backward.
4. Test individual frames
Use the step controls or open the frame panel to check every cell. This makes blank frames, inconsistent padding and cropping mistakes easier to spot.
Use zoom to inspect pixel detail. SpriteReel also shows the calculated frame dimensions and current frame number.
Common sprite sheet problems
- Frames overlap: the grid count is wrong, or the sheet includes spacing around each frame.
- Frames look soft: use integer frame dimensions and inspect at a whole-number zoom where possible.
- A web image will not load: use its direct HTTPS file URL and check for hotlink protection.
- Sprites have different sizes: the image is probably a packed atlas rather than a regular grid.