メインコンテンツにスキップ
バージョン: v8.x

テクスチャ

私たちは、高レベルから低レベルへと徐々に進んでいます。シーングラフについて、そして一般的にその中にある表示オブジェクトについて説明しました。これからスプライトや他の単純な表示オブジェクトについて説明します。しかし、その前に、テクスチャについて話す必要があります。

PixiJSでは、テクスチャは表示オブジェクトによって使用されるコアリソースの1つです。大まかに言って、テクスチャは画面上の領域を塗りつぶすために使用されるピクセルのソースを表します。最も簡単な例はスプライトです。これは、単一のテクスチャで完全に塗りつぶされた長方形です。しかし、事態はさらに複雑になる可能性があります。

テクスチャのライフサイクル​

画像データが画面に表示されるまでの道のりをたどることで、テクスチャが実際にどのように機能するかを調べてみましょう。

ここでたどる流れは、ソース画像 > ローダー > BaseTexture > Texture です。

画像の提供​

まず、表示したい画像があります。最初のステップは、サーバー上でその画像を利用できるようにすることです。これは当然のことのように思えるかもしれませんが、他のゲーム開発システムからPixiJSに移ってきた場合は、すべてがネットワーク経由でロードされる必要があることを覚えておく価値があります。ローカルで開発している場合は、テストのために必ずWebサーバーを使用する必要があることに注意してください。そうしないと、ブラウザがローカルファイルのセキュリティをどのように扱うかによって画像がロードされません。

画像の読み込み​

画像を使用するには、最初にWebサーバーからユーザーのWebブラウザに画像ファイルをプルする必要があります。これを行うには、Assets.load('myTexture.png')を使用できます。Assetsは、ブラウザに画像のフェッチ、変換、完了時の通知を指示する処理をラップし、処理します。このプロセスは非同期です。ロードを要求すると、時間が経過し、ロードが完了したことを通知するプロミスが完了します。ローダーについては、後のガイドでさらに詳しく説明します。

const texture = await Assets.load('myTexture.png');

// pass a texture explicitly
const sprite = new Sprite(texture);
// as options
const sprite2 = new Sprite({texture});
// from the cache as the texture is loaded
const sprite3 = Sprite.from('myTexture.png')

TextureSourceはデータを所有する​

テクスチャがロードされると、ロードされた<IMG>要素には必要なピクセルデータが含まれます。しかし、それを使って何かをレンダリングするには、PixiJSはその生の画像ファイルをGPUにアップロードする必要があります。これにより、テクスチャシステムの実際の主力であるTextureSourceクラスになります。各TextureSourceは、単一のピクセルソース（通常は画像ですが、キャンバス要素やビデオ要素の場合もあります）を管理します。TextureSourceを使用すると、PixiJSは画像をピクセルに変換し、そのピクセルをレンダリングに使用できます。さらに、ラップモード（0.0〜1.0の範囲外のUV座標の場合）やスケールモード（テクスチャをスケーリングするときに使用）など、テクスチャデータのレンダリング方法を制御する設定も含まれています。

TextureSourceは自動的にキャッシュされるため、同じURLに対してTexture.from()を繰り返し呼び出すと、毎回同じTextureSourceが返されます。TextureSourceを破棄すると、それに関連付けられた画像データが解放されます。

テクスチャはBaseTextureのビューである​

そしてついに、Textureクラス自体にたどり着きました。この時点で、Textureオブジェクトが何をするのか疑問に思うかもしれません。結局のところ、BaseTextureはピクセルとレンダリング設定を管理します。答えは、あまり何もしていないということです。テクスチャは、基になるBaseTextureの軽量なビューです。それらの主な属性は、TextureSource内でプルするソースの長方形です。

