スプライトシートに纏めて読み込むファイル数を減らすことでことで、纏める前に比べて高速なローディングを実現することができます。
まずは、普通にLWFのコンテンツを作りLWFSで書き出してみましょう。
LWFを作ってパブリッシュすると場合、LWFS_workフォルダの作業フォルダ内に
新しくswfファイルと(ファイル名)+.bitmap という名前のフォルダが生成されます。
作られていることを確認したら、.bitmapフォルダの中に入ってみましょう。
すると、制作したLWFで使用されている画像が入っています。
コチラのサンプルLWFのbitmapフォルダの中は↓のようになっています。
これらの画像を↓のような一枚の画像にしたいと思います。
このように１枚の画像にまとめる機能を持ったアプリは、主に下記のようなものがあります。
・Adobe Flash CS6以降のバージョン
・TexturePacker (シェアウェア)
今回は、上記の2種類のアプリのうちFlashを使用した方法をメインに紹介していきます。
【Flash CS6以降】
まずは新規ファイルを開きます。
そして、ライブラリの中に.bitmapフォルダ内にあるすべての画像を読込ましょう。
読み込みが完了したらライブラリ内の画像を全て選択し右クリックで「スプライトシートを作成」
を選択しましょう。
すると↓のような画面が出てくると思います
ボーダーやシェイプの余白は2pxほど空けておきましょう。
また、画像のサイズは1024×1024を超えないように注意してください。超えてしまうと端末によっては動作に支障をきたしてしまいます。
書き出し先はflaと同階層で、適当な名前(英数字のみ)のファイル名で書きだしてください。
あと、必ずデータ形式は「JSON」にしてください。その他の形式を選ぶと使用出来ません。
また、その下にある回転やカットにはチェックを入れないでください。
そして、書き出しを完了すると１つになった画像ファイルと、その画像に関する情報が収まっている
.jsonファイルが出力されます。そしてこのjsonファイルの文字コードを変える必要があるので、文字コードを指定して保存できるエディタ(TeraPad, K2Editor等)で開き、文字コードをUTF-8Nにして上書き保存してください。(BOM付きはNGです)
そうすると、LWFSが自動で変換をしてくれます。変換完了後にLWFS_work_outputフォルダの該当の場所を見てみると、1枚にまとめた画像のみがファイルに入っていると思います。
この状態で実際動いていることを確認したら、完了となります。
【TexturePacker】
こちらは、シェアウェアとなりますがFlashと比べて細かい部分で高機能となります。
http://www.codeandweb.com/texturepacker
(様々な配置アルゴリズムや、画像サイズを2の自乗以外でも計算してくれる等)
書き出す際にはData Formatは「JSON Hash」を選択してください。
また、rotateやTrimには対応していないのでAllow rotationは無効。Trim modeはNoneにしてください。
こちらはjsonを書きだした後に文字コードを変更する必要はありません。
容量削減のために画像の減色などを行いたい場合は、まとめた画像に対して行なってください。
サンプルに使用したLWFはこちらになります。
・webkitcss
・canvas
・webgl
次回は、ダイナミックテキストの装飾や整列機能について触れていきたいと思います
0 件のコメント:
コメントを投稿