- Starling Framework (http://gamua.com/starling/)
Flashで2Dイメージを高速に大量に書きたいときは、GPUを使った2D描画を実現してくれるStarlingフレームワークを使えばいい。Flashの従来の2D描画と似たようなAPIで、Stage3Dを使ったGPUでの描画をしてくれる。
でも、Flashは従来からBitmapDataを使えばそこそこ速く2Dイメージを描画できる。わざわざStarlingフレームワークを導入する価値はあるのだろうか、と思って簡単なベンチマークアプリを作ってみた。Haxeで書いたけど、描画性能はAS3で書いた場合とそんなに変わらない、と思う。
- numberfallbench (http://abagames.sakura.ne.jp/flash/numberfallbench/)
大量の文字を上から降らせて、いろんな描画方式でFPSが確認できるようにした。マウスをクリックするたびに、以下の描画方式を切り替える。
RenderTexture.drawBundled()を使う方式
StarlingでのBitmapDataに相当するものがTextureだ。ここではその動的書き換え可能版のRenderTextureにImageをdrawすることで文字を描画した。
注意すべきは、単に毎回drawするとひどいパフォーマンスになるので、複数のdrawをまとめてGPUに送るdrawBundledメソッドを利用すること。詳しいことは以下の記事にまとまっている。
- Starling でビットマップを表示する方法 (http://cuaoar.jp/2011/12/starling-flash-1.html)
この方式の特徴は以下となる。
- drawBundledを使っても結構低速
- 半透明、回転、拡大縮小、色付け可能
QuadBatchを使う方法
Starlingで最速の2D描画方式がQuadBatchだ。QuadBatchインスタンスにimageを追加していって一気にGPUに送り描画する。
- The QuadBatch class (http://wiki.starling-framework.org/manual/performance_optimization#the_quadbatch_class)
ただQuadBatchには制約があり、同一のテクスチャしか描画できない。なので普通に使うと同一の2Dイメージを大量に表示する用途にしか使えない。
その制約を何とかするためにはTextureAtlasを使う。複数のイメージを一つのテクスチャに描画し、各イメージのリージョンを切り出して描画する。こうすることで、QuadBatchを使って異なるイメージを描画することができる。TextureAtlasの詳細は以下にある。
- MovieClip クラスを利用した Starling のアニメーション (http://cuaoar.jp/2011/12/movieclip-starling.html)
この方式の特徴は以下となる。
- かなり高速
- 半透明、回転、拡大縮小はできるが、イメージの色を個別に動的に変化させることはできない
BitmapData.drawを使う方法
Starlingを使わない場合の比較用。
- 低速
- 半透明、回転、拡大縮小、色付け可能
BitmapData.copyPixelsを使う方法
BitmapDataの最速描画と言えばcopyPixels。
- 高速
半透明、回転、拡大縮小、色付け、全て無理。単にそのまま上書き描画するだけ
11/6追記
copyPixelsのmergeAlpha引数をtrueにすれば半透明は実現可能だった。
で、どれがいいかな
とりあえず手元の環境で調べた感じでは、回転、拡縮をしなくていいなら、爆速のBitmapData.copyPixelsを使っておけば、わざわざStarlingにお出ましいただくまでもない。
ただ、拡縮とかは、やっぱり使えたほうが色々と表現の幅も広がる。なのでそういった機能が使いたい時はStarlingのQuadBatch＋TextureAtlasが便利だ。
まあこのへんの特性は、環境依存なところもありそうなので、一般的にどこまで言えるかは微妙かも。非力なCPUに比べてGPUがそこそこ強力な、昨今のモバイルデバイスだと、また事情が異なる可能性はあるね。
