Skip to content

apoleshchuk/grunt-tamia-sprite

 
 

Repository files navigation

Sprite generator for Tâmia

Build Status Built with Grunt

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.

About

Sprite generator for Tâmia

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.7%
  • CSS 3.3%