Toolkit for CreateJSのスプライトイメージ化のフローを検討する (1)
以前書いたToolkit for CreateJSのブログにて、画像のスプライトイメージ化のフローをまだ確立できていないと書いたのだけど、少し進展(?)あったので書いておく。
TexturePackerのコマンドラインツールでスプライトイメージ生成
自分はTexturePackerを使用しているのですが、コマンドラインツールもあるのでそれでやってしまう(TexturePacker起動せずともコマンドでスプライトイメージの生成ができる)。
TexturePacker - Create Sprite Sheets for your game!
まず環境変数のPathを設定してあげて(Windows7 汗)、でコマンド一覧のページが見当たらなかったので
TexturePacker --help > help.txt
みたいな感じでヘルプ書き出したものをみることにした。
で、そこに
Examples: TexturePacker assets creates out.plist (cocos2d) and out.png from all png files in the 'assets' directory trimming all files and creating a texture with max. 2048x2048px TexturePacker --data main-hd.plist --format cocos2d --sheet main-hd.png assets same as above, but with output files main-hd.plist, main-hd.png TexturePacker --scale 0.5 --max-size 1024 --data main.plist --format cocos2d --sheet main.png assets creates main.plist and main.png from all files in assets scaling all images to 50%, trimming all files and creating a texture with max. 1024x1024px ...
とわかりやすいサンプルもいくつか載っているのでそれ真似て、
TexturePacker --data %hoge%.json --format easeljs --sheet %hoge%.png images
こんな感じでやることにした。
これで"images"フォルダにある画像を1画像にまとめた"hoge.png"というスプライトイメージと、それぞれの画像の位置情報を含んだ"hogehoge.json"というファイルを生成できる。
ちなみに中身はこんな感じ。
{ "images": ["hoge.png"], "frames": [ [2, 2, 173, 105], [245, 2, 94, 92], [177, 2, 66, 101], [390, 2, 49, 81], [341, 2, 47, 85], [444, 2, 66, 75], [444, 79, 38, 31], [341, 89, 9, 20] ], "animations": { "bear_body":[0], "bear_face":[1], "bear_legL_B":[2], "bear_legL_F":[3], "bear_legR_B":[4], "bear_legR_F":[5], "bear_tail":[6], "bear_eye":[7] }, "texturepacker": [ "SmartUpdateHash: $TexturePacker:SmartUpdate:d37e132c295fc2a6046c3ecd15380d7e:c648458664f2c206d585b54f0a060629:b395f7e60e6f5b6593be31184330173a$", "Created with TexturePacker (http://www.texturepacker.com) for EaselJS" ] }
アニメーションのjsファイルにjsonのデータをぶち込む
スプライトイメージ化はできたけど代わりにjsonファイルが増えてしまって、通信の回数はもちろん減らしたほうがいいし、それをさらに読み込むつくりにするのも面倒だったので、jsonファイル(というかオブジェクト)をアニメーションのjsファイルの中に無理やりぶち込むことにした。
なかなかダサいのかもですが、こんなファイルをnodeでつくってみました。
//ファイルシステム var fs = require('fs'); //対話 var readline = require('readline'); var rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.question("ファイル名を入力してください?\n", function(fileName) { rl.close(); //スプライトイメージのjsonファイルを読み込む fs.readFile('./' + fileName + '.json', 'utf8', function (err, text) { //読み込みエラー時 if(err){ console.log('"' + fileName + '.json"というファイルが見つかりません'); return; } //jsonにパース var data = JSON.parse(text); //不要なプロパティ消去 delete data.images; delete data.texturepacker; //jsonを文字列に戻す var jsonStr = JSON.stringify(data); //アニメーションjsファイルを読み込む fs.readFile('./' + fileName + '.js', 'utf8', function (err, text) { //'var p; // shortcut to reference prototypes'という文字列をトリガーに //json(オブジェクト)をインジェクションする text = text.replace( 'var p; // shortcut to reference prototypes', 'var p; // shortcut to reference prototypes\n\nlib.jsonInfo=' + jsonStr + ';'); //ファイルに書き込む fs.writeFile('./' + fileName + '.js', text , function (err) { //読み込みエラー時 if(err){ console.log(err); return; } }); }); }); });
アニメーションのjsファイルを見てみると、
var p; // shortcut to reference prototypes lib.jsonInfo={"frames":[[2,2,173,105],[245,2,94,90],[177,2,66,101],[390,2,49,81],[341,2,47,85],[441,2,66,75],[441,79,38,31],[341,89,9,20]],"animations":{"bear_body":[0],"bear_face":[1],"bear_legL_B":[2],"bear_legL_F":[3],"bear_legR_B":[4],"bear_legR_F":[5],"bear_tail":[6],"bear_eye":[7]}}; // library properties: lib.properties = { width: 640, height: 640, ...
こんな感じになってくれる。
これでサーバから読み込む必要があるものは画像(スプライトイメージ)とjsファイル(アニメーション)だけになった。
上記2つの処理はコマンド1発でできるのでそんな悪くはないのかと思っているけど、まあもっといい方法いくらでもあると思うので教えていただけたらめっちゃ助かります。