PixiJSが描画するのがスプライトだけである場合、それは非常に冗長になるでしょう。しかし、スプライトシートを考えてみてください。スプライトシートは、複数のスプライト画像が配置された単一の画像です。スプライトシートオブジェクトでは、単一のTextureSourceが、元のスプライトシート内の各ソース画像に対して1つずつ、テクスチャのセットによって参照されます。単一のTextureSourceを共有することにより、ブラウザは1つのファイルのみをダウンロードし、すべてのスプライトが同じ基になるピクセルデータを共有しているため、バッチレンダラーはスプライトの描画を高速化できます。スプライトシートのテクスチャは、各スプライトに必要なピクセルの長方形だけを引き出します。

これが、テクスチャとTextureSourceの両方がある理由です。スプライトシート、アニメーション、ボタンの状態などを単一の画像としてロードできるようにしながら、マスターイメージの必要な部分のみを表示できるようにするためです。

テクスチャのロード​

リソースのロードについては後のガイドで説明しますが、PixiJSプロジェクトを構築する際に新しいユーザーが直面する最も一般的な問題の1つは、テクスチャをロードする最適な方法です。

ここに、1つの優れたソリューションの簡単なチートシートを示します。

  1. 読み込み中の画像を表示する
  2. Assetsを使用して、すべてのテクスチャがロードされるようにする
  3. 必要に応じて、進行状況のコールバックに基づいて読み込み中の画像を更新する
  4. ローダーの完了時に、すべてのオブジェクトを実行し、Texture.from()を使用して、ロードされたテクスチャをテクスチャキャッシュから取り出す
  5. テクスチャを準備する（オプション - 下記参照）
  6. 読み込み中の画像を非表示にし、シーングラフのレンダリングを開始する

このワークフローを使用すると、テクスチャが事前にロードされるため、ポップインを防ぎ、比較的簡単にコーディングできます。

テクスチャの準備について：テクスチャをロードした後でも、画像をGPUにプッシュしてデコードする必要があります。多数のソース画像に対してこれを行うと、時間がかかり、プロジェクトの最初のロード時にラグスパイクが発生する可能性があります。これを解決するには、Prepareプラグインを使用できます。これにより、プロジェクトを表示する前の最後のステップでテクスチャをプリロードできます。

テクスチャのアンロード​

テクスチャが不要になったら、使用しているメモリ（WebGL管理バッファとブラウザベースの両方）を解放したい場合があります。そのためには、データを所有するBaseTextureでdestroy()を呼び出す必要があります。テクスチャはピクセルデータを管理しないことを忘れないでください！

これは、大きくて一度しか使用されないカットシーンのような、寿命の短い画像にとって特に良い考えです。Assetsを介してロードされたテクスチャが破棄された場合、アセットクラスはキャッシュから自動的に削除します。

画像以外​

上記で示唆したように、画像だけでなく、さまざまなものからテクスチャを作成できます。

ビデオ：HTML5 <VIDEO>要素をTextureSource.from()に渡して、プロジェクトでビデオを表示できるようにします。テクスチャなので、色合いを変えたり、フィルターを追加したり、カスタムジオメトリに適用したりすることもできます。

キャンバス：同様に、HTML5 <CANVAS>要素をBaseTextureでラップして、キャンバスの描画メソッドを使用してテクスチャを動的に作成できるようにします。

SVG：<SVG>要素を渡すか、.svg URLをロードすると、PixiJSはそれをラスタライズしようとします。ネットワークが高度に制約されているプロジェクトの場合、これにより、ネットワークのロード時間を最小限に抑えながら美しいグラフィックスを実現できます。

RenderTexture：より高度な（ただし非常に強力な！）機能は、RenderTextureからテクスチャを構築することです。これにより、Geometryオブジェクトを使用して複雑なジオメトリを構築し、そのジオメトリを単純なテクスチャに焼き付けることができます。

これらのテクスチャソースにはそれぞれ、このガイドでは説明できない注意事項とニュアンスがありますが、PixiJSのテクスチャシステムの強力さを感じていただけるはずです。

レンダーテクスチャのサンプルコードをご覧ください。