Sprite generator for Tâmia

Generates spritesheet from PNG files and a list of Stylus variables with coordinates to use in Tâmia. Uses spritesmith. Inspired by grunt-spritesmith.

Installation

This plugin requires Grunt 0.4.

Install GraphicsMagick (brew install graphicsmagick if you're on a Mac) or Cairo. Then install grunt-tamia-sprite:

npm install --save-dev grunt-tamia-sprite

Add to your Gruntfile.js:

grunt.loadNpmTasks('grunt-tamia-sprite');

Then add section named sprite inside grunt.initConfig(). See next section for details.

Parameters

src

Type: String|Array.

Images list (PNG only). String or array. Wildcards are supported.

dest

Type: String.

Resulting sprite image location.

Options

Options should be inside options object:

sprite: {
	all: {
		src: 'images/sprites/*.png',
		dest: 'build/sprite.png'
		options: {
			destStyl: 'styles/sprite.styl'
		}
	}
}

destStyl

Type: String, default: same as dest but with .styl extension.

Resulting Stylus file location. Use false to disable Stylus file generation.

destJson

Type: String, default: same as dest but with .json extension.

Resulting JSON file location. Use false to disable JSON file generation.

template

Type: String, default: '{%=target%}_{%=name%} = {%=x%}px {%=y%}px {%=width%}px {%=height%}px'.

Template for generating every string in a Stylus file.

fingerprintTemplate

Type: String, default: '{%=target%}_fingerprint = "{%=fingerprint%}"'.

Template for variable with fingerpting (date of last sprite modification).

sprite_image = sprite_image + '?' + sprite_fingerprint;

propertyTemplate

Type: String, default: '{%=target%}_{%=name%} = {%=value%}px'.

Template for spritesheet properties variables (width & height).

background-size: sprite_width sprite_height;

algorithm

Type: String, default: 'binary-tree'

Layout algorithm (top-down, left-right, diagonal, alt-diagonal, binary-tree).

padding

Type: String, default: 3.

Padding between images.

engine

Type: String, default: 'auto'

Generation engine (auto, gm, canvas).

Gruntfile Example

module.exports = function(grunt) {
	grunt.initConfig({
		sprite: {
			all: {
				src: 'images/sprites/*.png',
				dest: 'build/sprite.png'
			}
		}
	});
	grunt.loadNpmTasks('grunt-tamia-sprite');
	grunt.registerTask('default', ['sprite']);
};

Stylus Example (with nib & vars from JSON file)

sprite = json("sprite.json", { hash: true })
.sprite
	image("sprite.png", sprite.properties.width * 1px, sprite.properties.height * 1px)

	for name, data in sprite.coordinates
		&_{name}
			add-property("background-position", data.x * 1px data.y * 1px)
			add-property("width", data.width * 1px)
			add-property("height", data.height * 1px)

Changelog

The changelog can be found in the Changelog.md file.

---

License

The MIT License, see the included License.md file.