This repository has been archived by the owner. It is now read-only.
DEPRECATED. Sprite generator for Tâmia
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tasks
test
.editorconfig
.gitignore
.jscs.json
.jshintrc
.npmignore
.travis.yml
Changelog.md
Gruntfile.js
License.md
Readme.md
package.json

Readme.md

Sprite generator for Tâmia

Build Status

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.

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.