読者です 読者をやめる 読者になる 読者になる

Flashでの2Dイメージ描画はStarlingフレームワークで高速化できるけど注意点もある

Flashで2Dイメージを高速に大量に書きたいときは、GPUを使った2D描画を実現してくれるStarlingフレームワークを使えばいい。Flashの従来の2D描画と似たようなAPIで、Stage3Dを使ったGPUでの描画をしてくれる。

でも、Flashは従来からBitmapDataを使えばそこそこ速く2Dイメージを描画できる。わざわざStarlingフレームワークを導入する価値はあるのだろうか、と思って簡単なベンチマークアプリを作ってみた。Haxeで書いたけど、描画性能はAS3で書いた場合とそんなに変わらない、と思う。

大量の文字を上から降らせて、いろんな描画方式でFPSが確認できるようにした。マウスをクリックするたびに、以下の描画方式を切り替える。

RenderTexture.drawBundled()を使う方式

StarlingでのBitmapDataに相当するものがTextureだ。ここではその動的書き換え可能版のRenderTextureにImageをdrawすることで文字を描画した。

注意すべきは、単に毎回drawするとひどいパフォーマンスになるので、複数のdrawをまとめてGPUに送るdrawBundledメソッドを利用すること。詳しいことは以下の記事にまとまっている。

この方式の特徴は以下となる。

  • drawBundledを使っても結構低速
  • 半透明、回転、拡大縮小、色付け可能

QuadBatchを使う方法

Starlingで最速の2D描画方式がQuadBatchだ。QuadBatchインスタンスにimageを追加していって一気にGPUに送り描画する。

ただQuadBatchには制約があり、同一のテクスチャしか描画できない。なので普通に使うと同一の2Dイメージを大量に表示する用途にしか使えない。

その制約を何とかするためにはTextureAtlasを使う。複数のイメージを一つのテクスチャに描画し、各イメージのリージョンを切り出して描画する。こうすることで、QuadBatchを使って異なるイメージを描画することができる。TextureAtlasの詳細は以下にある。

この方式の特徴は以下となる。

  • かなり高速
  • 半透明、回転、拡大縮小はできるが、イメージの色を個別に動的に変化させることはできない

BitmapData.drawを使う方法

Starlingを使わない場合の比較用。

  • 低速
  • 半透明、回転、拡大縮小、色付け可能

BitmapData.copyPixelsを使う方法

BitmapDataの最速描画と言えばcopyPixels。

  • 高速
  • 半透明、回転、拡大縮小、色付け、全て無理。単にそのまま上書き描画するだけ
11/6追記

copyPixelsのmergeAlpha引数をtrueにすれば半透明は実現可能だった。

で、どれがいいかな

とりあえず手元の環境で調べた感じでは、回転、拡縮をしなくていいなら、爆速のBitmapData.copyPixelsを使っておけば、わざわざStarlingにお出ましいただくまでもない。

ただ、拡縮とかは、やっぱり使えたほうが色々と表現の幅も広がる。なのでそういった機能が使いたい時はStarlingのQuadBatch+TextureAtlasが便利だ。

まあこのへんの特性は、環境依存なところもありそうなので、一般的にどこまで言えるかは微妙かも。非力なCPUに比べてGPUがそこそこ強力な、昨今のモバイルデバイスだと、また事情が異なる可能性はあるね。