9スライス素材作成 — PixPipeline ノード解説

入力ポート

名前	型	説明
角パーツ corner	Image	3パーツ方式で使う角画像です。右上・左下・右下は反転して自動で作ります。
辺パーツ edge	Image	3パーツ方式で使う上辺画像です。下辺や左右の辺は反転・回転して自動で作ります。
中央パーツ center	Image	3パーツ方式で使う中央の塗り画像です。
パーツ画像リスト parts	List<Image>	5パーツ方式または9パーツ方式で使う画像リストです。9パーツは左上、上、右上、左、中央、右、左下、下、右下の順です。
スプライトシート spritesheet	SpriteSheet	スプライトシートのフレーム順をパーツ順として使います。9パーツは左上、上、右上、左、中央、右、左下、下、右下の順です。

出力ポート

名前	型	説明
9スライス nine_slice	NineSlice	9スライス描画ノードへ渡す、伸ばせるウィンドウ素材です。
素材画像 image	Image	9つの領域を1枚にまとめた確認用の素材画像です。
概要 summary	Text	作成結果の短いまとめです。
注意 warnings	Text	素材作成時の注意点です。問題がなければ空です。

パラメータ

名前	型	既定値	範囲	説明・選択肢
素材名 name	Text	NineSlice	—	9スライス素材に付ける名前です。
作り方 mode	Enum	ThreeParts	—	入力画像をどのパーツ順として読むかです。 3パーツ`ThreeParts` 角パーツ、辺パーツ、中央パーツの3つから作ります。足りない角や辺は反転・回転して作ります。 5パーツ`FiveParts` 5枚の画像を角、上辺、下辺、横辺、中央の順で使います。 9パーツ`NineParts` 9枚の画像を左上、上、右上、左、中央、右、左下、下、右下の順で使います。リスト順9パーツ`ListOrder` パーツ画像リストから9枚を左上、上、右上、左、中央、右、左下、下、右下の順で読みます。シート順9パーツ`SpriteSheetOrder` スプライトシートから9フレームを左上、上、右上、左、中央、右、左下、下、右下の順で読みます。
辺の伸ばし方 edge_mode	Enum	Repeat	—	この素材の標準の辺の伸ばし方です。くり返し`Repeat` 辺パーツをタイル状にくり返します。ドット絵の枠線向けです。引き伸ばし`Stretch` 辺パーツを出力サイズに合わせて引き伸ばします。
中央の伸ばし方 center_mode	Enum	Repeat	—	この素材の標準の中央の伸ばし方です。くり返し`Repeat` 中央パーツをタイル状にくり返します。引き伸ばし`Stretch` 中央パーツを出力サイズに合わせて引き伸ばします。透明`Transparent` 中央を塗らず透明のままにします。
余白左 padding_left	Int	0	0–512	中に文字などを置く時の左余白です。0なら左枠の幅を使います。
余白右 padding_right	Int	0	0–512	中に文字などを置く時の右余白です。0なら右枠の幅を使います。
余白上 padding_top	Int	0	0–512	中に文字などを置く時の上余白です。0なら上枠の高さを使います。
余白下 padding_bottom	Int	0	0–512	中に文字などを置く時の下余白です。0なら下枠の高さを使います。

概要

主な用途: RPGのメッセージウィンドウ、UIパネル、ボタン枠、吹き出し枠など
出力する専用型: NineSlice

NineSlice は、9スライス素材用の専用データです。単なる画像だけでなく、「左枠は何pxか」「上枠は何pxか」「中央はくり返すか、伸ばすか」「文字を置く内側エリアはどこか」といった情報も一緒に持ちます。

9スライスとは

ウィンドウ画像を次の9つの場所に分けて考える方法です。

左上	上	右上
左	中央	右
左下	下	右下

角はそのまま置きます。
上下左右の辺は、横や縦にくり返す、または引き伸ばします。
中央は、くり返す、引き伸ばす、透明のままにする、から選べます。

これにより、小さなドット絵素材から大きなテキストウィンドウを作れます。

作り方

値	表示名	必要な入力	説明
3_parts	3パーツ	`corner`、`edge`、`center`	角1枚、辺1枚、中央1枚から作ります。少ない素材で済みます。
5_parts	5パーツ	`parts` または `spritesheet`	角、上辺、下辺、横辺、中央の5枚から作ります。上下の辺を別デザインにできます。
9_parts	9パーツ	`parts` または `spritesheet`	9つの場所をすべて別画像にします。最も自由です。
list_order	リスト順9パーツ	`parts`	`parts` リストの先頭9枚を9パーツ順で使います。
spritesheet_order	シート順9パーツ	`spritesheet`	スプライトシートの先頭9フレームを9パーツ順で使います。

5パーツの順番

parts または spritesheet は次の順番で並べます。

角
上辺
下辺
横辺
中央

9パーツの順番

parts または spritesheet は次の順番で並べます。

左上
上
右上
左
中央
右
左下
下
右下

伸ばし方

値	表示名	説明
repeat	くり返し	同じパーツをタイルのように並べます。ドット絵の枠線に向いています。
stretch	引き伸ばし	パーツを指定サイズに合わせて伸ばします。グラデーションや単純な面に向いています。
transparent	透明	中央を描かず、透明のまま残します。中央の透けた枠を作る時に使います。

transparent は中央の伸ばし方だけで選べます。

基本的な使い方

角パーツ、辺パーツ、中央パーツになる画像を用意します。
9スライス素材作成 を置きます。
作り方 を 3パーツ にします。
corner、edge、center に画像を接続します。
nine_slice 出力を 9スライス描画 の nine_slice 入力へ接続します。

注意

このノードは素材を作るノードです。最終的なウィンドウサイズは NineSlice Render 側で指定します。
3パーツ は少ない素材で済みますが、上下左右を完全に別デザインにしたい場合は 9パーツ を使います。
parts と spritesheet の両方を接続した場合、parts が優先されます。