スプライト

スプライト（sprite）は、単純な画像や、連続した画像を切り替えるフリップブックアニメーション（flipbook animation）を画面に表示するコンポーネント（component）です。

スプライトコンポーネントのグラフィックスには、アトラス（atlas） または タイルソース（tile source） を使用できます。

スプライトのプロパティ

Id、Position、Rotation の各プロパティに加えて、次のコンポーネント固有のプロパティがあります。

Image

シェーダー（shader）にサンプラーが1つだけある場合、このフィールドの名前は Image になります。それ以外の場合、各スロットにはマテリアル（material）内のテクスチャサンプラーの名前が付きます。 各スロットには、そのテクスチャサンプラーでスプライトに使用するアトラスまたはタイルソースのリソースを指定します。

Default Animation

スプライトに使用するアニメーションです。アニメーションの情報は、最初のアトラスまたはタイルソースから取得します。

Material

スプライトの描画に使用するマテリアルです。

Blend Mode

スプライトの描画に使用するブレンドモード（blend mode）です。

Size Mode

Automatic に設定すると、エディターがスプライトのサイズを設定します。Manual に設定すると、自分でサイズを設定できます。

Slice 9

スプライトのサイズ変更時に、テクスチャの縁の部分のピクセルサイズを保持するよう設定します。

9スライスによるテクスチャの適用

GUI ボックスノード（box node）やスプライトコンポーネント（sprite component）には、状況に応じてサイズを変える要素が含まれることがあります。たとえば、内部のコンテンツに合わせてサイズを変更する必要があるパネルやダイアログ、敵の残りの体力を示すためにサイズを変更する必要がある体力バーです。サイズを変更したノードやスプライトにテクスチャを適用すると、表示に問題が生じることがあります。

通常、エンジンは矩形の境界に合わせてテクスチャを拡大縮小しますが、9スライス（slice-9）の端の領域を定義すると、拡大縮小するテクスチャの部分を制限できます。

ボックスノードの Slice9 は4つの数値から成り、通常の拡大縮小を適用しない左、上、右、下のマージンのピクセル数を指定します。

マージンは左端から時計回りの順に設定します。

• 角の領域は拡大縮小されません。
• 辺の領域は1つの軸に沿って拡大縮小されます。左辺と右辺の領域は垂直方向に、上辺と下辺の領域は水平方向に拡大縮小されます。
• テクスチャの中央の領域は、必要に応じて水平方向と垂直方向に拡大縮小されます。

上記の Slice9 によるテクスチャの拡大縮小は、ボックスノードまたはスプライトのサイズを変更した場合にのみ適用されます。

ミップマップと9スライス

レンダラーでのミップマップ処理の仕組みにより、テクスチャの領域を拡大縮小すると表示が乱れることがあります。これは、領域を元のテクスチャサイズよりも 縮小 したときに発生します。その領域に対してレンダラーが解像度の低いミップマップを選択するため、表示の乱れが生じます。

この問題を避けるには、拡大縮小するテクスチャの領域を十分に小さくして、縮小せず、拡大のみが行われるようにしてください。

ブレンドモード

Blend Mode プロパティは、コンポーネント（component）のグラフィックスを、その背後のグラフィックスとどのようにブレンドするかを定義します。使用できるブレンドモード（blend mode）とその計算方法は次のとおりです:

Alpha

通常のブレンド: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

コンポーネントの対応するピクセルの色の値で、背景を明るくします: src.rgb + dst.rgb

Multiply

コンポーネントの対応するピクセルの値で、背景を暗くします: src.rgb * dst.rgb

Screen

Multiply とは逆の処理です。背景とコンポーネントの対応するピクセルの値を明るくします: src.rgb - dst.rgb * dst.rgb

実行時の操作

各種の関数やプロパティを使って、実行時にスプライトを操作できます（使い方は API ドキュメント を参照してください）。次の関数があります。

• sprite.play_flipbook() - スプライトコンポーネントでアニメーションを再生します。
• sprite.set_hflip() と sprite.set_vflip() - スプライトのアニメーションの水平反転と垂直反転を設定します。

スプライトには、go.get() と go.set() を使って操作できる各種のプロパティもあります。

cursor

正規化されたアニメーションカーソルです（number）。

image

スプライトの画像です（hash）。アトラスまたはタイルソースのリソースプロパティと go.set() を使って変更できます。例は API リファレンス を参照してください。

material

スプライトのマテリアルです（hash）。マテリアルのリソースプロパティと go.set() を使って変更できます。例は API リファレンス を参照してください。

playback_rate

アニメーションの再生速度です（number）。

scale

スプライトの非均一なスケールです（vector3）。

size

スプライトのサイズです（vector3）。スプライトの Size Mode が Manual に設定されている場合にのみ変更できます。

マテリアル定数

既定の sprite マテリアル（material）には、go.set() または go.animate() を使って変更できる以下の定数があります（詳しくはマテリアルのマニュアルを参照してください）。例:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

スプライトの色調です（vector4）。vector4 を使って色調を表し、x、y、z、w がそれぞれ赤、緑、青、アルファ値の色調に対応します。

マテリアルの属性

スプライトでは、現在割り当てられているマテリアルの頂点属性（vertex attribute）をオーバーライドできます。これらの属性はコンポーネントから頂点シェーダーへ渡されます（詳しくは マテリアルのマニュアル を参照してください）。

マテリアルに指定された属性は、インスペクターに通常のプロパティとして表示され、個々のスプライトコンポーネントで設定できます。いずれかの属性をオーバーライドすると、オーバーライドされたプロパティとして表示され、ディスク上のスプライトファイルに保存されます。

プロジェクトの設定

game.project ファイルには、スプライトに関する プロジェクト設定 がいくつかあります。

複数のテクスチャを使用するスプライト

スプライトで複数のテクスチャを使用する場合は、いくつかの注意点があります。

アニメーション

現在、アニメーションデータ（fps、フレーム名）は最初のテクスチャから取得します。これを「基準となるアニメーション（driving animation）」と呼びます。

基準となるアニメーションの画像 ID を使って、別のテクスチャ内の画像を検索します。 そのため、テクスチャ間でフレーム ID が一致していることが重要です。

たとえば、diffuse.atlas に次のような run アニメーションがあるとします。

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

この場合、フレーム ID は run/hero_run_color_1 のようになりますが、たとえば次のような normal.atlas には見つからないでしょう。

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

そこで、アトラス の Rename patterns を使って名前を変更します。 対応するアトラスにそれぞれ _color= と _normal= を設定すると、両方のアトラスでフレーム名が次のようになります。

run/hero_run_1
run/hero_run_2
...

UV 座標

UV 座標は最初のテクスチャから取得します。頂点の組は1つしかないため、2つ目以降のテクスチャの UV 座標がより多い場合や形状が異なる場合には、 適切な対応を保証できません。

これは重要な注意点です。画像の形状を十分に近いものにしてください。そうしないと、テクスチャのにじみが生じる可能性があります。

各テクスチャ内の画像の寸法は異なっていてもかまいません。