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

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential.
DragonBonesの紹介とv2.0アップデート
Andy Hall ｜アドビシステムズ株式会社テクニカルエバンジェリスト

だれだっけ？
2
§  職歴はウェブ制作 → Flash開発 → アドビで色々
§  正式な肩書きは「クリエイティブクラウドエバンジェリスト」
になりました
§  興味はデザインとコードをまたぐところ
§  ゲーム好き
@fenomas

今日のテーマ
さて、質問：
Stage3D対応アニメーション制作の
もっともややこしいところは
どこでしょう？
3

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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
ボーンアニメーション
頭：
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.."
"
大事なポイント！
1.  PNGに入るのはコマアニメ
ではなくてパーツ。
2.  アニメーションデータは
フレーム毎ではない！
キーフレーム毎である。

20
ボーンアニメーション
頭：
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.."
"
ところでボーンアニメーションを
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
ご清聴ありがとうございました！

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

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

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

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

More from Andy Hall

More from Andy Hall (17)

Recently uploaded

Recently uploaded (8)

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