Upload
andy-hall
View
2.783
Download
2
Embed Size (px)
DESCRIPTION
CEDEC 2013 セッションで紹介しましたプレゼンです。Flash アニメーション作製のスキルがあるゲーム会社は、どうやってFlashアセットを色んなフレームワークやプラットフォームに持って行けるかの話です。Flash Proの次アップデート「Avatar」を言及します。
Citation preview
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashによるアセットワークフローの HTML5やネイティブアプリへのうまい持ち込み方 Andy Hall・アドビ ジャパン
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas § 日本在住歴もFlash歴も十ん年 § 物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々 § 現在の肩書がテクニカルエバンジェリスト § 興味はデザインとコードをまたぐところ § カタコトでゴメンね § ゲーム好き、などなど
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アジェンダ
1. 前提や背景の話 2. 中間フォーマットそれぞれ 3. HTMLベースの技術 4. SWFベースの技術 5. 独自フォーマットとカスタマイズ 6. Avatarでどう変わるかの話 7. まとめ
© 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つの前提
① ビジュアルなアセットは、 ビジュアルアーティストがビジュアルに作るべし。
「コード エディターで アニメーションを
作るな。」 - Abraham Lincoln ※
※ [要出典]
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提
② ツールに基づいて ゲームを展開する技術を選ぶべからず。
§ 避けたいこと: 使いたいツールからHTML5アニメーションが 書き出しやすいからHTML5を使う
§ 理想はこれ: ゲームとビジネスのニーズを考えてHTML5が最適 だからアセットワークフローをそれにあわせる
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3つの前提
③ ツールのカスタマイズに時間をかけることに 価値がある。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash → HTML・ネイティブに関する技術達
HTML-JS
ビデオ
スプライトシート
ボーン アニメーション
ExGame・PEX
CreateJS
© 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
ブラウザ・Flashの場合
中間フォーマット ランタイム
© 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等の場合、その1
中間フォーマット ランタイム
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
HTML+JS
ブラウザ
ライブラリ
HTML5等の場合、その2
中間フォーマット ランタイム
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ポイント!
この話をまとめると、
「Flashは◯◯フレームワークに 対応するのか?」
ではなくて、
「◯◯フレームワークが 再生できるフォーマットを
Flashで作る方法はあるのか」 です。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
この話をまとめると、
「Flashは◯◯フレームワークに 対応するのか?」
ではなくて、
「◯◯フレームワークが 再生できるフォーマットを
Flashで作る方法はあるのか」 です。
ポイント!
大体ある!
無くても 作れる!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ちなみにFlash Proのロードマップについて
§ Flash Proのこれからを一言でいうと、 より多目的、よりカスタマイズしやすく。
§ 理由:SWF制作ツールではなく、 アニメーション制作ツールですから。
§ 詳細は後ほど!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットについて
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashから直接書き出すのは:
スプライトシート ボーン アニメーション
SWF
HTML-Canvas (PNG+JS)
その他のフォーマットを JSFLで書き出す
ビデオ・画像
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
JSFLとは?
§ JSFLとはFlash自体を自動化出来るJSの仕組み § Flash内のVMにて実行される § 基本的に、Flash Pro で出来ることなら必ずJSFLで出来る
§ (JSFLでしかできないこともいくつかある)
§ ヒストリーパネルを使えば非常に慣れやすい
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットの基本
ボーンアニメーション (呼び方は色々)
スプライトシート
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
背景に隠れているトピック:HWA
§ ハードウェアアクセラレーション(HWA)が 大きく中間フォーマットの選択に影響する
§ なぜかというとGPUはテキスチャー(画像) しか把握しないので。
§ つまり、スプライトシートのどこが楽しいか というとどこも楽しくはないけど、 HWAに適しているため、ほとんどのFWが 対応するわけです。
© 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 Dart +
StageXL
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
§ タイムラインアニメーション等を作る (いくつかの表示機能は未対応)
§ JavaScriptをスクリプトパネルで /* */ に入れる:
§ 専用パネルから書き出す (パネルはFlash CCに組み込み)
§ 出来たHTML+JSファイルが「CreateJS」という AS3っぽいランタイムにて再生される
Toolkit for CreateJSの使い方
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
§ タイムラインアニメーション等を作る (いくつかの表示機能は未対応)
§ JavaScriptをスクリプトパネルで /* */ に入れる:
§ 専用パネルから書き出す (パネルはFlash CCに組み込み)
§ 出来たHTML+JSファイルが「CreateJS」という AS3っぽいランタイムにて再生される
Toolkit for CreateJSの使い方 Dart
Dart
githubから StageXL
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Protip:
どちらのToolkitも、 書きだす部分はJSFLで
作ってあるので、 カスタムエキスポートを
実装するなら、参考になるでしょう。
ただし、書き出す部分が オープンソースであるのは現状
Toolkit for Dart のみ。
© 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の用意など、 よりHTML5に組み込みやすく拡張したランタイム」
§ 同じくモバゲー専用
© 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
§ 弱点はスクリプトかな?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Swiffy (Google)
§ SWF をHTML5として再生 (背景では、SWFを 画像・SVG・JSON等に変換する)
§ 多くの選択肢と違ってAS2・AS3の多い分を対応
§ 変換はFlashパネルでもクラウドででも出来る
§ とはいえ、代表になる事例は見つかりづらい
© 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 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から 書き出す
サード パーティー
技術
カスタム
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
独自フォーマット&カスタマイズ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
完全独自の事例:Wizcorp
§ グリーやTake2 等と組んだりするHTML5中心の ゲーム会社
§ 社内で作られたアニメーションエンジン向けに カスタムエキスポーターをJSFLで実装
§ 代表タイトル: カプコンのDead Rising、他
© 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の 次アップデートのこと
§ クリエイティブクラウド メンバー限定
§ 無料(Flash Pro CCがあれば)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの主なアップデート内容
1. プロジェクトの新種類 § 「HTML Canvas プロジェクト」 § 「WebGL プロジェクト」
2. HTML5のカスタムパネルの対応
(本トークに関係しない他もある)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの主なアップデート内容
§ HTML5カスタムパネルを作るには
§ 現在Adobe Labsから提供中 http://labs.adobe.com/technologies/extensionbuilder3/
§ やり方について私ブログまで: http://aphall.com/?p=513
© 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とゲームの作りによる。
ので、使うFW・PFがスムーズに 対応するフォーマットを、
Flashから効率良く制作する方法を 見つけるか作るかのがポイント!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
そして最大の効率ベネフィトは、 制作ツールを自分のゲームの
技術・デザイン・パイプラインに カスタマイズすることにあると思います。
なのでJSFLを マスターしてみれば 後悔はしないと!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Andy Hall @fenomas
http://aphall.com
ご清聴ありがとうございました!