Giter VIP home page Giter VIP logo

spritesheet.js's Introduction

spritesheet.js

Spritesheet.js is command-line spritesheet (a.k.a. Texture Atlas) generator written in node.js.

###Supported spritesheet formats###

  • Starling / Sparrow
  • JSON (i.e. PIXI.js)
  • Easel.js
  • cocos2d (i.e. version 2.x)
  • cocos2d-v3 (i.e. version 3.x)
  • CSS (new!)

###Usage###

  1. Command Line
    $ spritesheet-js assets/*.png
    Options:
    $ spritesheet-js
    Usage: spritesheet-js [options] <files>
    
    Options:
    -f, --format  format of spritesheet (starling, sparrow, json, pixi.js, easel.js, cocos2d)                                                          [default: "json"]
    -n, --name    name of generated spritesheet                                                                                                        [default: "spritesheet"]
    -p, --path    path to export directory                                                                                                             [default: "."]
    --fullpath    include path in file name                                                                                                            [default: false]
    --prefix      prefix for image paths (css format only)                                                                                             [default: ""]
    --trim        removes transparent whitespaces around images                                                                                        [default: false]
    --square      texture should be s square                                                                                                           [default: false]
    --powerOfTwo  texture width and height should be power of two                                                                                      [default: false]
    --validate    check algorihtm returned data                                                                                                        [default: false]
    --algorithm   packing algorithm: growing-binpacking (default), binpacking (requires passing --width and --height options), vertical or horizontal  [default: "growing-binpacking"]
    --width       width for binpacking                                                                                                                 [default: undefined]
    --height      height for binpacking                                                                                                                [default: undefined]
    --padding     padding between images in spritesheet                                                                                                [default: 0]
    --scale       percentage scale                                                                                                                     [default: "100%"]
    --fuzz        percentage fuzz factor (usually value of 1% is a good choice)                                                                        [default: ""]
  2. Node.js
    var spritesheet = require('spritesheet-js');
    
    spritesheet('assets/*.png', {format: 'json'}, function (err) {
      if (err) throw err;
    
      console.log('spritesheet successfully generated');
    });

###Trimming / Cropping###
Spritesheet.js can remove transparent whitespace around images. Thanks to that you can pack more assets into one spritesheet and it makes rendering a little bit faster.

*NOTE: Some libraries such as Easel.js dont't support this feature.*
![Trimming / Cropping](http://i.imgur.com/76OokJU.png)

###Installation###
1. Install [ImageMagick](http://www.imagemagick.org/)
2. ```npm install spritesheet-js -g```

###Test###

mocha test


--------------
Thanks [Przemysław Piekarski](http://www.behance.net/piekarski) for logo design and assets in examples.

spritesheet.js's People

Contributors

akinoniku avatar arjanfrans avatar endel avatar flouthoc avatar jotson avatar krzysztof-o avatar mems avatar mildfuzz avatar mpazik avatar naranjamecanica avatar neonaleon avatar rblopes avatar serprex avatar smoke avatar tzet avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.