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

スプライト

スプライトは、PixiJSで最もシンプルで一般的なレンダリング可能なオブジェクトです。画面に表示される単一の画像を表します。各Spriteには、描画されるテクスチャと、シーングラフで機能するために必要なすべての変換および表示状態が含まれています。

スプライトの作成​

スプライトを作成するには、テクスチャ（テクスチャガイドを参照）が必要です。Assetsクラスを使用してPNGのURLをロードし、Sprite.from(url)を呼び出すだけで完了です。v7とは異なり、最良の方法を確保するために、使用する前にテクスチャをロードする必要があります。

スプライトのサンプルコードをご覧ください。

スプライトの使用​

コンテナガイドでは、コンテナクラスと、それが定義するさまざまなプロパティについて説明しました。スプライトオブジェクトもコンテナであるため、スプライトを移動したり、回転させたり、他の表示プロパティを更新したりできます。

アルファ、色合い、ブレンドモード​

アルファは、標準的な表示オブジェクトプロパティです。スプライトのアルファを0.0から1.0まで一定時間アニメーション化することで、スプライトをシーンにフェードインできます。

色合いを使用すると、すべてのピクセルの色値を単一の色で乗算できます。たとえば、ダンジョンゲームの場合、obj.tint = 0x00FF00を設定してキャラクターの毒状態を表示し、キャラクターに緑の色合いを付けることができます。

ブレンドモードは、レンダリング時にピクセルカラーが画面に追加される方法を変更します。3つの主なモードは、add（スプライトの下にあるものに各ピクセルのRGBチャネルを追加します（グローや照明に便利））、multiply（tintのように動作しますが、ピクセル単位）、およびscreen（ピクセルを重ねて、その下にあるものを明るくします）です。

スケールと幅と高さ​

スプライトを使用する際の一般的な混乱の1つは、スケーリングと寸法です。コンテナクラスを使用すると、任意のオブジェクトのxスケールとyスケールを設定できます。コンテナであるスプライトもスケーリングをサポートしています。さらに、スプライトは明示的なwidth属性とheight属性もサポートしており、これらを使用すると同じ効果が得られますが、パーセンテージではなくピクセル単位になります。これは、スプライトオブジェクトが、明示的な幅と高さを持つテクスチャを所有しているために機能します。スプライトの幅を設定すると、PixiJSは内部的にその幅を、基になるテクスチャの幅のパーセンテージに変換し、オブジェクトのxスケールを更新します。したがって、幅と高さは実際には、パーセンテージではなくピクセル寸法に基づいてスケールを変更するための便利なメソッドにすぎません。

ピボットとアンカー​

スプライトをステージに追加して回転させると、デフォルトでは画像の左上隅を中心に回転します。場合によっては、これが目的の場合もあります。しかし、多くの場合、スプライトを、それが含む画像の中心または任意の位置を中心に回転させたいと思うでしょう。

これを実現する方法は2つあります。ピボットとアンカーです。

オブジェクトのピボットは、スプライトの左上隅からのオフセットであり、ピクセル単位で表されます。デフォルトは（0, 0）です。テクスチャが100px x 50pxのスプライトがあり、ピボットポイントを画像の中央に設定する場合は、ピボットを（50, 25）に設定します。幅の半分と高さの半分です。ピボットは画像の外側にも設定できることに注意してください。つまり、ピボットがゼロ未満または幅/高さより大きくなる可能性があります。これは、たとえば、複雑なアニメーション階層を設定するのに役立ちます。すべてのコンテナにはピボットがあります。

対照的に、アンカーはスプライトでのみ使用できます。アンカーは、各次元で0.0から1.0のパーセンテージで指定されます。アンカーを使用してテクスチャの中心点を中心に回転させるには、スプライトのアンカーを（0.5, 0.5）に設定します。幅と高さで50％です。あまり一般的ではありませんが、アンカーは標準の0.0〜1.0の範囲外にすることもできます。

アンカーの優れた点は、解像度と寸法に依存しないことです。スプライトを中央に固定するように設定し、後でテクスチャのサイズを変更しても、オブジェクトは正しく回転します。代わりにピクセルベースの計算を使用してピボットを設定した場合、テクスチャサイズを変更するにはピボットポイントを変更する必要があります。

したがって、一般的に、スプライトを使用する場合はアンカーを使用することをお勧めします。

最後に注意すべき点として、画像のtransform-originを設定しても移動しないCSSとは異なり、PixiJSでアンカーまたはピボットを設定すると、画面上のオブジェクトが移動します。言い換えれば、アンカーまたはピボットを設定すると、回転原点だけでなく、親に対するスプライトの位置にも影響します。