Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20121116 k lab_html5イベント

663 views

Published on

  • Be the first to comment

  • Be the first to like this

20121116 k lab_html5イベント

  1. 1. Flashコンテンツのスマート フォン対応について 112年12月11日火曜日
  2. 2. ゲームで使ってる Flash演出の種類 • レベルアップ・ステージクリア • クエスト進行 • カードバトル • ガチャ • その他 212年12月11日火曜日
  3. 3. デバイス別 利用するFlashの種類 • フィーチャーフォン • FlashLite 1.1 • Android4未満 • FLashLite 2.0 • iPhone, Android4以上 • Flash再生不可>< 312年12月11日火曜日
  4. 4. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 412年12月11日火曜日
  5. 5. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 512年12月11日火曜日
  6. 6. ツールを使ってFlashをHTML5 に変換する • メリット • フィーチャーフォン向けに制作したFlashを そのまま使用できる • デメリット • 表現が方法が限られる • できることがツールに依存する 612年12月11日火曜日
  7. 7. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 712年12月11日火曜日
  8. 8. プラットフォームが 提供するツールを使う • モバゲー • ExGame • gree • Reel 812年12月11日火曜日
  9. 9. プラットフォームが 提供するツールを使う • メリット • 再現性が高い! • デメリット • パートナーデベロッパーしか使えない • 他のプラットフォームやプラットフォームに乗ら ない場合使えない 912年12月11日火曜日
  10. 10. 割愛します 1012年12月11日火曜日
  11. 11. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 1112年12月11日火曜日
  12. 12. フリーの変換ツールを使う • メリット • CSS/JSで自主制作するよりは低コスト • プラットフォーム問わず利用可能 • デメリット • 開発途上で再現性が低いツールが多い • いつ開発打ち切りになるかわからない 1212年12月11日火曜日
  13. 13. Flash変換ツールの種類 • flaファイル変換タイプ • Adobe Wallaby, CreateJS • swfファイル変換タイプ • Google Swiffy • Javascriptで書かれたFlashプレイヤー • mozilla Shumway 1312年12月11日火曜日
  14. 14. Flash変換ツールの選定条件 • 動的に生成するFlashに対応できること • FlashLiteに対応してること 1412年12月11日火曜日
  15. 15. フリーの変換ツールを使う • Adobe Wallaby •☓開発がストップしてそう。。 • CreateJS •☓FlashLiteに対応してない • Google Swiffy •○ 変換後のデータがJSONで扱いやすい • mozilla Shumway •○ 動的に生成したSwfをそのまま再生できる 1512年12月11日火曜日
  16. 16. Swiffyを使った 動的Flashの生成方法 1612年12月11日火曜日
  17. 17. Swiffyを使った 動的Flashの生成方法 • デメリット • 描画にSVGを使うのでAndroid4未満では表示できな い! • ⇛Android4未満だとFlashプレイヤー入ってるはずだから気にしない! 1712年12月11日火曜日
  18. 18. サンプルを使った説明 1812年12月11日火曜日
  19. 19. <!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> 1912年12月11日火曜日
  20. 20. $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;} {"value":"koudou0","type":305}, {"value":"96","type":305}, {"type":29},$swiffy_vars_str = implode(,, $swiffy_vars); {"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} 2012年12月11日火曜日
  21. 21. $swiffy_tmpl = str_replace("%%SWIFFY_VARS%%", $swiffy_vars_str, $swiffy_tmpl); $swiffy_tmpl = str_replace("%%IMG_NPC%%", $val, $swiffy_tmpl); 2112年12月11日火曜日
  22. 22. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 2212年12月11日火曜日
  23. 23. Flashと同等のコンテンツを 自主制作する • メリット • スマフォに適したUIを提供できる • デメリット • 制作できる人が少ない • 時間がかかる 2312年12月11日火曜日
  24. 24. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 2412年12月11日火曜日
  25. 25. JS/CSSを駆使して自主制作 • メリット • CSS/JSの知識を蓄えられる • デメリット • とにかくしんどい。。。 2512年12月11日火曜日
  26. 26. サンプルを使った説明 2612年12月11日火曜日
  27. 27. iPhone,Android4でFlashコンテ ンツと同等なものを提供するには • ツールを使ってFlashをHTML5に変換する • プラットフォームが提供するツールを使う • フリーのツールを使う • 同等のコンテンツをHTML5で自主制作する • JavaScript/CSSを駆使する • HTML5オーサリングツールを使う 2712年12月11日火曜日
  28. 28. HTML5オーサリングツール を使う • すいません。。使ってません。 • Adobe Edge, mozilla PopcornMaker 等 • まだまだ調査不足 • 扱える人が少ない • 最終的に出力されるHTML5を動的にいじれ るなら使いたい。 • 詳しい人教えてください。 2812年12月11日火曜日
  29. 29. まとめ • フィーチャーフォン • FlashLite 1.1 • Android4未満 • FLashLite 2.0 • iPhone, Android4以上 • FLashLite 2.0を変換 or 自主制作 2912年12月11日火曜日

×