今回から、ボーンアニメーションについてご紹介します。
ボーンアニメーションとは、キャラクターを腕や頭等のパーツ単位で分け、それらをつなぎ合わせて骨格を作成し、各パーツにキーフレームを設定することで動きを表現するアニメーションです。
スケルタルアニメーション、またはスキンドメッシュアニメーションとも呼ばれます。
FlashにはDragonBonesという、ボーンアニメーションのオープンソースライブラリがあり、Starlingにも使用することができます。
またDragonBonesでは、ファイル出力設定が複数用意されています。
GitHubで公開されているライブラリを使用する必要がありますが、cocos2d-xでもDragonBonesで作成したファイルを使用したボーンアニメーションを実装することが出来ます。
cocos2d-xでは、DragonBones以外にもCocoStudioやSpine等のツールで出力したファイルも扱うことが出来るので、cocos2d-xでのボーンアニメーション実装方法は、別の機会でご紹介したいと思います。
当記事では、Starlingでボーンアニメーションを使用する前準備として、DragonBonesのインストールからファイル出力までを紹介します。
まずは、Flash ProfessionalにDragonBonesをインストールします。
＜ DragonBonesのインストール ＞
1.下記URLから、「dragonbones_v2.4.1.zip」「dragonbonesdemos_v2.4.zip」をダウンロード
http://dragonbones.github.io/
2.ダウンロードした「dragonbones_v2.4.1.zip」「dragonbonesdemos_v2.4.zip」を解凍
3.下記URLから、エクステンションマネージャーをダウンロード
http://www.adobe.com/jp/exchange/em_download/
4.エクステンションマネージャーをインストール
5.エクステンションマネージャーを起動
解凍して出来た「dragonbones_v2.4.1」にある、DragonBonesDesignPanel.zxpを
「ファイル」→「拡張機能をインストール」から開き、DragoneBonesのパネルをインストール
次は、実際にソースコードで使用するファイルをDragonBonesで作成します。
< アニメーション用ファイルの作成 >
1.Flash CCを起動し、「dragonbonesdemos_v2.4/DesignPanelDemos」の中にある、Dragon.flaを開く
2.「ウィンドウ」→「エクステンション」からDragonBonesDesignPanelを起動
3.読み込みを押下して、読み込みのウィンドウを開く
4.読み込み⇒全てのライブラリアイテム、 レイアウトアルゴリズム⇒MaxRects
サイズ⇒任意の数値、 パディング⇒任意の数値
に設定してOK
5.書き出しを押下して、書き出しのウィンドウを開く
6.書き出し⇒PNG(データを含む)、書き出しの倍率⇒任意の数値
に設定してOK
以上で、DragonBonesをソースコードで使用するために必要な準備は全て終了です。
最後まで御覧いただきありがとうございました。
＜次回の更新について＞
次回は、用意したファイルを使用したボーンアニメーションの実装をご紹介致します。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。