本日の記事は、マイナーだけどかなり使える"DragonBones"のネタ３つ目です。
意外な使い道#3 UIを製作する
Staringを使ってUIを製作する際は、簡単なボタン程度であればStaringビルトインのものを、高度なUIであればFeathersを使うというのが一般的かと思います。どちらも高速に動く良いものですが、デザインの設定にプログラムの記述が必須となります。Flashを長い事使っている者からすると、アニメーションの取り込みづらさや、タイムラインで状態遷移を手軽に確認できないなど、物足りない部分があります。
Flashってそんなものだったっけ。。Stage3DのUIだってもっと気楽にアニメさせたいぞ！
さてさて、その１の記事で解説した通り、DragonBonesは骨構造を持ったキャラクターアニメーションのためのツールですが、骨構造を持たない通常のタイムラインアニメーションも、Stage3Dで高速に動くというアドバンテージを無くさずに作成する事ができます。という事は、これを使って、昔ながらのタイムラインボタンやMovieClipボタンのような物を作る事はできないでしょうか。Starling上で動くアニメーションも、構造は普通にSpriteとImageの組み合わせです。ここにタッチ制御を埋め込んでやれば。。
↓
やってみたら、できました！
と、いう事でソース含めて公開します。（何かあった場合でも責任は取れませんが、）個人・商用で自由に使っていただければと思います。
DragonButtons gitHubアドレス：https://github.com/harayoki/dragonButtons
DragonButtonsデモ
こちらのリンク先にDragonBonesを利用して作られたボタンのデモがあります。カボチャもボタンです！
http://harayoki.github.io/dragonButtons/demo/
- カボチャ：アニーション付きのボタン アニメ中はタップできないようにしてあります(フリーズ機能)
- Yesボタン：上記カボチャボタンをアクティブにします
- noボタン：上記カボチャボタンを非アクティブにします
- toggleボタン：タップすると選択状態になり、再度タップすると元に戻ります
- longpressボタン：長押しすると反応します
これらのボタンはタイムラインアニメーションで作られ、 Stage3Dで動作しています。よって、スマホ上でがんがん使っても60FPSキープできます。
なお、下の方にあるこれ↓はこのボタン構築に使われているテクスチャアトラスデータです。(実際はその２で解説したdbswf形式を使っていますが、テクスチャアトラスデータで書き出した場合の参考となります。)
ボタンの作り方
ここに上記アニメーション元ファイルのflaがありますので、開いて確認してみてください。
https://github.com/harayoki/dragonButtons/blob/master/material/buttonSetA.fla
FlashビルトインのMovieClipボタンと似たような作り方をします。_up,_down,_trigger,_longPressなどの名前でラベルを設定しておくと、そこがそれぞれボタンの通常、タッチ開始時、タップ(タッチ終了)時、長押し時のアニメ再生に使われます。(12フレーム目の#_upというラベルはDragonBonesのフレーム移動のためラベルでActionScriptでいうとgotoAndPlay('_up')に値します。)
タッチの当判定は自動で制御されますが、１フレーム目のオブジェクトの大きさで当たり判定されますので、アニメーションの構成などによっては意図通りに動きません。その場合、hitAreaというレイヤーに透明の矩形イメージを置いて、明示的にあたり判定を指定してあげてください。矩形以外は対応していません。
このようなタイムラインをDragonBonesデザインパネルでデータとして書き出し、Starling + DragonBonesランタイムで読み込んで、筆者作のDragonButtonsライブラリで制御してつかいます。
ボタン制御の仕方
ActionScript側からの制御については、直接サンプルコードを確認してみてください。
https://github.com/harayoki/dragonButtons/blob/master/Main/src/MainSprite.as
handleDragonComplete関数内でDragonButtons(クラス名はArmatureButton)の初期化と制御をしています。他の部分はStarking自体の初期化とDragonBonesの初期化です。こちらの方がボタン制御よりややこしいですね。(ソース中で扱っているDQueryというのはとりあえず気にしないでください。)
なお、実際に製作したのがそこそこ前だったため自分でも忘れていましたが、DragonButtonsにはDocsも用意してありました。 
http://harayoki.github.io/dragonButtons/asdoc/
ボタン以外のUIは作れるのか？
ボタンができるという事は、これを利用して、ラジオボタン、チェックボックス、タブ、スイッチ、などを作る事は容易です。また通常アニメーションの中にこのボタン(やその他派生UI)をちりばめておき、個々でUIパーツとして初期化する事も可能なので、派手なアニメーション演出でコンフィグ設定パネルのような大型UIが画面に入ってくるような事も実現できます。ゲーム用の変わった形状のかっこいいデザインのUIなども作成できます。
はい、実際にそのような事をとある案件でやったのですが、残念ながらそちらのソースは公開できない。。。のですが、基本となるこのボタンクラスはそこそこしっかり作ってありますので、それを利用した高度なコンポーネント作成はさほど難しくないはでずです。興味があればぜひ利用してみてください。UI中にテキストフィールドを配置したい場合は、命名ルールに該当する名前のImageを動的にStarlingのテキストフィールドに差し替えるような感じで対応しました。リストコンポーネントに関してはちょっと難しかったのですが、そこはFeathersを使って、各行の表示(Item)にDragonBonesを用いる事でいい感じのものが作れました。
今回の説明は細かいことを端折っていますので、もし何か興味や質問などある方がおれば個別にお尋ねください。
まとめ
駆け足ですが、以上です。(当初、DragonBonesに関してはこの３つ目だけ書くつもりだったのだが、そのマイナーぷりゆえに前振りが長くなってしまった。）Starlingネタはまだまだあるんですが、カレンダーの残りも少ないし、すでに７本も(笑)投稿しているので残りはまた来年かな。そういえば、DragonBonesPRO (Flashの拡張機能じゃない方）が先日バージョンアップしたのですが、まんま画面デザインからしてあのツールでした。うーん。
ではでは、良いお年を。