Staringスマホアプリ開発テクニック (使える！DragonBones：その１)

こんにちは、harayokiです。

Adobe Gaming SDK (Flashプラットフォーム上のゲーム開発ライブラリ集)に含まれている、DragonBones ( http://dragonbones.github.io )というライブラリがあります。今回はこのツールの裏技的な使い方をお届けします。

DragonBonesとは

DragonBonesはオープンソースのキャラクターアニメーションツールです。Starlingに依存しており、ランタイムのライブラリおよびFlash PRO上で(最近は単独アプリとしても)動くアニメ作成ツールの２つで構成されます。タイムラインアニメで作られたキャラクターアニメーションをStarling上で高速に動かす事ができる優れものです。すごく乱暴に説明すると、これはFlashランタイムにおけるSpine ( http://ja.esotericsoftware.com )です。メッシュ機能はありませんが、機能や利用しているクラス名などが酷似しています。ああ、Spineなのね、で通じる人も多いのでは。

今回の投稿の主題ではないので、これらのツールの基本的な説明はしませんが、興味がある人は公式サイトのFEATURESページ ( https://dragonbones.github.io/features.html ) をご覧ください。古いバージョンでよければ、チュートリアルの日本語訳( https://dragonbones.github.io/DBGettingStarted_V2.0_ja.html )もあります。なお、翻訳担当者は私です。

意外な使い道#1 スマホ用のタイムラインアニメーションツールとして使う

DragonBonesではタイムラインに配置したアニメーションに、専用ツールパネル上で骨構造を仕込んでいき、MovieClipの入れ子を使わずともパーツに親子構造を持たせられるのですが、(つまりはボーンツール）、実はこの骨構造を仕込む事は必須ではありません。また、MovieClipの入れ子もそのまま使う事ができますので、Starling上で動く、つまり、スマホで高速に動くFlashアニメーションを書き出す事ができます。

パスデータもグラフィックオブジェクトにして配置すれば最終的にビットマップに変換されますが使えます。とはいえ制限はいつかあるので注意です。下記に雑に羅列します。

• シェイプトゥイーンは使えない。
• モーションガイドは使えない。イージングは使える。
• １つのレイヤーには１つのパーツしかおけない。（コマアニメで切り替わるのはOK。）
• クラシックトゥイーンのみ対応。
• すべて自動的にモーショントゥイーンがかかっていると認識する。 （タイムライン上で確認したいので、作業的にはクラシックトゥイーンを設定するが、実際に書き出すと自動的にすべてのパーつにモーショントゥイーンがつくので、逆に動かしたくないもの動いたりする。止めておきたい場合は停止しているアニメを明示的に作る。）
• フィルターアニメーションは使えない。 (フィルタをグラフィックとして静的にかけておく事はできるが、画像に変換される。）
• カラー効果は使えるが癖がある。 （乗算・加算などは対応する予定だったような？）
• サウンドは間接的に使える。 (タイムラインに音を設定しておけばサウンド再生のタイミング情報は書き出されるが、AS3側で対応するサウンドを鳴らしてやらなければいけない。しかし、音とともにタイムラインプレビューができる分、他のツールよりはずっと楽。)
• AcrionScriptは記述できない。（ランタイム側に投げるカスタムイベントは仕込める。）

これらに注意して書き出したアニメーションデータを、DragonBonesの手順で再生するだけで大丈夫です。
ループ再生などはツール上で設定しますが、scriptからも制御できます。gotoAndPlayとかstopとかのタイムライン操作も可能です。

さて、DragonBonesで書き出すアニメーションはフレームベースではなく、時間ベースで再生されます。コンテンツの動作が重くなってくると、尺が伸びたりしないものの、アニメーションのコマがすっ飛ばされるので留意しましょう。世の中のアニメーション再生エンジンは時間ベースの方が多数派だとは思うので、フレームベースは逆に短所だとも言われますが。

意外な使い道#2 美しいテクスチャ書き出しに使う

脇の解説が長くなったので(笑)次回で。

意外な使い道#3 UIを製作する

これが今回の記事のメインのつもりだったのですが(笑)次回で。

DragonBonesのインストールについて

ダウンロードページ( https://dragonbones.github.io/download.html ) にある、DB Design Panelという物を使ってください。Flash PROの拡張機能として動きます。隣にあるDB PROというのはFlash PROがなくても単独で動くツールで、今後はこちらのみのバージョンアップになるようです。ただし、機能的には今の所DB Design Panelの方が優れているように見えます。最新のFlash PROには、エクステンションマネージャー経由でインストールできないことがあるので、その場合の解決方法は自分の投稿したFlash Advent Calender 2015の別記事を参考にしてください。

Spineについて

最初にさっと説明したSpineにもStarling上で動くランタイム( https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine-starling )があります。最近、筆者はSpineも愛用しています。個人的な感覚では、キャラクターを動かすのであればSpineの方が使いやすく、アニメーションを書き出すのであればFlashの方が使いやすく思えます。今回の投稿内容はSpineを使った場合でも当てはまる部分が多いですね。Spineにはメッシュ機能というパーツをゆがませる強力なアニメーション機能があるため、自分の周りでも人気となっています。（Starling+Spineでメッシュを使ったデモ： http://ja.esotericsoftware.com/files/runtimes/spine-starling/raptor/ )

Stage3Dのシェーダ言語であるAGAL3も最近機能追加されましたし、Starlingも2.0になります。ここでカスタム化したDisplayObjectを作ることが容易になるので、StarlingでもメッシュコントロールできるDisplayObjectが作成され、さらにFlashPROCCもといAnimateCC上やDragonBonesPROでもそれに対応できるようになると良いですね。

終わりに

実際のスマホコンテンツ開発現場では、ボーンを使ったキャラクターアニメーションツールよりも、タイムラインアニメの書き出しのほうがずっと需要があるのではないでしょうか？上記のテクニックを使うと、出力されるテクスチャアトラス画像の大きさなどは気にしなくてはいけませんが、かなり忠実にFlashアニメーションをStarling上で再現する事ができます。
いつものタイムラインアニメーションが秒間60フレームで動く姿は初めて見ると感動的でさえあります。おすすめです。

ではでは。