Sprite Player

Well, hello hello! Drag and drop sprite sheets into Sprite Player.  

Adjust rows and columns to align the frames. Your sprite sheets are saved into your browser's local storage and maxes out at 10 and will start to replace the older ones. 

Cool ideas? Frustrated? Please let it all out. Your thoughts are the secret recipe to making Sprite Player better for everyone and I'm happy to consider implementing them over time.

May 9, 2026 - v1.3 Changes:

• You can now export your animation as a GIF, in addition to PNG frames or a spritesheet. The GIF uses your current Frame Rate setting for timing.
• Dropping a spritesheet image now auto-fills the export name with the file's name, so you don't have to retype it.
• The export name and suffix are saved per spritesheet, so when you switch between saved sprites, your custom names come back automatically.
• You can now add an optional suffix to your exported file name, making it easier to label variations like _walk or _v2.
• If you haven't selected or sequenced any frames, exporting now grabs every frame from the loaded spritesheet automatically.
• Empty (fully transparent) frames at the end of your sequence are now trimmed off automatically when exporting.
• Exported spritesheets with perfect-square frame counts (4, 9, 16, …) are now arranged in a tidy square grid instead of one long strip.
• Trying to export before loading a spritesheet now shows a brief, friendly hint instead of silently doing nothing.
• Pressing Play or Clear now flashes a short hint telling you what happened ("Playing your selected sequence", "Cleared the selected sequence", etc.), with helpful warnings if there's nothing loaded or selected.
• You can now drop a custom background image directly onto the dedicated drop slot in the Background row, and switch between custom backgrounds and built-in colors. Right-click a custom background to remove it.
• The Background drop slot is now visually distinct with a dashed border and + icon, and highlights when you drag a file over it.
• You can now scroll the mini spritesheet view horizontally with a trackpad swipe or by holding Shift while scrolling, so wider sheets are fully reachable.
• Tall, single-column or wide, single-row sheets now fit fully in the mini view instead of being cut off.
• You can now select multiple frames at once and add them all to your animation sequence in a single drag.
• Holding the Cmd or Ctrl key while dragging now lets you append a whole range of frames to your sequence in one action, with a clear preview of what will be added.
• Already-sequenced frames stay visibly highlighted while you drag to add more.
• The mini spritesheet has a clean outer border and tidier grid lines that don't overlap the edges.
• The animation sequence strip has more vertical room, leaving space for a second row as your sequence grows.
• Switching to a different spritesheet no longer briefly shows stale highlights or leftover sequence state from the previous sheet.
• You can now extract individual frames and save them as separate PNG files.
• You can now select a specific frame to play instead of always playing the full animation.
• Sprite thumbnails are bigger and clearer — the image fills the slot without internal padding, and all 20 thumbnails are fully visible without clipping at the bottom.
• The control panel layout was rebuilt into a cleaner horizontal layout: Play/Clear sit side-by-side at compact size, name and suffix inputs sit side-by-side in one row, and Frames/Sheet/GIF export buttons share a tidy row beneath them.
• The Background picker and frame info now sit below the sliders, so all 8 background colors and the custom-background slot are fully visible (no more cut-off swatches).
• The stuck-cursor bug is fixed — after dropping a new spritesheet, the cursor no longer gets stuck as a hand/pointer, so you can immediately use the sliders and other controls without having to click on the canvas first.

April 20, 2026 - v1.2 Changes:

• You can now scale sprites independently on the X and Y axes, giving you finer control over stretching and squishing.
• You can now rotate a sprite using a new Rotation slider.
• Scrolling the mouse wheel over the canvas now zooms the sprite in and out.
• Clicking the Reverse, Yoyo, and Pause checkboxes in the UI now actually controls the animation (previously only keyboard shortcuts worked).
• The currently selected sprite thumbnail is now highlighted so you always know which one is active.
• Sprite thumbnails are now displayed in a two-column grid, making room for up to 20 saved sprites (up from 10).
• A new info bar shows the frame count, frame width, and frame height for the loaded spritesheet.
• The background color picker is now properly labeled and laid out in the UI panel.
• The control panel is taller and reorganized into a cleaner layout with sliders grouped in a grid.
• The app now loads faster and more reliably when switching between saved spritesheets.

Jan. 27, 2024 - v1.1 Changes:

• Can now select frames to animate
• Added background color selection
• Added cell numbers 
• Performance improvements to the mini sheet ui

Attributions:

- Made using Phaser 3
- Background colors selection palette from SLSO8
- UI palette uses Ice Cream GB 

Hopefully you fancy my work and maybe consider a  cup?