cedec 2013 -...

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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 -...

Technology