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とか同じ名前をつけたい時は生成するときに一回リネームとか一時処理をしたほうがいいかもです(もっといい方法があるのかな...)