JavaScript
CreateJS

Create.jsのText描画パフォーマンスを改善するキャッシュ処理

Create.jsでのText描画

Create.jsでのテキストの描画は比較的重い処理です。
特にこんな場合に重くなります

テキストにアウトラインフォントを設定している場合。

createjs.Text.prototype.snapToPixel = false;

のグローバル設定をしている場合。テキスト描画にアンチエイリアスがかかりますが、その分処理が重くなります。

描画速度の検証

通常のテキストを8000個ステージに並べる。
https://codepen.io/masatomakino/full/NMdqPq

テキストに個別にビットマップキャッシュをかける。
https://codepen.io/masatomakino/full/deNoJr/

手元の環境ではFPSでおおよそ3倍の差が出ます。

テキストへのビットマップキャッシュの適用方法

const bounds = text.getBounds();
const margin = 8;
text.cache(
  bounds.x - margin,
  bounds.y - margin,
  bounds.width + margin * 2,
  bounds.height + margin * 2
);

Create.jsのTextは、getBounds関数では厳密にはサイズを取得できません。
公式ドキュメント
上記の例では8pxですが、幾らかのマージンを与えると意図した通りの描画になります。

ビットマップキャッシュの更新判定

キャッシュされたテキストは、更新のない間は非常に高速に描画されます。
しかし色の変更などで再描画が必要になったり、テキストの更新がありキャッシュの縦横サイズを変更しなくてはならない場合は大きな負荷がかかります。

二度目以降のテキスト更新が発生した場合に、以下の条件で判定を行い、変更がない場合は再描画を抑制すると負荷が軽減できます。

  • 文言が変更されている
  • フォントが変更されている
  • textAlignが変更されている

→ キャッシュのサイズが変化するので、uncacheをしてから再cache

  • 文字カラーだけが変更されている

→ キャッシュのサイズは変わらないので、updateCache

  • 文言の変化がない

→ キャッシュ処理をスキップ

よりパフォーマンスを重視するならContainerにラップしてからキャッシュ生成

Textインスタンスに個別にビットマップキャッシュを適用するよりも、そのインスタンスをContainerにaddChildして、コンテナ丸ごとをビットマップキャッシュする方がパフォーマンス的には有利です。テキストの更新頻度が低く、大量のテキストを扱う場合はぜひContainerにラップしてください。