Andengineで使うスプライトアニメーション素材作成

Andengineで使うスプライトアニメーション素材作成皆様はじめまして、今月からGeNERACEに参画してます。マークアップエンジニアのユージローです。

さて、いくつか前のポストでも紹介されてる通り、弊社ではAndengineを使用して開発を行っています。

Andengine = java

マークアップエンジニア = html,css,javascript,etc

仕事が無い!(待て

そんなこんなで慣れないjavaを少し触りつつ、僕は現在キャラクターなどの画面素材を担当しています。

Andengineはjavaですので、アニメーションの実装方法もcssアニメーションなどではなく、javaを用いてのアニメーションが主になりますが、スプライトアニメーションは昔ながらのフィルムビデオと同じ形式です。

全てのコマを一枚の画像として書き出さなければなりません。

スプライトシートは縦横に繰り返すものもありますが、単純なものであれば
縦もしくは横のみの繰り返しで済みます。

このスプライトシートですがアナログな作業でやるのは効率的ではないのでツールを使います。
作成ツールも下記のように幾つかあるのですが、Flash Pro CS6からFlashでもスプライトシートの作成が可能になりました。

インストールタイプのツール:http://www.codeandweb.com/texturepacker
ブラウザアプリ:http://draeton.github.com/stitches/

ということで今回はFlash Pro CS6を使用した場合のスプライトシート作成手順です。

ステップ1:Flashアニメの書き出し

Flashアニメの作成方法は端折るとして、ここでは作成したFlashアニメをpng画像に書き出します。キャプチャのようにメニューの『ファイル』➡『書き出し』➡『ムービーの書き出し』を選択します。

ss2013-02-22-12.40.08

フォーマットは今回背景有の為jpegでもgifでも良いのですが、変更で透過させる可能性も考えてpngシーケンスを選択しました。ss2013-02-22-12.58.30

保存するとタイムラインに沿った画像が全て吐き出されこのようになります。
無事に書き出せました。

スクリーンショット-2013-02-22-13.07.54

ステップ2:ライブラリへの取り込み

ここでまたFlash Proで新規ファイルを作成します。
新規ファイルを作成したら、メニューの『ファイル』➡『読み込み』➡『ライブラリに読み込み』を選択し、先ほど書き出したpng画像を全て読み込みます。
スクリーンショット-2013-02-22-13.22.39

ステップ3:スプライトシートの生成

読み込みが完了したら、今度はライブラリウインドウから全ての素材を選択して右クリック➡『スプライトシートを生成』を選択します。

スクリーンショット-2013-02-22-13.55.21

最後です。
スプライトシートの出力と書かれている部分でシートの幅と高さや、素材間の距離、背景色などの調整を行い書き出して完了です。
スクリーンショット-2013-02-22-14.01.50

シートの大きさなどは実際の実装にも影響する為、事前に認識のずれが無いかなどの確認が必要です。

また今回は新規ファイルを作成しましたが、Flashアニメーションの任意のキーフレームシンボルからスプライトを生成することも可能になっています。

ご覧いただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です