PIXI.js用にスプライトのテクスチャをGulpで生成する

gulp.spritesmithとspritesmith-texturepackerを使います。

インストールは省略。

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var spritesmith_texturepacker = require('spritesmith-texturepacker');

gulp.task('make_sprite', function(cb){
  var src_dir = './images';
  var dist_dir = './sprite';
  var sprite_name = 'sprite.png';
  gulp.src(src_dir+'/*.png')
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.json',
      algorithm: 'binary-tree',
      cssTemplate: spritesmith_texturepacker
    }))
    .pipe(gulp.dest('./dist_dir'));
});

こんな感じです。 PIXI.jsでの読み込みは以下

var loader = new PIXI.loaders.Loader();
loader.add('sprite', 'dist_dir/sprite.json');

var texture  = new PIXI.Texture.fromFrame('画像のファイル名');

注意したいのは複数のスプライトを読んでもframeIdは同じ名前空間になるので画像のファイル名は重複ができません。(多分)

各スプライト内で1.pngとか同じ名前をつけたい時は生成するときに一回リネームとか一時処理をしたほうがいいかもです(もっといい方法があるのかな...)