GUI ボックスノード

ボックスノード（box node）は、色、テクスチャ、またはアニメーションで塗りつぶされた長方形です。

ボックスノードの追加

新しいボックスノードを追加するには、Outline 内で 右クリック して Add ▸ Box を選択するか、A を押して Box を選択します。

GUI に追加したアトラス（atlas）やタイルソース（tile source）の画像やアニメーションを使用できます。テクスチャを追加するには、Outline 内の Textures フォルダーアイコンを 右クリック し、Add ▸ Textures... を選択します。次に、ボックスノードの Texture プロパティを設定します。

ボックスノードの色はグラフィックスの色調（tint）を変えることに注意してください。この色は画像データに乗算されるため、色を白（デフォルト）に設定した場合、色調は変わりません。

ボックスノードは、テクスチャが割り当てられていない場合、アルファ値が 0 に設定されている場合、サイズが 0, 0, 0 の場合でも、常に描画されます。レンダラーがボックスノードを適切にバッチ処理し、ドローコールの数を減らせるように、ボックスノードには常にテクスチャを割り当てることをお勧めします。

アニメーションの再生

ボックスノードでは、アトラスやタイルソースのアニメーションを再生できます。詳細はフリップブックアニメーション（flipbook animation）のマニュアルを参照してください。

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

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

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

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

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

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

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

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

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

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