ExGame さくっと入門

2012年3月6日火曜日

ExGame メンテナ

HTML5 front-end engineer

エンジン開発

Front-end optimization

Who am I ?

@sou


JS 製 Flash Lite 1.1 Player

（変換ツールではない、SWF ランタイム）

ActionScript も動く

Flash Lite 1.1 compliant

Yet Another SWF Runtime written in JavaScript


DeNA 内製使ってるの？


ガンダムロワイヤル始め多くのタイトルで実績


SWF 制作＆対応どうやってるの？


FP & Android 向けに作り

iOS 向けに調整 (ExGame)


透過ボタンを置いてタップ対応

文言、画像等の調整

画像はサイズ注意

「Android 向けに」


「iOS 向けに調整」


「調整」画質とフレームスキッピングの最適バランスを取る


scale を下げフレームスキッピングを緩和する

重い場合


フレームスキッピングが出ない → 余力ありそう！

scale を上げ高解像度を狙う

軽い場合


scale が鍵


scaleSWF240px

scale:2.0

scale:1.5

Canvas360px

Canvas480px


scaleSWF240px

scale:2.0

scale:1.5

Canvas360px

Canvas480px

SWF の解像度決定


displayScale


displayScale

displaySale:320/480

displayScale:320/360

Canvas360px

Canvas480px

画面320px


scale で解像度を設定し、displayScale で画面に合わせる


scale で解像度を設定し、displayScale で画面に合わせる面倒

. .


JJUtil.js

自動で scale, displayScale を計算

ロケーションバー隠し対応

（ExGame fullScreen モードの改良版）


scale 調整に必要なもうひとつのこと


scale 調整に必要なもうひとつのこと

デバイス差2012年3月6日火曜日

Pixel Density

描画性能

GPU アクセラレーション有無


高解像度デバイスには高解像度向けの設定を

必要な描画性能は GPU アクセラレーションで


scale を求める式


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

};

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

};

ExGame 表示幅 / SWF 横幅 * Ratio


理論上限値

ここから下げていく


描画負荷


苦手な描画

Flash アニメーションと JavaScript/Canvas アニメーションのミスマッチ

描画負荷


苦手になりやすい

画面全体を再描画するアニメ（例:フラッシュ）

アルファを利用した着色

頻繁に色が変わる着色

（負荷原因となりやすいが、状況次第で言い切れない）

描画負荷


（折々に実機確認をはさむと吉）


実機確認


ExGame Player

ExGame 簡易実行ツール

クエリパラメータで指定実行

例: player.html?swf=a.swf&scale=2.667&fps=8..

単純な HTML & JavaScript

ローカル＆Mobageサンドボックスで容易に実行


（デモ）


いつ確認？

単体 Flash 製作時

合成時

何を確認？

動作するか☆

描画パフォーマンス


ExGame Loader

ExGame 自動ローダ

object 要素をパースして ExGame をロード

突っ込んでおくと適宜 ExGame 化してくれる

（初期条件は「UA が iOS」）

起動遅延があるため、本番利用は非推奨


陥りがちな罠


Flash Lite 1.1 注意

AS

合成注意

問題の半分は合成時に起こる

depth 衝突

disableFrameSkip（基本はデバッグ用）

onpreload（無い方が速い）

「罠」


VISION


FP コンテンツを SP でも使えるように

当初


HTML5 のミッシングパーツを埋めるプロダクト

複雑なアニメーションをこなす（例: キャラアニメ）

優れたオーサリングツールの存在（Adobe Flash）

実は


Flash Player の Android 版提供中止

状況の変化


FP 資産活用 → HTML5 アニメを支えるエンジン


Question ?


ありがとうございました。


ExGame さくっと入門

Technology

Transcript of ExGame さくっと入門