Nearly Perfect Mediocracy

    spritesheet-assembler

    0.2.2 • Public • Published

    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

    Install

    npm i spritesheet-assembler

    DownloadsWeekly Downloads

    1

    Version

    0.2.2

    License

    SEE LICENSE IN https://chromium.googlesource.com/chromium/src/+/master/LICENSE

    Last publish

    Collaborators

    • aslushnikov