Your SlideShare is downloading. ×
ExGame さくっと入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

ExGame さくっと入門

6,242
views

Published on

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

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

Published in: Technology

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,242
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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