PIXI Packer
PIXI Packer is a sprite packer made for HTML5 game engine PIXI.js. It's designed to create small downloads and be easy and fast to use.
npm install pixi-packer -g
Features
The aim is to provide all the most useful features of commercial sprite packers while trying to make it more convenient to use in large projects and with complicated build pipelines.
- Fast - Uses caching to only process updated images
- Lightweight - No GUI or installer
- Minimise HTTP round trips - Creates as few images and JSON files as possible
- Support for variations (like languages or themes)
- Scale aware - Automatically generates bundles for different resolutions
- Multi-phase loading - Load sprites in order of usage
- Configurable image quality - Compression and image type (png/jpg) can be defined separately for every sprite
- Trimming - Automatically crops away transparent pixels and tells PIXI how to correct for it. This can lead to significant savings in terms of download size
- Enforce maximum pixel size per image - Avoid problems with old iOS devices and browsers
- git friendly - check all the source images into git rather than finished sprites
External dependencies
Changes for V3
max_pixels_per_sprite_sheet
isn't needed anymore. All spritesheets will be (if possible) not larger than 2048x1024. If you want to change these dimensions or enable warnings for oversized sprites that won't fit into those constraints you can override those parameters on group level. You can now also define different padding sizes for every group. See example.js
for more information.- A new config option
group_default
has been added which allows explicit defaults to be set for all groups. loading_stages
are now optional (both for defining them and on the group level). The default loading stage "main" will be used instead.
Changes for V2
- Support for Node < 4.0.0 is dropped. If you're stuck with an older version you can stick to V1.x.x.
- PixiPacker V2 doesn't come with build-in png compression anymore. There's also no default compression anymore. You can now pass in any function via
compressor
that takes a buffer and returns a Promise returning a buffer. All imagemin modules should work: https://github.com/imagemin
The old "compression" parameter will be ignored, so be aware of that. See 'Compression' and the example.js for more details.
Usage
Create an images.js
in the folder where you're storing your sprites. Have a look at example.js
in this folder
for an in-depth explanation.
Make sure ImageMagick is installed locally. On OSX you can do so via brew install imagemagick
, other operating systems will vary.
Now you can create your spritesheets via
pixi-packer path/to/images.js build/images/
The first round of processing will take a while but subsequent re-runs will be a lot quicker. On our relatively large test set of 1.5k sprites a warm-cache run takes about 2 second.
PIXI.js Loader integration
The manifest files created by pixi-packer are not natively supported by pixi. You need to add https://github.com/Gamevy/pixi-packer-parser to your asset loader. At the moment only PIXI >=3.0.0 is supported.
var pixiPackerParser = require("pixi-packer-parser");
var PIXI = require("pixi.js");
var loader = new PIXI.loaders.Loader();
loader.after(pixiPackerParser(PIXI));
loader.add("path/to/my/manifest_DE_initial.json");
loader.on("progress", function (p) => { console.log("progress", p); });
loader.load(function () => { console.log("done"); });
Other game engines
Currently only PIXI.js is supported, but there's nothing to stop you from using pixi-packer for other game engines. Feel free to add your own loader plugin, the manifest file is relatively straighforward. Please open an issue if there is anything unclear.
Caching
By default ~/.pixi-packer-tmp
is used as cache folder. You can use a different one via --cache /path/to/temp/folder
. Sharing the same cache folder for different repositories can be especially useful for example for build servers where the same set of images is regularly processed by a pull-request builder task and a master-branch builder task.
Please don't commit your cache folder or share it between machines, it will not work and might lead to unexpected behaviour.
For the purpose of cache invalidation cache keys are hashes based on the source sprites. To avoid having to open every image the hash is based on the full path and file size.
If for some reason the cache has become stale or just too large (nothing is ever deleted) you can delete the cache folder or use --clean-cache
.
Compression
Both JPEG and PNG outputs can be compressed. To do so you can add a "compressor" argument to each group config. Compressors have to be a function taking a Buffer and returning a Promise for a buffer. A good source for those is the imagemin project. We have used pngquant (good compression, but is sometimes visible), optipng (nearly invisible but a lot less compact), jpegtran and mozJpeg (see https://blarg.co.uk/blog/comparison-of-jpeg-lossless-compression-tools for a comparison of jpeg compressions)
Be aware: Changing compressor will not invalidate your cache for that group. You can either change the name or use --clean
.
API
Pixi-packer can be used without the CLI. See cli.js
for how it's done or use --help
Gulp integration
pixi-packer goes to some lengths avoiding opening images in order to improve performance. This doesn't play well with Gulp's piping concepts. If you're already using gulp you can use the following code to call pixi-packer directly:
gulp.task("sprites", function () {
delete require.cache[require.resolve("../resources/images.js")];
var config = require("./resources/images.js");
var pixiPacker = new PixiPacker(
config,
path.resolve(__dirname, "resources"),
path.resolve(__dirname, "static/build/resources/images"),
path.resolve(__dirname, path.join(process.env.HOME || process.env.USERPROFILE, ".pixi-packer-tmp"))
);
pixiPacker.log = {
error: _.compose(gutil.log, util.format),
info: _.compose(gutil.log, util.format),
warn: _.compose(gutil.log, util.format)
};
return pixiPacker.process();
});
Acknowledgement
Graphics used in the example-sprites
folder are taken from http://www.lostgarden.com/2007/05/dancs-miraculously-flexible-game.html