Pex Textbook 1.1.0 documentation

画質、描画速度を最適化する

«  SWF と JavaScript の連携   ::   Contents   ::   SWF の初期化を行う  »

画質、描画速度を最適化する

本項ではアニメーションの見栄えや描画パフォーマンスを調整する方法を案内します。

基本の設定

Pex では最適なパフォーマンスを得るために MovieClip 単位で描画モードが指定できるようになっています。 細かなチューニングを省いてざっくりと使う場合は次のオプションを設定してください。

<script type="text/javascript">
var option = {
// 描画モード設定
"partialDraw":true, "shapeDetail": { "all": { "method":"cache" }}
};
new Pex('test.swf', 'container', option);
</script>

また描画速度のチューニングを行う場合も、この設定をベースに行うのが良いでしょう。

描画モードの設定

Pex では複数の描画モードを用意しており、MovieClip ごとに指定が可能です。 現在は func, cache 二つの描画モードが存在し、下記のように shapeDetail で指定を行います。

// 描画モードに cache を指定
"shapeDetail": { "all": { "method":"cache" }}

shapeDetail オプションは MovieClip の描画調整を行う為のもので、MovieClip 単位での指定が可能です。 「all」 は特別な意味を持ち、all が指定されると全ての MovieClip の挙動を書き換えます。 例えば MovieClip hoge に対して func を指定し、それ以外は cache で描画したい場合は

"shapeDetail": {
  "all": { "method":"cache" },
  // MovieClip のインスタンス名を指定
  "hoge": { "method":"func" }
}

このような指定になります。

method:func

method:func は都度描画を行い、パスのストロークを忠実に再現します。 安定した描画品質を見込めますが後述の method:cache に対して CPU, GPU への負荷は高めとなりがちで、描画負荷も高まる傾向があります。

method:cache

method:cache は method:func の短所を補うべく開発されたモードです。 一度描画した MovieClip の描画結果をキャッシュして再利用します。 (ActionScript3 の cacheAsBitmap 切替に近いイメージです)

多くの SWF に於いてより高速な描画速度が期待出来ますが、 拡大操作が伴う場合にシェイプの再描画を省くため拡大による画像ボケが発生することがあり、 またそれを避けるために拡大操作を見込んだ Flash 側での準備か、Pex でのオプション設定が必要になる等、短所も伴います。

メモリ消費量も、キャッシュを用いるため、method:func に比べ消費量が上回りがちになります。

どちらを使うべきか

最適な設定は SWF の作りやデバイス性能によって異なり、 理想を言えば MovieClip 単位での調整を行うことで最適なパフォーマンスが得られます。

現時点ではパフォーマンス面を重視して method:cache を用いる場面が多くなるでしょう。 迷った場合はひとまず、こちらを利用することをお勧めします。

モードの切り替えはオプションの shapeDetail 設定で行えます。

ムービークリップ名をキーにして、method がビットマップキャッシュを用いる(cache)か関数レンダラを用いる(func)かそれぞれに設定します。

指定方法

もう一度指定方法を確認しておきましょう。

//以下はPexのオプション引数内の一部
{
        "shapeDetail": {
                "MovieClipインスタンス名1": {
                        "method": "cache" // 描画モード選択
                },
                "MovieClipインスタンス名2": {
                        "method": "func" // 描画モード選択
                }
        }
}

※ ムービークリップの指定はパスではなく インスタンス名 で行います。

“all” は特別なキーワードでデフォルトの挙動を書き換えます。尚、現在の初期値は func です。

//初期設定に同じ
{
        "shapeDetail": {
                "all": {
                        "method": "func"
                }
        }
}

cacheScale

method:cache 指定時に、同時に cacheScale オプションの指定が可能です。

method:cache 設定では、何も設定をしなければデフォルトのサイズ(※)でキャッシュが生成されます。 一度生成されたキャッシュは使い回される為、その後 拡大アニメーションを行うと画像ボケが発生します。 このようにあらかじめ拡大に最適化した大きなキャッシュを作成したい、または逆にメモリ量節減の為 キャッシュを小さくしたい、といった用途で キャッシュ生成時の倍率設定が行えます。

下記のように全体に統一の cacheScale 設定を行い、個別の MovieClip に別の cacheScale 設定を上書きする事もできます。

"shapeDetail": {
        "all": {
                "method":"cache",
                "cacheScale":1.0
        },
        "hoge": {
                "method":"cache",
                "cacheScale":2.0
        },
}

※ デフォルトのキャッシュスケールの決定ロジックは Pex 1.0.7 から変更されました。

  • Ver. 1.0.7 より前 : 最初にタイムラインに登場した大きさ
  • Ver. 1.0.7 から : SWF の元サイズに対するキャンバスのサイズの倍率

サンプル例

実際に cacheScale を利用したサンプルを示します。拡大縮小時の変化に注目してください。

また、実際に method:cache と method:func の変更を行う、cacheScale の値を変更する、といった操作もお試しください。

_images/cacheScale.png

動作サンプル: cacheScale.html

flaファイル: cacheScale.fla

partialDraw

もうひとつの重要なオプションが partialDraw です。

partialDraw が有効である場合、Canvas の描画更新処理を Canvas 全体ではなく、必要な範囲に絞って行うようになります。

Canvas に対する操作負荷が大きく軽減されるため、 描画パフォーマンスの向上とともにバッテリの消費がこれにより軽減されます。 こちらのオプションも積極的に使われることをお勧め致します。

"partialDraw": true

デフォルトでは false(無効) となっています。

partialDraw のデメリットとして Android Browser(標準ブラウザ)での描画が不安定になる場合があります。

描画の一部が正常に更新されない、ブラックアウトするといった不安定な挙動が発生する場合は partialDraw をオフにしてみてください。 また Android Browser のバグにより、transparent:true オプションと partialDraw を併用すると一部の SWF では動作停止が発生することがあります。 この場合も partialDraw を無効にしてください。

詳しくは FAQ をご覧ください。

partialDrawで再生Skipさせないフレームを設定する

端末のパフォーマンスを考慮すると、上記 partialDraw 設定はほぼ毎回使う事になるかと思います。 ここで問題になるのが、描画スキップされるフレームはコントロールできないと言う事です。 場合によっては、演出として肝心なフレームがスキップされてしまい、 意味がよくわからないアニメーションとなってしまう事があります。

Pex 1.0.7 からは 描画skipされないフレームを指定する事ができるようになりました。 やり方は簡単で、スキップされたくないフレームに”_noSkip”というラベル名をつけておくだけです。(大文字小文字は区別しません)

これにより、より細かな表現が行えるようになるかと思います。

補足

partialDraw のように必要時に自動で描画がまびかれる形式では無く、 一定の割合で再生フレームを間引く方法もあります。 自分でフレーム更新の頻度を(端末の性能によって)コントロールしたい場合などに使うと良いでしょう。 (例えば Andoroid 2.x 系ではあらかじめ半分の描画頻度にしておく、など)

詳しくは API ドキュメントの getFrameSkipRatio 、 setFrameSkipRatio を参照してください。

«  SWF と JavaScript の連携   ::   Contents   ::   SWF の初期化を行う  »