pixi.js Texture(RenderTexture)クラスのnoFrameモードについて

2023/05/23に公開

最近pixi RenderTextureを使った処理を書いててどうもframeプロパティの振る舞いがおかしいということがあり、調べてみるとnoFrameモードなる機能が影響していたことが分かり、結果解決しました。

ですが、せっかく調べたので備忘録を書くことにしました。(ぶっちゃけニッチでこの機能に悩まされる人は稀そうですが…)


このnoFrameモードなるものはTexture(派生クラスのRenderTextureも同様)のインスタンス生成時、frameオプションを設定していないときにtrueになります。
https://pixijs.download/dev/docs/PIXI.Texture.html#noFrame

このモード中はTextureframeプロパティのパラメータ(具体的にはwidthheight値)が大元のbaseTextureのupdateに合わせて更新されるようになります。→ 該当コードリンク

baseTextureのリサイズ等を自動的に反映してくれて便利な反面、手動でframeの値を書き換えてもbaseTexture更新によって上書きされてしまうという問題があります。

無効化したい場合は、noFrameプロパティを直接falseにするか、frameプロパティに何か値をセットすると(setter経由で)自動的にfalseになります。

noFrameモード無効化
texture.noFrame = false;
// もしくは
texture.frame = new Rectangle(0, 0, 64, 64);
そもそもインスタンス生成時にframeを設定してもOK
const texture = new Texture(baseTexture, new Rectangle(0, 0, 64, 64))

他、細かい点として

  • cloneメソッドによる複製時もこの振る舞いはしっかり継承される
  • pixiJSでは様々な機能を介してTextureを生成することができるが、基本的にはONの状態になっていると思っていて差し支えない(意識的にOFFにする必要がある)

通常baseTextureが更新されること自体あまりなく、Spriteクラスを介してテスクチャを表示するといった一般的な使い方ではこのモードについて考慮する必要は全く無いですが、
例えばRenderTextureを使って描画済みフレームバッファを使った演出処理では問題になる可能性があるのでその辺をいじっているときは注意が必要、という感じです。

また何か気づいたら追記します。

Discussion