CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方

7,232
-1

Published on

CEDEC 2013 セッションで紹介しましたプレゼンです。Flash アニメーション作製のスキルがあるゲーム会社は、どうやってFlashアセットを色んなフレームワークやプラットフォームに持って行けるかの話です。Flash Proの次アップデート「Avatar」を言及します。

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,232
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方

  1. 1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flashによるアセットワークフローの  HTML5やネイティブアプリへのうまい持ち込み方 Andy Hall・アドビ ジャパン
  2. 2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. だれだこいつ @fenomas §  日本在住歴もFlash歴も十ん年 §  物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々 §  現在の肩書がテクニカルエバンジェリスト §  興味はデザインとコードをまたぐところ §  カタコトでゴメンね §  ゲーム好き、などなど
  3. 3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アジェンダ 1.  前提や背景の話 2.  中間フォーマットそれぞれ 3.  HTMLベースの技術 4.  SWFベースの技術 5.  独自フォーマットとカスタマイズ 6.  Avatarでどう変わるかの話 7.  まとめ
  4. 4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 今日の話: Flashによるアセットワークフローの HTML5やネイティブアプリへの うまい持ち込み方 フラッシュ フラッシャー 魔法! 今日はコンテンツ作製ではなく、 この持ち込み方の技術 の話です。
  5. 5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3つの前提を元に 本トークを進めていきます。
  6. 6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3つの前提 ① ビジュアルなアセットは、   ビジュアルアーティストがビジュアルに作るべし。 「コード エディターで アニメーションを 作るな。」 - Abraham Lincoln ※ ※ [要出典]
  7. 7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3つの前提 ② ツールに基づいて   ゲームを展開する技術を選ぶべからず。 §  避けたいこと:  使いたいツールからHTML5アニメーションが  書き出しやすいからHTML5を使う §  理想はこれ:  ゲームとビジネスのニーズを考えてHTML5が最適  だからアセットワークフローをそれにあわせる
  8. 8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3つの前提 ③ ツールのカスタマイズに時間をかけることに   価値がある。
  9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flash → HTML・ネイティブに関する技術達 HTML-JS ビデオ スプライトシート ボーン アニメーション ExGame・PEX CreateJS
  10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 頭いてえよ
  11. 11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ただしどんな技術を使ってアニメーションを どんなプラットフォームに持って行っても、 基本的な仕組みが変わらない。
  12. 12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 何かの 作製環境 何かの 中間フォーマット 何かの 再生環境 (ランタイム)
  13. 13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 SWF ファイル Flash Player ブラウザ・Flashの場合 中間フォーマット ランタイム
  14. 14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 AIR アプリ AIR ランタイム AIRアプリの場合 中間フォーマット ランタイム
  15. 15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 ビデオ メディア プレーヤ 独自再生環境の場合 中間フォーマット ランタイム
  16. 16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 PNG+ メタデータ ブラウザ ライブラリ HTML5等の場合、その1 中間フォーマット ランタイム
  17. 17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アニメーションワークフローの基本 HTML+JS ブラウザ ライブラリ HTML5等の場合、その2 中間フォーマット ランタイム
  18. 18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ポイント! この話をまとめると、 「Flashは⃝⃝フレームワークに 対応するのか?」 ではなくて、 「⃝⃝フレームワークが 再生できるフォーマットを Flashで作る方法はあるのか」 です。
  19. 19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. この話をまとめると、 「Flashは⃝⃝フレームワークに 対応するのか?」 ではなくて、 「⃝⃝フレームワークが 再生できるフォーマットを Flashで作る方法はあるのか」 です。 ポイント!  大体ある! 無くても 作れる!
  20. 20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ちなみにFlash Proのロードマップについて §  Flash Proのこれからを一言でいうと、 より多目的、よりカスタマイズしやすく。 §  理由:SWF制作ツールではなく、 アニメーション制作ツールですから。 §  詳細は後ほど!
  21. 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 中間フォーマットについて
  22. 22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flashから直接書き出すのは: スプライトシート ボーン アニメーション SWF HTML-Canvas (PNG+JS) その他のフォーマットを JSFLで書き出す ビデオ・画像
  23. 23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. JSFLとは? §  JSFLとはFlash自体を自動化出来るJSの仕組み §  Flash内のVMにて実行される §  基本的に、Flash Pro で出来ることなら必ずJSFLで出来る §  (JSFLでしかできないこともいくつかある) §  ヒストリーパネルを使えば非常に慣れやすい
  24. 24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 中間フォーマットの基本 ボーンアニメーション (呼び方は色々) スプライトシート
  25. 25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 背景に隠れているトピック:HWA §  ハードウェアアクセラレーション(HWA)が 大きく中間フォーマットの選択に影響する §  なぜかというとGPUはテキスチャー(画像) しか把握しないので。 §  つまり、スプライトシートのどこが楽しいか というとどこも楽しくはないけど、 HWAに適しているため、ほとんどのFWが 対応するわけです。
  26. 26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. HTML5ベースの技術
  27. 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Toolkit for CreateJS + CreateJS Toolkit for Dart + StageXL
  28. 28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. §  タイムラインアニメーション等を作る (いくつかの表示機能は未対応) §  JavaScriptをスクリプトパネルで /* */ に入れる: §  専用パネルから書き出す (パネルはFlash CCに組み込み) §  出来たHTML+JSファイルが「CreateJS」という AS3っぽいランタイムにて再生される Toolkit for CreateJSの使い方
  29. 29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. §  タイムラインアニメーション等を作る (いくつかの表示機能は未対応) §  JavaScriptをスクリプトパネルで /* */ に入れる: §  専用パネルから書き出す (パネルはFlash CCに組み込み) §  出来たHTML+JSファイルが「CreateJS」という AS3っぽいランタイムにて再生される Toolkit for CreateJSの使い方Dart Dart githubから StageXL
  30. 30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Protip: どちらのToolkitも、 書きだす部分はJSFLで 作ってあるので、 カスタムエキスポートを 実装するなら、参考になるでしょう。 ただし、書き出す部分が オープンソースであるのは現状 Toolkit for Dart のみ。
  31. 31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. SWFベースの技術
  32. 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ExGame (DeNA)
  33. 33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ExGame (DeNA) §  FlashLite 1.1 ベース §  モバゲー専用(けど無料) §  本日はスルー
  34. 34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. PEX (DeNA) §  「互換性を維持しつつ、高速化や外部APIの用意など、  よりHTML5に組み込みやすく拡張したランタイム」 §  同じくモバゲー専用
  35. 35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LWF (グリー) §  Flash 7、AS0ベース §  SWF → LWF に変換 §  作製も再生もオープンソース §  性能が少し制限されるが再生環境が非常に多い: Unity、WebKit CSS 3D、Canvas、WebGL、cocos2d-html5 §  代表タイトル:絶対防衛レヴィアタン §  デモ: http://gree.github.io/lwf-demo/html5/basic2/sample3.html §  弱点はスクリプトかな?
  36. 36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Swiffy (Google) §  SWF をHTML5として再生 (背景では、SWFを  画像・SVG・JSON等に変換する) §  多くの選択肢と違ってAS2・AS3の多い分を対応 §  変換はFlashパネルでもクラウドででも出来る §  とはいえ、代表になる事例は見つかりづらい
  37. 37. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ちなみに、Unity対応2種類のSWFプレーヤー (Autodesk) (RAD Tools)
  38. 38. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ではでは、技術まとめだぁ! 中間フォーマット ランタイム SWF Flash Player SWF AIR JS+PNG CreateJS (HTML5) Dart+PNG Toolkit for Dart (HTML5) スプライトシート 色々 (ほとんどのPF・FW) ビデオ ビデオプレーヤ各種 JS+PNG WebGL (HTML5) (Avatarから!) PNG+メタデータ ボーンアニメーション (DragonBones等) SWF Reel (GREE) / ExGame (DeNA) SWF→LWF LWF (GREE) (各種PF) SWF Swiffy (Google) (HTML5) SWF ScaleForm / Iggy (ネイティブPF等) cocos2D テキスチャー+メタデータ Unity ・・・などなど 標準的に Flashから 書き出す サード パーティー 技術 カスタム
  39. 39. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 独自フォーマット&カスタマイズ
  40. 40. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 完全独自の事例:Wizcorp §  グリーやTake2 等と組んだりするHTML5中心の ゲーム会社 §  社内で作られたアニメーションエンジン向けに カスタムエキスポーターをJSFLで実装 §  代表タイトル: カプコンのDead Rising、他
  41. 41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 一般FWの場合 §  より一般的な例として、 スプライトシートを cocos2d-html5 で 再生してみよう。  デモ!
  42. 42. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. カスタマイズが足りない! §  スプライトシートを再生してたまるか? JSFLを更に活かしてみよう。  デモ!
  43. 43. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Avatarの話
  44. 44. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Avatarとは: §  Flash Pro CCの 次アップデートのこと §  クリエイティブクラウド メンバー限定 §  無料(Flash Pro CCがあれば)
  45. 45. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Avatarの主なアップデート内容 1.  プロジェクトの新種類 §  「HTML Canvas プロジェクト」 §  「WebGL プロジェクト」 2.  HTML5のカスタムパネルの対応 (本トークに関係しない他もある)
  46. 46. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Avatarの主なアップデート内容 §  HTML5カスタムパネルを作るには §  現在Adobe Labsから提供中 http://labs.adobe.com/technologies/extensionbuilder3/ §  やり方について私ブログまで: http://aphall.com/?p=513
  47. 47. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Avatarの後には §  そしてもっと長期的な話について・・・
  48. 48. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. まとめ
  49. 49. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flashから各FWへの道は大体あったりするが、 魔法の弾丸がなく、ベストな技術は FWとゲームの作りによる。 ので、使うFW・PFがスムーズに 対応するフォーマットを、 Flashから効率良く制作する方法を 見つけるか作るかのがポイント!
  50. 50. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. そして最大の効率ベネフィトは、 制作ツールを自分のゲームの 技術・デザイン・パイプラインに カスタマイズすることにあると思います。 なのでJSFLを マスターしてみれば 後悔はしないと!
  51. 51. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Andy Hall @fenomas http://aphall.com ご清聴ありがとうございました!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×