Sleek-Sprite

A simple sprite packer to streamline the process of building an atlas from malformed sprite sheets

Functions like an online image editor that requires no installation. Loaded images are never modified or leave the browser. Prepare your atlas and download the result as an image paired with a JSON map.

Runs exclusively client side and can be viewed at the pages URL here Try Sleek-Sprite

Note

If you find the workflow/functionality useful but need a different export format or options leave a comment in discussions

Purpose

This project was inspired by the dissatisfaction with existing software and tools to modify sprite-sheets, many locked behind paywalls or expensive subscriptions

Started as a personal project with a specific use case in mind, however once it was in development, I decided to add some polish and additional features to make it feel more complete

Feature List

Global

• Persistent display mode between tabs (dark mode)
• Shared zoom between editor and animator
• Zoom does not alter image directly to maintain export integrity

Selector

• Drag and drop image files
• Reload
• Search (find and select sprites)
• Unselect all
• Select single (with drag)
• Set background (with hover preview)
• Erase background
• Delete selection
• Undo

Editor

All Sprites

• Click to edit
• Anchor dropdown (center or bottom)
• Rows and columns textboxes (defaults to square)

Selected Sprites

• Nudge (within cell)
• Anchor radio (center/bottom/previous)
  • previous will take into account the y-position of the last selected sprite to maintain height difference
• Flip (x/y axis)
• Zoom

Animator

• Click to add frame to preview
• Unselect all
• Save (FPS + Name)
• Animation dropdown (to load/modify/delete saved)
• Zoom (separate scrollbars for frames and preview)

Exporter

• Preview panel
• Name individual sprites/frames
• Download individual sprites/frames
• Download all sprites as zip
• Export all sprites in atlas
• Options to build JSON map w/ animations

Sources

This project started as a fork of spritesheet-cutter which was based on Sprite Cow

The project diverged so far from both, that I decided to remove the fork and have this as a standalone repo

• spritesheet-cutter

  • streamlined the build process
  • sped up development with yarn and Github Pages deployment support

• Sprite Cow

  • supplied some essential logic for detecting image slices on a background
  • had an elegant UI to use as a base

Icons

• Plump Flat - Free (Streamline)

Fonts

• Oswald (Google)
• Lobster (Google)

Sprites (example)

• Retro Character (Open Clip Art)
  • isaiah658 (Open Clip Art Author)