© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBonesの紹介とv2.0アップデートAndy Hall | アドビ システムズ株式...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.だれだっけ?2§  職歴はウェブ制作 → Flash開発 → アドビで色々§  正式な肩書き...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.今日のテーマさて、質問:Stage3D対応アニメーション制作のもっともややこしいところはどこでし...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4プログラマーデザイナー
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5プログラマーデザイナーここです!スプライトシートは単なるコマアニメなのでどうしても何らかのア...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6DragonBonesとは、そのワークフロー問題を緩和してくれる、最近注目されるライブラリー...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBonesの全体像8デザイナー プログラマーボーンアニメーション
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:9
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:10
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:11
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:12
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.パネルを使った制作の流れ131.  Flashでタイムラインアニメーションを作る2.  Drag...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計と考え方14
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:15スプライトシート+<メタデータ>
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:16スプライトシートフレーム4フレーム5フレーム6
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:17スプライトシート ボーンアニメーション+<メタデータ>フレーム...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:18スプライトシート ボーンアニメーション頭:t=0 x=0 y=...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:19ボーンアニメーション頭:t=0 x=0 y=0 rot=0
t...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:20ボーンアニメーション頭:t=0 x=0 y=0 rot=0
t...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方ボーンアニメーションのメリット:§  メモリー使用量は圧倒的に低い...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計基本的なのパーツ:  Armature & Boneアーマチュア  ボ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計基本的なのパーツ:  Armature & Boneアーマチュア  ボ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計考え方として:24アーマチュア ≒ MovieClip§  アニメー...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:25コンテナMCはアーマチュア
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:26子グラフィックは	ボーン
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:27タイムラインのラベル付きの空フレームは当アーマチュアのアニ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:28子ムービークリップはアーマチュアの条件を満たせば、
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能!29
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能1.アーマチュア ⇔ アニメーションの再利用一つのアー...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能2.ボーンのZ順序が動的に変わるアニメーションのパーツ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能3.マルチ解像度の対応PNGの画像データをいくつかのス...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能4.タイムラインイベントタイムラインアニメーションにあ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能5.TextureAtlasの読み込みDragonBo...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能6.時間ベースのアニメーション各アニメーションの再生ス...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36Andy Hallhttp://aphall.com@fenomasご清聴ありがとうござい...
Upcoming SlideShare
Loading in …5
×

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

7,832 views

Published on

Flash向けのボーンアニメーション ライブラリDragonBonesの紹介。ボーンアニメーションの考え方、Flashでの作り方、そしてライブラリのv2.0の新機能。

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
7,832
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
12
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

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

  1. 1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBonesの紹介とv2.0アップデートAndy Hall | アドビ システムズ株式会社 テクニカルエバンジェリスト
  2. 2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.だれだっけ?2§  職歴はウェブ制作 → Flash開発 → アドビで色々§  正式な肩書きは「クリエイティブ クラウド エバンジェリスト」になりました§  興味はデザインとコードをまたぐところ§  ゲーム好き@fenomas
  3. 3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.今日のテーマさて、質問:Stage3D対応アニメーション制作のもっともややこしいところはどこでしょう?3
  4. 4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4プログラマーデザイナー
  5. 5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5プログラマーデザイナーここです!スプライトシートは単なるコマアニメなのでどうしても何らかのアニメーションをコードで書く必要が出る。
  6. 6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6DragonBonesとは、そのワークフロー問題を緩和してくれる、最近注目されるライブラリーである。プログラマーデザイナー萌 萌萌
  7. 7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
  8. 8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBonesの全体像8デザイナー プログラマーボーンアニメーション
  9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:9
  10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:10
  11. 11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:11
  12. 12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.インストールの一言:12
  13. 13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.パネルを使った制作の流れ131.  Flashでタイムラインアニメーションを作る2.  DragonBonesパネルに読み込み3.  アニメーションのタイミングと設計をパネルで調整4.  ボーンアニメーションを書き出し、コードベースのプロジェクトに使う
  14. 14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計と考え方14
  15. 15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:15スプライトシート+<メタデータ>
  16. 16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:16スプライトシートフレーム4フレーム5フレーム6
  17. 17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方:17スプライトシート ボーンアニメーション+<メタデータ>フレーム4フレーム5フレーム6
  18. 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..""フレーム4フレーム5フレーム6
  19. 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. 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. 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの考え方ボーンアニメーションのメリット:§  メモリー使用量は圧倒的に低い§  パーツを動的に入れ替えられる§  全体シーンのアニメーションをFlashで作ることも可能§  アニメーションの長さ、細かさはほぼ無制限弱点:§  パフォーマンスはスプライトシートほど出ない21
  22. 22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計基本的なのパーツ:  Armature & Boneアーマチュア  ボーン22Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869
  23. 23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計基本的なのパーツ:  Armature & Boneアーマチュア  ボーン23Pix: http://jvk.deviantart.com/art/Claymation-armature-42001869
  24. 24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ボーンアニメーションの設計考え方として:24アーマチュア ≒ MovieClip§  アニメーションのコンテナ§  子ボーンのリストを持つ§  アニメーションのリストも持つボーン ≒ Sprite§  動くパーツの一つ§  親アーマチュアを持つ§  子アーマチュアも持てる!だが!どちらも「Container」ではない。
  25. 25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:25コンテナMCはアーマチュア
  26. 26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:26子グラフィックは ボーン
  27. 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:27タイムラインのラベル付きの空フレームは当アーマチュアのアニメーションになる
  28. 28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FlashProを見ながら言うと:28子ムービークリップはアーマチュアの条件を満たせば、
  29. 29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能!29
  30. 30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能1.アーマチュア ⇔ アニメーションの再利用一つのアーマチュアに定義してあるアニメーションを違うアーマチュアに適用する。(各アーマチュアのボーンの設計が一致すれば)30
  31. 31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能2.ボーンのZ順序が動的に変わるアニメーションのパーツの重ねの順が変わった場合が認識される。31
  32. 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能3.マルチ解像度の対応PNGの画像データをいくつかのスケールで書き出して、デバイスによって適切なデータを読み込んで、スケールをかけて表示する。32
  33. 33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能4.タイムラインイベントタイムラインアニメーションにあるサウンド再生とイベントをランタイムで取得し対応できる33
  34. 34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能5.TextureAtlasの読み込みDragonBonesパネルで作った物以外にも、別方法で作られたテキスチャーアトラスを利用できる34
  35. 35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.DragonBones v2.0 の新機能6.時間ベースのアニメーション各アニメーションの再生スピードを変えたり、巻き戻したりできる。35
  36. 36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36Andy Hallhttp://aphall.com@fenomasご清聴ありがとうございました!

×