Options

Pex では以下のように初期化時にオプションを指定することができます。何も指定しない場合はデフォルトの設定が適用されます。

var option = {
    disableFrameSkip: true,
    fps: 12,
    shapeDetail: {
        all: {
            method: "cache"
        }
    },
    frameCallback: {
        "mc_name": {
            7: function(){
                console.log("entered mc_name:7");
            }
        }
    }
};
var pex = new Pex("./example.swf", "container", option);

主要オプション

width (number)

描画サイズの横幅をピクセル単位で指定します。デフォルトは SWF のフレームの横幅です。

height (number)

描画サイズの縦幅をピクセル単位で指定します。デフォルトは SWF のフレームの縦幅です。

transparent (boolean)

背景を透過させるかどうか指定します。

true:背景色を描画せず透過させます。
false:背景色をそのまま描画します。(デフォルト)

fps (number)

SWF 固有の FPS ではなく指定した FPS に固定します。デフォルトは SWF 固有の FPS です。

shapeDetail (object)

各シェイプに対する描画方法を設定します。デフォルトは { all: { method: “func” } } です。該当シェイプの設定がなければ all の設定が適用されます。 複雑なシェイプを描画する場合は “cache” を指定することでパフォーマンスが向上することがあります。

指定できる項目は次のとおりです。

項目 概要
method “cache” を指定した場合にキャッシュを利用した描画を行います。デフォルトは “func” でキャッシュを利用しません。
cacheScale 元のシェイプに対して cacheScale 倍したサイズのキャッシュを生成します。

例えば、1フレーム目で 100x100, その後 300x300 に拡大描画されるシェイプである場合は cacheScale:3 を設定する事で拡大時に合わせた画質を確保できます。

次の例では 2 のシェイプに対してキャッシュ(元の画像の3倍のサイズ)を使った描画を行います。

var option = {
    shapeDetail: {
        2: {
            method: "cache",
            cacheScale: 3
        }
    }
};
var pex = new Pex("./example.swf", "container", option);

cacheScale を指定しない場合はフレームサイズの拡大率と同じ値になります。例えば、フレームサイズが 200x200 の SWF に対して width オプションと height オプションに 300 を指定すると 1.5 になります。 大体は自動設定で問題ありませんが、もし極端に画像が乱れる場合はcacheScaleに3~6あたりを設定してみてください。

シェイプの指定は下記のようにMC名で行う事もできます。

var option = {
    shapeDetail: {
        mcname: {
            method: "cache",
            cacheScale: 2
        }
    }
};

preload (boolean)

shapeDetail のオプションです。

preload が有効である場合は、そのシェイプを描画前にキャッシュとして保存します。 method:cache と組み合わせて使う必要があります。

起動速度が遅くなる代わりに初回描画がキャッシュ利用により効率化されます。 大量のオブジェクトが一括描画開始するような場合に true にすると効果的です。

true:preload 有効
false:preload 無効

partialDraw (boolean)

フレームの描画の際に、前フレームから変更のあった部分のみを再描画するかどうかを指定します。 動きの止まるフレームが多く存在する SWF や、画面外の描画も含めて描画範囲の一部分しか変化しないような SWF では true に指定するとパフォーマンスの向上や CPU 利用率の低下が期待できます。

true:変更のあった部分のみ再描画します。
false:フレーム全体を再描画します。(デフォルト)

partialDraw と transparent の両方を有効にした際、Android 標準ブラウザ(含 WebView)の問題により動作停止することがあります。 その場合はどちらかを off にして回避して頂けますようお願い致します。

enableButton (boolean)

SWF に存在するボタンを有効にするかどうかを指定します。

true:ボタンを有効にします。多くの場合は enableTouch: true と併用することになりますが、enableTouch: false であっても API 経由のキーの押下に反応します。
false:ボタンを無効にします。(デフォルト)

enableTouch (booelan)

ユーザのタッチイベントに反応するかどうかを指定します。

true:タッチイベントを有効にします。enableButton が true の場合のみ意味があります。
false:タッチイベントを無効にします。(デフォルト)

その他オプション

frameCallback (object)

ムービークリップが特定のフレームに到達した際にコールバック関数が呼ばれるように設定します。 frameCallback の各要素はムービークリップ名をキー、フレーム番号/ラベル・関数をキー・バリューとするオブジェクトを値とします。 フレームラベルとして特別に “last” を指定できます。これはそのムービークリップの最終フレームを意味します。 尚、’/’ により Root MovieClip を指定できます。

次の例では “mc_name” というムービークリップの7フレーム目で “entered mc_name:7”、”frame_label” というラベルの割り当てられたフレームで “entered mc_name:frame_label”、最終フレームで “entered mc_name:last frame” とコーンソールに表示するようにしています。

var option = {
    frameCallback: {
        "mc_name": {
            7: function(){
                console.log("entered mc_name:7");
            },
            "frame_label": function(){
                console.log("entered mc_name:frame_label");
            },
            "last": function(){
                console.log("entered mc_name:last frame");
            }
        }
    }
};
var pex = new Pex("./example.swf", "container", option);

delayEval (boolean)

遅延評価の有無を指定します。

true:バイナリの走査完了を待たず描画を開始します。(デフォルト)
false:バイナリの走査完了を待って描画を行います。起動時間が延長されますが以後の描画速度はより安定したものとなります。

fixRatio (boolean)

アスペクト比を固定するかどうかを指定します。

true:width/height のどちらかを指定すると、アスペクト比を維持するようにもう一方も連動して変動します。両方指定した場合は width が優先されます。(デフォルト)
false:width/height を別々に指定します。指定しない場合はデフォルト値が使われます。

