@alexistessier/spritesheet-generator

A javascript spritesheet generator

Usage no npm install needed!

<script type="module">
  import alexistessierSpritesheetGenerator from 'https://cdn.skypack.dev/@alexistessier/spritesheet-generator';
</script>

README

@alexistessier/spritesheet-generator

version npm version

Dependency Status devDependency Status

Home Page

A javascript spritesheet generator

Note

The module is not fully tested. So bugs or unexpected behaviour can happen (Sorry for the troubles waiting a clean version 2.0.0).

Purpose

  • Generate multiple .png spritesheets from directories
  • Generate a css preprocessor file containing abstract class and mixins for each sprite (only stylus for now, but you can create your own use a custom processor function).
  • Generate spritesheet and preprocessor tools for retina and other resolutions.

Install

npm install @alexistessier/spritesheet-generator

How to use


var SpritesheetGenerator = require('@alexistessier/spritesheet-generator/factory');

var path = require('path');

var gen = SpritesheetGenerator({
    inputPath : path.join(__dirname, 'sources'),
    outputPath : path.join(__dirname, 'generated-spritesheets'),
    processor : 'stylus'
});

gen.run();

This basic usage example will take all the folders in the inputPath, and create one spritesheet for each, from all .png files in it. Note that inputPath can be a glob or an array of glob. The spritesheets (with the @2x version) and the preprocessor files are saved in outputPath

See examples to see the kind of files which are generated.