Dragon bones ボーンアニメーション紹介＆v2.0アップデート

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

DragonBonesの紹介とv2.0アップデート Andy Hall ｜アドビシステムズ株式会社　テクニカルエバンジェリスト


だれだっけ？

2

§  職歴はウェブ制作 → Flash開発 → アドビで色々 §  正式な肩書きは「クリエイティブクラウドエバンジェリスト」になりました

§  興味はデザインとコードをまたぐところ §  ゲーム好き

@fenomas


今日のテーマ

さて、質問： Stage3D対応アニメーション制作のもっともややこしいところは

どこでしょう？

3

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4

プログラマーデザイナー



ここです！スプライトシートは単なるコマアニメなのでどうしても何らかのアニメーションをコードで書く必要が出る。


DragonBonesとは、そのワークフロー問題を緩和してくれる、最近注目されるライブラリーである。


萌萌萌



DragonBonesの全体像

8

デザイナープログラマー

ボーンアニメーション


インストールの一言：

9



10



11



12


パネルを使った制作の流れ

13

1.  Flashでタイムラインアニメーションを作る

2.  DragonBonesパネルに読み込み

3.  アニメーションのタイミングと設計をパネルで調整

4.  ボーンアニメーションを書き出し、コードベースのプロジェクトに使う


ボーンアニメーションの設計と考え方

14


ボーンアニメーションの考え方：

15

スプライトシート

+ <メタデータ>



16

スプライトシート

フレーム４フレーム５フレーム６



17

スプライトシートボーンアニメーション

+ <メタデータ>




18

スプライトシートボーンアニメーション

頭： t=0 x=0 y=0 rot=0 t=1 x=2 y=3 rot=0 t=2 x=5 y=7 rot=3 t=3.."

"




19



"

大事なポイント！

1.  PNGに入るのはコマアニメではなくてパーツ。

2.  アニメーションデータはフレーム毎ではない！キーフレーム毎である。



20



"

ところでボーンアニメーションをPNG (XML結合）として書き出すとアニメーションのデータがPNGのメタデータに入り、ボーンアニメーションがPNG一枚で済む。

自分的には感動。


ボーンアニメーションの考え方

ボーンアニメーションのメリット： §  メモリー使用量は圧倒的に低い

§  パーツを動的に入れ替えられる

§  全体シーンのアニメーションを Flashで作ることも可能

§  アニメーションの長さ、細かさはほぼ無制限

弱点：

§  パフォーマンスはスプライトシートほど出ない

21


ボーンアニメーションの設計

基本的なのパーツ：　 Armature & Bone アーマチュア　　ボーン

22

Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869



基本的なのパーツ：　 Armature & Bone アーマチュア　　ボーン

23

Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869



考え方として：

24

アーマチュア ≒ MovieClip

§ アニメーションのコンテナ § 子ボーンのリストを持つ § アニメーションのリストも持つ

ボーン ≒ Sprite § 動くパーツの一つ § 親アーマチュアを持つ § 子アーマチュアも持てる！

だが！どちらも「Container」ではない。


FlashProを見ながら言うと：

25

コンテナMCはアーマチュア



26

子グラフィックはボーン



27

タイムラインのラベル付きの空フレームは当アーマチュアのアニメーションになる



28

子ムービークリップはアーマチュアの条件を

満たせば、


DragonBones v2.0 の新機能！

29


DragonBones v2.0 の新機能

１．アーマチュア ⇔ アニメーションの再利用

一つのアーマチュアに定義してあるアニメーションを違うアーマチュアに適用する。（各アーマチュアのボーンの設計が一致すれば）

30



２．ボーンのZ順序が動的に変わる

アニメーションのパーツの重ねの順が変わった場合が認識される。

31



３．マルチ解像度の対応

PNGの画像データをいくつかのスケールで書き出して、デバイスによって適切なデータを読み込んで、スケールをかけて表示する。

32



４．タイムラインイベント

タイムラインアニメーションにあるサウンド再生とイベントをランタイムで取得し対応できる

33



５．TextureAtlasの読み込み

DragonBonesパネルで作った物以外にも、別方法で作られたテキスチャーアトラスを利用できる

34



６．時間ベースのアニメーション

各アニメーションの再生スピードを変えたり、巻き戻したりできる。

35


Andy Hall http://aphall.com @fenomas

ご清聴ありがとうございました！

Technology

Dragon bones ボーンアニメーション紹介＆v2.0アップデート