Starling Wiki「Performance Optimization」にコンテンツを最適化するコツが紹介されています。本稿はその中から「The Painter's Algorithm」(画家のアルゴリズム)と「Texture Atlas」(テクスチャアトラス)について解説します。

01 画家のアルゴリズム
「Starlingフレームワークの最適化 − 状態の変更をできるだけ少なく」では、Starlingの描画を最適化するには、表示オブジェクト(DisplayObject)の状態をできるだけ変えないようにすることが望ましいとご説明しました。そのためには、Starlingフレームワークが、表示オブジェクトをどのような順序で処理するのか知っておく必要があります。

StarlingフレームワークもFlashと同じく、「画家のアルゴリズム」で表示リストのオブジェクトを描画します。つまり、画家が風景を描くのと同じように行います。背景など最背面のオブジェクトから描き始め、順に手前に移って、新しいものをつねに最前面に塗り重ねます(図001)。

図001■遠景から順に近景を塗り重ねていく

このような風景をStarlingフレームワークでつくるとき、表示オブジェクトは3つのSpriteインスタンスにまとめられるでしょう。まず、背景の山々です。つぎに、地表に描くものです。そして、草木を手前に置きます。すると、たとえばつぎの図002のような表示リストができ上がります。

図002■表示オブジェクトを重ね順に応じて3つのSpriteインスタンスにまとめる

Starlingフレームワークが描画するとき、重ね順でもっとも奥になる上図002左端の「山1」から手前に向かって、右端の「木2」まで順に処理します。このとき、表示オブジェクトそれぞれの状態が互いに異なると、計6回の描画の呼出しが行われます。たとえば、各オブジェクトのテクスチャがすべて違うビットマップからつくられていれば、まさにこの場合に当たります。

02 テクスチャアトラス
テクスチャの状態を揃えるためには、テクスチャアトラスを使います。表示オブジェクトのテクスチャをひとつのアトラスからロードすれば、(他のプロパティで状態が変わっていないかぎり)Starlingフレームワークはそれらのオブジェクトを一度に描画できます。

図003■表示オブジェクトのテクスチャをひとつのアトラスからロードすれば一度に描画できる

上図003で同じ色で示された表示オブジェクトが同じアトラスを用いているとするなら、6つのオブジェクトは1回で描かれるということです。したがって、基本的にテクスチャにはアトラスを使うことが望ましいといえます。

もっとも、いつもひとつのテクスチャアトラスにまとめられるとはかぎりません。たとえば、アトラスの大きさは、2048×2048ピクセル以内とされます(一部のモバイルデバイスにおけるテクスチャの最大値)。それより大きなテクスチャは、分けなければなりません。そのとき、気をつけるべきことがあります。

上図004が示すのは、表示オブジェクトのテクスチャをふたつのアトラスに分ける場合のまとめ方です。ここでも、オブジェクトの色はアトラスの違いを表します。上段の図は、表示オブジェクトの重ね順、つまり表示リストの順序に対して、アトラスが交互に違っています。すると、オフジェクトひとつ処理するごとに状態が変わるため、描画もその都度行われることになります。これを下段のようにまとめ直せば、描画は2回の処理で済むのです。

Flash Professional CS6からテクスチャアトラスの素材となるスプライトシートを書出す手順と、Starlingフレームワークでテクスチャアトラスをインスタンスのアニメーションとして用いるスクリプティングについては、Adobe Developer Connection「Starlingフレームワークのスプライトシートを使ったアニメーション」をお読みください。

作成者: 野中文雄
作成日: 2012年6月17日