20121116 k lab_html5イベント

Flashコンテンツのスマートフォン対応について

1

12年12月11日火曜日

ゲームで使ってるFlash演出の種類

•レベルアップ・ステージクリア

•クエスト進行

•カードバトル

•ガチャ

•その他2


デバイス別利用するFlashの種類

•フィーチャーフォン• FlashLite 1.1

• Android4未満• FLashLite 2.0

• iPhone, Android4以上• Flash再生不可＞＜

3


iPhone,Android4でFlashコンテンツと同等なものを提供するには

•ツールを使ってFlashをHTML5に変換する•プラットフォームが提供するツールを使う•フリーのツールを使う

•同等のコンテンツをHTML5で自主制作する• JavaScript/CSSを駆使する• HTML5オーサリングツールを使う

4





5


ツールを使ってFlashをHTML5に変換する

•メリット•フィーチャーフォン向けに制作したFlashをそのまま使用できる

•デメリット•表現が方法が限られる•できることがツールに依存する

6





7


プラットフォームが提供するツールを使う

•モバゲー• ExGame

• gree• Reel

8


プラットフォームが提供するツールを使う

•メリット

•再現性が高い！

•デメリット

•パートナーデベロッパーしか使えない

•他のプラットフォームやプラットフォームに乗らない場合使えない

9


割愛します

10





11


フリーの変換ツールを使う•メリット

• CSS/JSで自主制作するよりは低コスト

•プラットフォーム問わず利用可能

•デメリット

•開発途上で再現性が低いツールが多い

•いつ開発打ち切りになるかわからない12


Flash変換ツールの種類• flaファイル変換タイプ

• Adobe Wallaby, CreateJS

• swfファイル変換タイプ

• Google Swiffy

• Javascriptで書かれたFlashプレイヤー

•mozilla Shumway13


Flash変換ツールの選定条件

•動的に生成するFlashに対応できること

• FlashLiteに対応してること

14


フリーの変換ツールを使う

• Adobe Wallaby• ☓ 開発がストップしてそう。。• CreateJS• ☓ FlashLiteに対応してない• Google Swiffy•○ 変換後のデータがJSONで扱いやすい•mozilla Shumway•○ 動的に生成したSwfをそのまま再生できる

15


Swiffyを使った動的Flashの生成方法

16


Swiffyを使った動的Flashの生成方法

•デメリット

•描画にSVGを使うのでAndroid4未満では表示できない！

• ⇛Android4未満だとFlashプレイヤー入ってるはずだから気にしない！

17


サンプルを使った説明

18


<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Swiffy output</title> <script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>

<script> swiffyobject = {$swiffy_tmpl}; </script> <style>html, body {width: 100%; height: 100%}</style> </head> <body style="margin: 0; overflow: hidden"> <div id="swiffycontainer" style="width: 480px; height: 640px"> </div> <script> var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject); stage.start(); </script> </body></html>

19


$vars = array( 'koudou0' => 96, 'koudou1' => 98, 'tairyoku0' => 1340, 'tairyoku1' => 1350, 'lv0' => 33, 'lv1' => 29);

foreach($vars as $key => $val){ $var_str ='{"value":"'.$key.'","type":305},'; $var_str.='{"value":'.$val.',"type":305},'; $var_str.='{"type":29}'; $swiffy_vars[]=$var_str;}

$swiffy_vars_str = implode(',', $swiffy_vars);

{"value":"koudou0","type":305},{"value":"96","type":305},{"type":29},{"value":"koudou1","type":305},{"value":"98","type":305},{"type":29},{"value":"lv0","type":305},{"value":"33","type":305},{"type":29},{"value":"lv1","type":305},{"value":"34","type":305},{"type":29},{"value":"tairyoku0","type":305},{"value":"1340","type":305},{"type":29},{"value":"tairyoku1","type":305},{"value":"1350","type":305},{"type":29}

20


$swiffy_tmpl = str_replace("%%SWIFFY_VARS%%", $swiffy_vars_str, $swiffy_tmpl);

$swiffy_tmpl = str_replace("%%IMG_NPC%%", $val, $swiffy_tmpl);

21





22


Flashと同等のコンテンツを自主制作する

•メリット•スマフォに適したUIを提供できる

•デメリット•制作できる人が少ない•時間がかかる

23





24


JS/CSSを駆使して自主制作

•メリット• CSS/JSの知識を蓄えられる

•デメリット•とにかくしんどい。。。

25


サンプルを使った説明

26





27


HTML5オーサリングツールを使う

•すいません。。使ってません。

• Adobe Edge, mozilla PopcornMaker 等•まだまだ調査不足•扱える人が少ない•最終的に出力されるHTML5を動的にいじれるなら使いたい。•詳しい人教えてください。

28


まとめ•フィーチャーフォン• FlashLite 1.1

• Android4未満• FLashLite 2.0

• iPhone, Android4以上• FLashLite 2.0を変換 or 自主制作

29


Documents

20121116 k lab_html5イベント