disableFrameSkip (boolean)

Pex では本来の FPS が実現できなくなった際に描画するフレームを間引くことにより本来の FPS を維持しようとします。(フレームスキップ機能) このオプションではフレームスキップ機能の有無を指定します。

true:フレームスキップ機能を無効にします。
false:フレームスキップ機能を有効にします。(デフォルト)

注意点

間引くのは描画だけであり、内部計算やキー入力などには影響ありません

stopOnStart (boolean)

このオプションを true にすると、SWF のロードが終わっても自動的には再生しなくなります。 手動で再生を開始する場合は API の engineStart を実行します。 このオプションは API の ready などと組み合わせて、複数の SWF 同士で連携して処理をするために利用することが想定されています。

true:起動時に準備が出来ても自動再生をしないようにします。
false:起動時に準備が出来次第、swfの自動再生をします。(デフォルト)

cacheColoredImage (boolean)

着色したシェイプをキャッシュするかどうかを指定します。 同じシェイプでも色が変化する場合は着色処理が入りますが、一度色が変化するだけでそれ以降同じ色が使われる場合などは着色したシェイプをキャッシュすることでパフォーマンスの向上が期待できます。

true:着色したシェイプをキャッシュします。
false:着色したシェイプをキャッシュしません。(デフォルト)

compileAction (boolean)

ActionScript をコンパイル(実行速度最適化)するかどうかを指定します。

true:実行速度の最適化を行います(デフォルト)
false:実行速度は落ちますが、初回実行のwaitが無くなります。

frameRect (array)

SWF の一部の範囲を切り出して使用したい場合に [x, y, w, h] の形で配列を指定します。 x が水平方向の開始位置、y が縦方向の開始位置、w が切り出す幅、h が切り出す高さです。単位はピクセルです。 各値はデフォルトサイズにおける座標系で指定します。 なお、frameRect が指定されている場合、origin は無視されます。

次の例では 240x240 の SWF に対して (10, 20) から 100x200 の範囲を切り出した上でサイズを 360/240 倍するので、200x300 のキャンバスを生成します。

var option = {
    width: 360,
    frameRect: [10, 20, 110, 220]
};

origin (array)

フレームの描画の中心を移動したい場合に [x, y] の形で配列を指定します。 x が水平方向の移動量、y が縦方向の移動量です。単位はピクセルです。 width または height の指定がないと無視されます。frameRect と異なり、スケールしたサイズにおける座標系で指定します。

次の例では 240x240 の SWF に対して 360/240 倍した上で、描画の中心を水平方向に 20px、縦方向に 40px だけ移動します。

var option = {
    width: 360,
    origin: [20, 40]
};

debug (boolean)

FPS の情報などデバッグ情報を出力するかどうかを指定します。

true:デバッグ情報をコンソールログに表示します。
false:デバッグ情報を表示しません。(デフォルト)

suppressLog (object)

debug オプションを true にした際に表示される情報のうち、表示される情報を表示/非表示制御します。 特定の情報のみを確認したい場合に便利です。

指定できる項目は次のとおりです。

項目 概要
drawCache true を指定した場合、cache 関連のログを非表示にします。
fps true を指定した場合、FPS 関連のログを非表示にします。
var option = {
    debug: true,
    suppressLog: {
        "drawCache": true
    },
};

replace (array)

replaceオプションを指定することにより(または API により)MCと画像の差し替えが行えます。 合成等のエフェクト SWF を使いまわしたい時、従来 Ming で行なっていた画像との動的合成をクライアント側で行いたい時などにお使い頂けます。

配列の中にobjectを格納して置換するMCを指定します。指定できる項目は次のとおりです。

項目 概要
name ムービークリップの名前
img 置換する画像エレメント
width 置換先の幅
height 置換先の高さ
keepAspect アスペクト比の保存
xratio 基準点の x の位置
yratio 基準点の y の位置
var option = {
    replace: [
        {name: "testmc", img: some_img, width: 100, height: 100, keepAspect: true}
    ]
};

上記例ではインスタンス名に testmc を持つ MovieClip を全て、画像エレメント some_image に置き換えています。 画像は width, height の指定に従い拡大縮小されます。指定がない場合は元の画像エレメントのサイズになります。 keepAspect:true があれば縦横比を維持します(省略可能)。 基準点のデフォルトは画像の左上です。(xratio, yratio) にはそれぞれ0から1の値を指定します。左上が (0, 0)、右下が (1, 1) です。

画像は予めロードを済ませておく必要があります。 var img = new Image; img.onload .. 等を使い制御してください。 ロードの完了していない画像、画像オブジェクト以外を指定した場合等は無視され、何も起こりません。

Ming と異なり、実際に表示に用いられる MC のインスタンス名指定が必要な点にご注意ください。 (Pex では SWF 構造でなく、表示に至る処理の一連の流れの中で MC 置換を行います)

operation (object)

特定のMCに対して、描画時のオプションを指定が可能です。 lighterやdarkerの効果を高速に描画する際に利用します。

objectのキー名がMC名となり、その値が適用される効果となります。

var option = {
    operation: { "effect_1": "lighter", "effect_2": "darker"}
};

上記例では、effect_1を描画する際にlighterで描画を行い、effect_2を描画する際にdarkerで描画を行います。 効果として指定できる文字列は、HTML5のglobalCompositeOperationに準拠します。

onerror (function)

swfのパース中に問題が発生した場合に呼び出されるコールバック関数を指定できます。

関数の引数にエラーの文字列が渡ります。

var option = {
    onerror: function(msg) { console.log("error: " + msg); }
};

上記例では、エラーが起こったらエラーの内容がコンソールに出力されます。