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

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

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

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

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

３つの前提を元に
本トークを進めていきます。

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

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

３つの前提
③ ツールのカスタマイズに時間をかけることに
価値がある。

Flash → HTML・ネイティブに関する技術達
HTML-JS
ビデオ
スプライトシート
ボーン
アニメーション
ExGame・PEX
CreateJS

頭いてえよ

ただしどんな技術を使ってアニメーションを
どんなプラットフォームに持って行っても、
基本的な仕組みが変わらない。

アニメーションワークフローの基本
何かの
作製環境
何かの
中間フォーマット
何かの
再生環境
（ランタイム）

SWF ファイル Flash Player
ブラウザ・Flashの場合
中間フォーマットランタイム

AIR アプリ AIR ランタイム
AIRアプリの場合

ビデオメディア
プレーヤ
独自再生環境の場合

PNG＋
メタデータ
ブラウザ
ライブラリ
HTML5等の場合、その１

HTML＋JS
ブラウザ
ライブラリ
HTML5等の場合、その２

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

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

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

中間フォーマットについて

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

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

中間フォーマットの基本
ボーンアニメーション
（呼び方は色々）
スプライトシート

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

HTML5ベースの技術

Toolkit for CreateJS
＋
CreateJS
Toolkit for Dart
＋
StageXL

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

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

Protip:
どちらのToolkitも、
書きだす部分はJSFLで
作ってあるので、
カスタムエキスポートを
実装するなら、参考になるでしょう。
ただし、書き出す部分が
オープンソースであるのは現状
Toolkit for Dart のみ。

SWFベースの技術

ExGame (DeNA)

ExGame (DeNA)
§  FlashLite 1.1 ベース
§  モバゲー専用（けど無料）
§  本日はスルー

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

LWF （グリー）
§  Flash 7、AS0ベース
§  SWF → LWF に変換
§  作製も再生もオープンソース
§  性能が少し制限されるが再生環境が非常に多い：
Unity、WebKit CSS 3D、Canvas、WebGL、cocos2d-html5
§  代表タイトル：絶対防衛レヴィアタン
§  デモ： http://gree.github.io/lwf-demo/html5/basic2/sample3.html
§  弱点はスクリプトかな？

Swiffy （Google）
§  SWF をHTML5として再生
（背景では、SWFを
画像・SVG・JSON等に変換する）
§  多くの選択肢と違ってAS2・AS3の多い分を対応
§  変換はFlashパネルでもクラウドででも出来る
§  とはいえ、代表になる事例は見つかりづらい

ちなみに、Unity対応２種類のSWFプレーヤー
(Autodesk) (RAD Tools)

ではでは、技術まとめだぁ！
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から
書き出す
サード
パーティー
技術
カスタム

独自フォーマット＆カスタマイズ

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

一般FWの場合
§  より一般的な例として、
スプライトシートを cocos2d-html5 で
再生してみよう。
　デモ！

カスタマイズが足りない！
§  スプライトシートを再生してたまるか？
JSFLを更に活かしてみよう。
　デモ！

Avatarの話

Avatarとは：
§  Flash Pro CCの
次アップデートのこと
§  クリエイティブクラウドメンバー限定
§  無料（Flash Pro CCがあれば）

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

Avatarの主なアップデート内容
§  HTML5カスタムパネルを作るには
§  現在Adobe Labsから提供中
http://labs.adobe.com/technologies/extensionbuilder3/
§  やり方について私ブログまで：
http://aphall.com/?p=513

Avatarの後には
§  そしてもっと長期的な話について・・・

まとめ

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

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

Andy Hall
@fenomas
http://aphall.com
ご清聴ありがとうございました！

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

More Related Content

What's hot

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

More from Andy Hall

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