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

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

3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
今日のテーマ
さて、質問：
Stage3D対応アニメーション制作の
もっともややこしいところは
どこでしょう？
3

4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
プログラマーデザイナー

5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
プログラマーデザイナー
ここです！
スプライトシートは単なる
コマアニメなのでどうしても
何らかのアニメーションを
コードで書く必要が出る。

6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
DragonBonesとは、
そのワークフロー問題を緩和してくれる、
最近注目されるライブラリーである。
プログラマーデザイナー
萌 萌
萌

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

8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBonesの全体像
8
デザイナー プログラマー
ボーン
アニメーション

9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
インストールの一言：
9

10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
インストールの一言：
10

11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
インストールの一言：
11

12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
インストールの一言：
12

13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
パネルを使った制作の流れ
13
1. Flashでタイムラインアニメーションを作る
2. DragonBonesパネルに読み込み
3. アニメーションのタイミングと設計を
パネルで調整
4. ボーンアニメーションを書き出し、
コードベースのプロジェクトに使う

14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの設計と考え方
14

15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
15
スプライトシート
+
<メタデータ>

16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
16
スプライトシート
フレーム４
フレーム５
フレーム６

17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
17
スプライトシート ボーンアニメーション
+
<メタデータ>
フレーム４
フレーム５
フレーム６

18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方：
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一枚で済む。
自分的には感動。

21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの考え方
ボーンアニメーションのメリット：
§ メモリー使用量は圧倒的に低い
§ パーツを動的に入れ替えられる
§ 全体シーンのアニメーションを
Flashで作ることも可能
§ アニメーションの長さ、細かさはほぼ無制限
弱点：
§ パフォーマンスはスプライトシートほど出ない
21

22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの設計
基本的なのパーツ： Armature & Bone
アーマチュア ボーン
22
Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869

23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの設計
基本的なのパーツ： Armature & Bone
アーマチュア ボーン
23
Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869

24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ボーンアニメーションの設計
考え方として：
24
アーマチュア ≒ MovieClip
§ アニメーションのコンテナ
§ 子ボーンのリストを持つ
§ アニメーションのリストも持つ
ボーン ≒ Sprite
§ 動くパーツの一つ
§ 親アーマチュアを持つ
§ 子アーマチュアも持てる！
だが！どちらも「Container」ではない。

25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FlashProを見ながら言うと：
25
コンテナMCは
アーマチュア

26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FlashProを見ながら言うと：
26
子グラフィックは
ボーン

27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FlashProを見ながら言うと：
27
タイムラインの
ラベル付きの空フレームは
当アーマチュアの
アニメーションになる

28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FlashProを見ながら言うと：
28
子ムービークリップは
アーマチュアの条件を
満たせば、

29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能！
29

30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
１．アーマチュア ⇔ アニメーションの再利用
一つのアーマチュアに定義してあるアニメーションを
違うアーマチュアに適用する。
（各アーマチュアのボーンの設計が一致すれば）
30

31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
２．ボーンのZ順序が動的に変わる
アニメーションのパーツの重ねの順が変わった場合が認識される。
31

32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
３．マルチ解像度の対応
PNGの画像データをいくつかのスケールで書き出して、
デバイスによって適切なデータを読み込んで、スケールを
かけて表示する。
32

33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
４．タイムラインイベント
タイムラインアニメーションにあるサウンド再生と
イベントをランタイムで取得し対応できる
33

34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
５．TextureAtlasの読み込み
DragonBonesパネルで作った物以外にも、別方法で
作られたテキスチャーアトラスを利用できる
34

35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DragonBones v2.0 の新機能
６．時間ベースのアニメーション
各アニメーションの再生スピードを変えたり、
巻き戻したりできる。
35

36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
Andy Hall
http://aphall.com
@fenomas
ご清聴ありがとうございました！