1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashによるアセットワークフローの
HTML5やネイティブアプリへのうまい持ち込み方
Andy Hall・アドビ ジャパン

2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
@fenomas
§ 日本在住歴もFlash歴も十ん年
§ 物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々
§ 現在の肩書がテクニカルエバンジェリスト
§ 興味はデザインとコードをまたぐところ
§ カタコトでゴメンね
§ ゲーム好き、などなど

3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アジェンダ
1. 前提や背景の話
2. 中間フォーマットそれぞれ
3. HTMLベースの技術
4. SWFベースの技術
5. 独自フォーマットとカスタマイズ
6. Avatarでどう変わるかの話
7. まとめ

4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
今日の話：
Flashによるアセットワークフローの
HTML5やネイティブアプリへの
うまい持ち込み方
フラッシュ フラッシャー
魔法！
今日はコンテンツ作製ではなく、
この持ち込み方の技術
の話です。

5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
３つの前提を元に
本トークを進めていきます。

6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
３つの前提
① ビジュアルなアセットは、
ビジュアルアーティストがビジュアルに作るべし。
「コード エディターで
アニメーションを
作るな。」
- Abraham Lincoln ※
※ [要出典]

7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
３つの前提
② ツールに基づいて
ゲームを展開する技術を選ぶべからず。
§ 避けたいこと：
使いたいツールからHTML5アニメーションが
書き出しやすいからHTML5を使う
§ 理想はこれ：
ゲームとビジネスのニーズを考えてHTML5が最適
だからアセットワークフローをそれにあわせる

8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
３つの前提
③ ツールのカスタマイズに時間をかけることに
価値がある。

9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash → HTML・ネイティブに関する技術達
HTML-JS
ビデオ
スプライトシート
ボーン
アニメーション
ExGame・PEX
CreateJS

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.
アニメーションワークフローの基本
何かの
作製環境
何かの
中間フォーマット
何かの
再生環境
（ランタイム）

13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
SWF ファイル Flash Player
ブラウザ・Flashの場合
中間フォーマット ランタイム

14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
AIR アプリ AIR ランタイム
AIRアプリの場合
中間フォーマット ランタイム

15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
ビデオ メディア
プレーヤ
独自再生環境の場合
中間フォーマット ランタイム

16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
PNG＋
メタデータ
ブラウザ
ライブラリ
HTML5等の場合、その１
中間フォーマット ランタイム

17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメーションワークフローの基本
HTML＋JS
ブラウザ
ライブラリ
HTML5等の場合、その２
中間フォーマット ランタイム

18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ポイント！
この話をまとめると、
「Flashは⃝⃝フレームワークに
対応するのか？」
ではなくて、
「⃝⃝フレームワークが
再生できるフォーマットを
Flashで作る方法はあるのか」
です。

19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
この話をまとめると、
「Flashは⃝⃝フレームワークに
対応するのか？」
ではなくて、
「⃝⃝フレームワークが
再生できるフォーマットを
Flashで作る方法はあるのか」
です。
ポイント！
大体ある！
無くても
作れる！

20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ちなみにFlash Proのロードマップについて
§ Flash Proのこれからを一言でいうと、
より多目的、よりカスタマイズしやすく。
§ 理由：SWF制作ツールではなく、
アニメーション制作ツールですから。
§ 詳細は後ほど！

21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットについて

22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashから直接書き出すのは：
スプライトシート ボーン
アニメーション
SWF
HTML-Canvas
（PNG＋JS）
その他のフォーマットを
JSFLで書き出す
ビデオ・画像

23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
JSFLとは？
§ JSFLとはFlash自体を自動化出来るJSの仕組み
§ Flash内のVMにて実行される
§ 基本的に、Flash Pro で出来ることなら必ずJSFLで出来る
§ （JSFLでしかできないこともいくつかある）
§ ヒストリーパネルを使えば非常に慣れやすい

24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
中間フォーマットの基本
ボーンアニメーション
（呼び方は色々）
スプライトシート

25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
背景に隠れているトピック：HWA
§ ハードウェアアクセラレーション（HWA）が
大きく中間フォーマットの選択に影響する
§ なぜかというとGPUはテキスチャー（画像）
しか把握しないので。
§ つまり、スプライトシートのどこが楽しいか
というとどこも楽しくはないけど、
HWAに適しているため、ほとんどのFWが
対応するわけです。

26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
HTML5ベースの技術

27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Toolkit for CreateJS
＋
CreateJS
Toolkit for Dart
＋
StageXL

28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
§ タイムラインアニメーション等を作る
（いくつかの表示機能は未対応）
§ JavaScriptをスクリプトパネルで /* */ に入れる：
§ 専用パネルから書き出す
（パネルはFlash CCに組み込み）
§ 出来たHTML＋JSファイルが「CreateJS」という
AS3っぽいランタイムにて再生される
Toolkit for CreateJSの使い方

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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Protip:
どちらのToolkitも、
書きだす部分はJSFLで
作ってあるので、
カスタムエキスポートを
実装するなら、参考になるでしょう。
ただし、書き出す部分が
オープンソースであるのは現状
Toolkit for Dart のみ。

31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SWFベースの技術

32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ExGame (DeNA)

33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ExGame (DeNA)
§ FlashLite 1.1 ベース
§ モバゲー専用（けど無料）
§ 本日はスルー

34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PEX （DeNA)
§ 「互換性を維持しつつ、高速化や外部APIの用意など、
よりHTML5に組み込みやすく拡張したランタイム」
§ 同じくモバゲー専用

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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Swiffy （Google）
§ SWF をHTML5として再生
（背景では、SWFを
画像・SVG・JSON等に変換する）
§ 多くの選択肢と違ってAS2・AS3の多い分を対応
§ 変換はFlashパネルでもクラウドででも出来る
§ とはいえ、代表になる事例は見つかりづらい

37. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ちなみに、Unity対応２種類のSWFプレーヤー
(Autodesk) (RAD Tools)

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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
独自フォーマット＆カスタマイズ

40. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
完全独自の事例：Wizcorp
§ グリーやTake2 等と組んだりするHTML5中心の
ゲーム会社
§ 社内で作られたアニメーションエンジン向けに
カスタムエキスポーターをJSFLで実装
§ 代表タイトル：
カプコンのDead Rising、他

41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
一般FWの場合
§ より一般的な例として、
スプライトシートを cocos2d-html5 で
再生してみよう。
デモ！

42. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタマイズが足りない！
§ スプライトシートを再生してたまるか？
JSFLを更に活かしてみよう。
デモ！

43. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの話

44. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarとは：
§ Flash Pro CCの
次アップデートのこと
§ クリエイティブクラウド メンバー限定
§ 無料（Flash Pro CCがあれば）

45. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの主なアップデート内容
1. プロジェクトの新種類
§ 「HTML Canvas プロジェクト」
§ 「WebGL プロジェクト」
2. HTML5のカスタムパネルの対応
（本トークに関係しない他もある）

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. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Avatarの後には
§ そしてもっと長期的な話について・・・

48. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ

49. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flashから各FWへの道は大体あったりするが、
魔法の弾丸がなく、ベストな技術は
FWとゲームの作りによる。
ので、使うFW・PFがスムーズに
対応するフォーマットを、
Flashから効率良く制作する方法を
見つけるか作るかのがポイント！

50. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
そして最大の効率ベネフィトは、
制作ツールを自分のゲームの
技術・デザイン・パイプラインに
カスタマイズすることにあると思います。
なのでJSFLを
マスターしてみれば
後悔はしないと！

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