Skip to content

Tiny spritesheet assembler with support for SVG and PNG formats.

License

Notifications You must be signed in to change notification settings

aslushnikov/spritesheet-assembler

Repository files navigation

Spritesheet Assembler Build Status

  • Support for SVG/PNG/JPG sprites
  • Generate CSS/JSON descriptors
  • Simple: tiny source, minimal dependencies. Please fork/contribute!

Install

This package relies on GraphicsMagick, so:

  • OS X: brew install graphicsmagick
  • Linux: sudo apt-get install graphicsmagick

Install:

npm install -g spritesheet-assembler

And run:

spass -i icons/ -o images/spritesheet.png -d styles/icons.css

Demos

  1. CSS SpriteSheet demo
  2. Spritesheet packing algorithm demo
  3. Check out utility results in tests

Algorithm

Spritesheet packing algorithm is based on the one described in Jake's great article. This implementation, however, doesn't use binary tree, maintaining instead a list of free spaces.

Code Overview

The code is split into three parts:

  • lib/ - all the logic of bin-packing is here. Lib provides core abstractions of Sprite and SpriteSheet, as well as the bin-packing algorithm itself. This folder doesn't and shouldn't depend on any core node modules.
  • compositors/ - this folder contains compositors, which are responsible for building actual spritesheet out of sprites. Compositors are associated with export mime types, the relation is defined in compositors/index.js.
  • descriptors/ - this folder contains spritesheet descriptor generators. Descriptor generators are associated with descriptor mime type, the relation is defined in descriptors/index.js.

Tests

Each test runs spritesheet-assembler with given arguments and compares generated files with expected results.

To run all tests:

npm test

To run only tests with 'svg' in name:

npm test -- svg

To reset test results for all svg tests: (or generate results for a newly added test):

npm test -- svg reset-results

To add a test:

  1. create a new folder under tests/ folder which starts with two-digit number, e.g. tests/01-some-new-test/.
  2. add arguments.js file which should define input arguments for the utility: example

History

This started as a patch to Chrome DevTools project: https://codereview.chromium.org/2671413004/

License

See LICENSE here.

Contacts

Feel free to drop me a line at aslushnikov@gmail.com or via twitter

Releases

No releases published

Packages

No packages published