Your SlideShare is downloading. ×
0
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashによるアセットワークフローの
 HTML5やネイティブアプリへのうまい持ち込み方
A...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas
§  日本在住歴もFlash歴も十ん年
§  物理学専攻 ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アジェンダ
1.  前提や背景の話
2.  中間フォーマットそれぞれ
3.  HTMLベースの...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
今日の話:
Flashによるアセットワークフローの
HTML5やネイティブアプリへの
うまい持...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提を元に
本トークを進めていきます。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提
① ビジュアルなアセットは、
  ビジュアルアーティストがビジュアルに作るべし。
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提
② ツールに基づいて
  ゲームを展開する技術を選ぶべからず。
§  避けたいこ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提
③ ツールのカスタマイズに時間をかけることに
  価値がある。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash → HTML・ネイティブに関する技術達
HTML-JS
ビデオ
スプライトシート
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
頭いてえよ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ただしどんな技術を使ってアニメーションを
どんなプラットフォームに持って行っても、
基本的な仕...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
何かの
作製環境
何かの
中間フォーマット
何かの
再生環境...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
SWF ファイル Flash Player
ブラウザ・Fla...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
AIR アプリ AIR ランタイム
AIRアプリの場合
中間...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
ビデオ メディア
プレーヤ
独自再生環境の場合
中間フォーマ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
PNG+
メタデータ
ブラウザ
ライブラリ
HTML5等の場...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
HTML+JS
ブラウザ
ライブラリ
HTML5等の場合、そ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ポイント!
この話をまとめると、
「Flashは⃝⃝フレームワークに
対応するのか?」
ではな...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
この話をまとめると、
「Flashは⃝⃝フレームワークに
対応するのか?」
ではなくて、
「⃝...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ちなみにFlash Proのロードマップについて
§  Flash Proのこれからを一言で...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットについて
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashから直接書き出すのは:
スプライトシート ボーン
アニメーション
SWF
HTML-...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
JSFLとは?
§  JSFLとはFlash自体を自動化出来るJSの仕組み
§  Flas...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットの基本
ボーンアニメーション
(呼び方は色々)
スプライトシート
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
背景に隠れているトピック:HWA
§  ハードウェアアクセラレーション(HWA)が
大きく中...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
HTML5ベースの技術
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Toolkit for CreateJS
+
CreateJS
Toolkit for Dar...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
§  タイムラインアニメーション等を作る
(いくつかの表示機能は未対応)
§  JavaS...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
§  タイムラインアニメーション等を作る
(いくつかの表示機能は未対応)
§  JavaS...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Protip:
どちらのToolkitも、
書きだす部分はJSFLで
作ってあるので、
カスタ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SWFベースの技術
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ExGame (DeNA)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ExGame (DeNA)
§  FlashLite 1.1 ベース
§  モバゲー専用(...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PEX (DeNA)
§  「互換性を維持しつつ、高速化や外部APIの用意など、
 よりHT...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LWF (グリー)
§  Flash 7、AS0ベース
§  SWF → LWF に変換
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Swiffy (Google)
§  SWF をHTML5として再生
(背景では、SWFを
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ちなみに、Unity対応2種類のSWFプレーヤー
(Autodesk) (RAD Tools)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ではでは、技術まとめだぁ!
中間フォーマット ランタイム
SWF Flash Player
S...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
独自フォーマット&カスタマイズ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
完全独自の事例:Wizcorp
§  グリーやTake2 等と組んだりするHTML5中心の
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
一般FWの場合
§  より一般的な例として、
スプライトシートを cocos2d-html5...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタマイズが足りない!
§  スプライトシートを再生してたまるか?
JSFLを更に活かして...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの話
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarとは:
§  Flash Pro CCの
次アップデートのこと
§  クリエイ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの主なアップデート内容
1.  プロジェクトの新種類
§  「HTML Canv...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの主なアップデート内容
§  HTML5カスタムパネルを作るには
§  現在A...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの後には
§  そしてもっと長期的な話について・・・
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashから各FWへの道は大体あったりするが、
魔法の弾丸がなく、ベストな技術は
FWとゲー...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
そして最大の効率ベネフィトは、
制作ツールを自分のゲームの
技術・デザイン・パイプラインに
カ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Andy Hall
@fenomas
http://aphall.com
ご清聴ありがとうござ...
Upcoming SlideShare
Loading in...5
×

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

6,954

Published on

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

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

No Downloads
Views
Total Views
6,954
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×