2012年3月6日火曜日
Who am I ?       ExGame メンテナ       HTML5 front-end engineer                                   @sou          エンジン開発        ...
2012年3月6日火曜日
Yet Another SWF Runtime    written in JavaScript       JS 製 Flash Lite 1.1 Player          (変換ツールではない、SWF ランタイム)       Act...
DeNA 内製    使ってるの?2012年3月6日火曜日
ガンダムロワイヤル始め    多くのタイトルで実績2012年3月6日火曜日
SWF 制作&対応    どうやってるの?2012年3月6日火曜日
FP & Android 向けに作り        iOS 向けに調整 (ExGame)2012年3月6日火曜日
「Android 向けに」       透過ボタンを置いてタップ対応       文言、画像等の調整               画像はサイズ注意2012年3月6日火曜日
「iOS 向けに調整」2012年3月6日火曜日
「調整」画質とフレームスキッピングの最適バランスを取る2012年3月6日火曜日
重い場合       scale を下げフレームスキッピングを緩和する2012年3月6日火曜日
軽い場合       フレームスキッピングが出ない → 余力ありそう!       scale を上げ高解像度を狙う2012年3月6日火曜日
scale      が2012年3月6日火曜日
scale               SWF            scale:2.0               240px                       scale:1.5                          ...
scale                             SWF の解像度決定               SWF            scale:2.0               240px                   ...
displayScale2012年3月6日火曜日
displayScale               画面               320px           displaySale:320/480        displayScale:320/360        Canvas ...
scale で解像度を設定し、displayScale で画面に合わせる2012年3月6日火曜日
scale で解像度を設定し、. .          面   倒displayScale で画面に合わせる2012年3月6日火曜日
JJUtil.js       自動で scale, displayScale を計算       ロケーションバー隠し対応       (ExGame fullScreen モードの改良版)2012年3月6日火曜日
scale 調整に必要な    もうひとつのこと2012年3月6日火曜日
scale 調整に必要な    もうひとつのこと               デバイス差2012年3月6日火曜日
Pixel Density               描画性能                 GPU アクセラレーション有無2012年3月6日火曜日
Pixel Density               描画性能                 GPU アクセラレーション有無2012年3月6日火曜日
Pixel Density               描画性能                 GPU アクセラレーション有無2012年3月6日火曜日
高解像度デバイスには高解像度向けの設定を       必要な描画性能は GPU アクセラレーションで2012年3月6日火曜日
scale を求める式2012年3月6日火曜日
scale を求める式          ExGame 表示幅 / SWF 横幅 * Ratio    var ratio = window.navigator.userAgent.indexOf(OS 4_) > 0 ?         1....
scale を求める式          ExGame 表示幅 / SWF 横幅 * Ratio    var ratio = window.navigator.userAgent.indexOf(OS 4_) > 0 ?         1....
描画負荷2012年3月6日火曜日
描画負荷       苦手な描画               Flash アニメーションと JavaScript/Canvas アニ               メーションのミスマッチ2012年3月6日火曜日
描画負荷       苦手になりやすい               画面全体を再描画するアニメ(例:フラッシュ)               アルファを利用した着色               頻繁に色が変わる着色               ...
(折々に実機確認をはさむと吉)2012年3月6日火曜日
実機確認2012年3月6日火曜日
ExGame Player       ExGame 簡易実行ツール          クエリパラメータで指定実行               例: player.html?swf=a.swf&scale=2.667&fps=8..      ...
(デモ)2012年3月6日火曜日
いつ確認?               単体 Flash 製作時               合成時       何を確認?               動作するか☆               描画パフォーマンス2012年3月6日火曜日
ExGame Loader       ExGame 自動ローダ          object 要素をパースして ExGame をロード          突っ込んでおくと適宜 ExGame 化してくれる               (初期条...
陥りがちな罠2012年3月6日火曜日
「罠」       Flash Lite 1.1 注意          AS       合成注意          問題の半分は合成時に起こる          depth 衝突       disableFrameSkip(基本はデバッグ...
VISION2012年3月6日火曜日
当初       FP コンテンツを SP でも使えるように2012年3月6日火曜日
実は   HTML5 のミッシングパーツを埋めるプロダクト      複雑なアニメーションをこなす(例: キャラアニメ)      優れたオーサリングツールの存在(Adobe Flash)2012年3月6日火曜日
状況の変化       Flash Player の Android 版提供中止2012年3月6日火曜日
FP 資産活用 → HTML5 ア    ニメを支えるエンジン2012年3月6日火曜日
Question ?2012年3月6日火曜日
ありがとうございました。2012年3月6日火曜日
Upcoming SlideShare
Loading in …5
×

ExGame さくっと入門

6,767 views

Published on

JavaScript 製 Flash Player である ExGame の使い方、開発運用方法をさくっと説明しています。

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,767
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
26
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

ExGame さくっと入門

  1. 1. 2012年3月6日火曜日
  2. 2. Who am I ? ExGame メンテナ HTML5 front-end engineer @sou エンジン開発 Front-end optimization2012年3月6日火曜日
  3. 3. 2012年3月6日火曜日
  4. 4. Yet Another SWF Runtime written in JavaScript JS 製 Flash Lite 1.1 Player (変換ツールではない、SWF ランタイム) ActionScript も動く Flash Lite 1.1 compliant2012年3月6日火曜日
  5. 5. DeNA 内製 使ってるの?2012年3月6日火曜日
  6. 6. ガンダムロワイヤル始め 多くのタイトルで実績2012年3月6日火曜日
  7. 7. SWF 制作&対応 どうやってるの?2012年3月6日火曜日
  8. 8. FP & Android 向けに作り iOS 向けに調整 (ExGame)2012年3月6日火曜日
  9. 9. 「Android 向けに」 透過ボタンを置いてタップ対応 文言、画像等の調整 画像はサイズ注意2012年3月6日火曜日
  10. 10. 「iOS 向けに調整」2012年3月6日火曜日
  11. 11. 「調整」画質とフレームスキッピングの最適バランスを取る2012年3月6日火曜日
  12. 12. 重い場合 scale を下げフレームスキッピングを緩和する2012年3月6日火曜日
  13. 13. 軽い場合 フレームスキッピングが出ない → 余力ありそう! scale を上げ高解像度を狙う2012年3月6日火曜日
  14. 14. scale が2012年3月6日火曜日
  15. 15. scale SWF scale:2.0 240px scale:1.5 Canvas 480px Canvas 360px2012年3月6日火曜日
  16. 16. scale SWF の解像度決定 SWF scale:2.0 240px scale:1.5 Canvas 480px Canvas 360px2012年3月6日火曜日
  17. 17. displayScale2012年3月6日火曜日
  18. 18. displayScale 画面 320px displaySale:320/480 displayScale:320/360 Canvas 480px Canvas 360px2012年3月6日火曜日
  19. 19. scale で解像度を設定し、displayScale で画面に合わせる2012年3月6日火曜日
  20. 20. scale で解像度を設定し、. . 面 倒displayScale で画面に合わせる2012年3月6日火曜日
  21. 21. JJUtil.js 自動で scale, displayScale を計算 ロケーションバー隠し対応 (ExGame fullScreen モードの改良版)2012年3月6日火曜日
  22. 22. scale 調整に必要な もうひとつのこと2012年3月6日火曜日
  23. 23. scale 調整に必要な もうひとつのこと デバイス差2012年3月6日火曜日
  24. 24. Pixel Density 描画性能 GPU アクセラレーション有無2012年3月6日火曜日
  25. 25. Pixel Density 描画性能 GPU アクセラレーション有無2012年3月6日火曜日
  26. 26. Pixel Density 描画性能 GPU アクセラレーション有無2012年3月6日火曜日
  27. 27. 高解像度デバイスには高解像度向けの設定を 必要な描画性能は GPU アクセラレーションで2012年3月6日火曜日
  28. 28. scale を求める式2012年3月6日火曜日
  29. 29. scale を求める式 ExGame 表示幅 / SWF 横幅 * Ratio var ratio = window.navigator.userAgent.indexOf(OS 4_) > 0 ? 1.0 : window.devicePixelRatio; var scale = 320/240 * ratio; var config = { scale: scale, displayScale: 1/scale };2012年3月6日火曜日
  30. 30. scale を求める式 ExGame 表示幅 / SWF 横幅 * Ratio var ratio = window.navigator.userAgent.indexOf(OS 4_) > 0 ? 1.0 : window.devicePixelRatio; var scale = 320/240 * ratio; 理論上限値 var config = { scale: scale, ここから下げていく displayScale: 1/scale };2012年3月6日火曜日
  31. 31. 描画負荷2012年3月6日火曜日
  32. 32. 描画負荷 苦手な描画 Flash アニメーションと JavaScript/Canvas アニ メーションのミスマッチ2012年3月6日火曜日
  33. 33. 描画負荷 苦手になりやすい 画面全体を再描画するアニメ(例:フラッシュ) アルファを利用した着色 頻繁に色が変わる着色 (負荷原因となりやすいが、状況次第で言い切 れない)2012年3月6日火曜日
  34. 34. (折々に実機確認をはさむと吉)2012年3月6日火曜日
  35. 35. 実機確認2012年3月6日火曜日
  36. 36. ExGame Player ExGame 簡易実行ツール クエリパラメータで指定実行 例: player.html?swf=a.swf&scale=2.667&fps=8.. 単純な HTML & JavaScript ローカル&Mobageサンドボックスで容易に実行2012年3月6日火曜日
  37. 37. (デモ)2012年3月6日火曜日
  38. 38. いつ確認? 単体 Flash 製作時 合成時 何を確認? 動作するか☆ 描画パフォーマンス2012年3月6日火曜日
  39. 39. ExGame Loader ExGame 自動ローダ object 要素をパースして ExGame をロード 突っ込んでおくと適宜 ExGame 化してくれる (初期条件は「UA が iOS」) 起動遅延があるため、本番利用は非推奨2012年3月6日火曜日
  40. 40. 陥りがちな罠2012年3月6日火曜日
  41. 41. 「罠」 Flash Lite 1.1 注意 AS 合成注意 問題の半分は合成時に起こる depth 衝突 disableFrameSkip(基本はデバッグ用) onpreload(無い方が速い)2012年3月6日火曜日
  42. 42. VISION2012年3月6日火曜日
  43. 43. 当初 FP コンテンツを SP でも使えるように2012年3月6日火曜日
  44. 44. 実は HTML5 のミッシングパーツを埋めるプロダクト 複雑なアニメーションをこなす(例: キャラアニメ) 優れたオーサリングツールの存在(Adobe Flash)2012年3月6日火曜日
  45. 45. 状況の変化 Flash Player の Android 版提供中止2012年3月6日火曜日
  46. 46. FP 資産活用 → HTML5 ア ニメを支えるエンジン2012年3月6日火曜日
  47. 47. Question ?2012年3月6日火曜日
  48. 48. ありがとうございました。2012年3月6日火曜日

×