ノード一覧に戻る

9スライス描画

nine_slice_render

9スライス素材を指定サイズのウィンドウ画像として描画します

確認済み
解説あり

入力ポート

名前型説明
9スライス
nine_slice
NineSlice
必須
9スライス素材作成ノードで作った、伸ばせるウィンドウ素材です。
幅
width
Int
出力するウィンドウの幅です。接続するとパラメータより優先します。
高さ
height
Int
出力するウィンドウの高さです。接続するとパラメータより優先します。

出力ポート

名前型説明
画像
image
Image
指定サイズで描画したウィンドウ画像です。
中身エリア
content_rect
Map
文字やアイコンを置きやすい内側エリアです。x、y、width、height を出します。
概要
summary
Text
描画結果の短いまとめです。
注意
warnings
Text
描画時の注意点です。問題がなければ空です。

パラメータ

名前型既定値範囲説明・選択肢
幅
width
Int
961–4096

出力するウィンドウの幅です。

高さ
height
Int
481–4096

出力するウィンドウの高さです。

辺の伸ばし方
edge_mode
Enum
Document—

描画時だけ辺の伸ばし方を上書きできます。

  • 素材設定Document
    9スライス素材に保存されている辺の伸ばし方を使います。
  • くり返しRepeat
    辺パーツをタイル状にくり返します。
  • 引き伸ばしStretch
    辺パーツを出力サイズに合わせて引き伸ばします。
中央の伸ばし方
center_mode
Enum
Document—

描画時だけ中央の伸ばし方を上書きできます。

  • 素材設定Document
    9スライス素材に保存されている中央の伸ばし方を使います。
  • くり返しRepeat
    中央パーツをタイル状にくり返します。
  • 引き伸ばしStretch
    中央パーツを出力サイズに合わせて引き伸ばします。
  • 透明Transparent
    中央を塗らず透明のままにします。
最小サイズ処理
min_size_policy
Enum
Clamp—

指定サイズが枠より小さい時の扱いです。

  • 自動で広げるClamp
    指定サイズが小さすぎる時、描画できる最小サイズまで自動で広げます。
  • 注意を出して広げるWarn
    小さすぎる時は最小サイズまで広げ、注意出力にも書きます。
  • エラーにするError
    指定サイズが枠より小さい時はエラーにします。

概要

NineSlice 素材を指定サイズのウィンドウ画像に描画するノードです。 角は崩れず辺と中央だけが伸縮するので、同じ素材から名前欄もフル画面 ウィンドウも作れます。

使い方のポイント

  • nine_slice_pack とセットで完結: pack(素材) → render(サイズ指定)。 サイズ違いのUIを量産する時は render を複数ぶら下げる
  • ドット絵の枠は Repeat(くり返し)が基本。Stretch は模様が伸びて ドット感が崩れやすい
  • width / height を📌入力ピン化すれば「開くウィンドウ」アニメも作れる

関連ノード

  • nine_slice_pack — 素材側の相方

  • blend — 文字・アイコンの上載せ

  • text_rasterize — 載せる文字の生成

  • 主な用途: メッセージウィンドウ、UIパネル、ボタン背景、名前欄、ステータス枠の生成

このノードは、NineSlice 素材を受け取り、幅と高さを指定して画像にします。角は崩さず、辺と中央だけを伸ばすため、ドット絵の枠をきれいに保ったまま大きなウィンドウを作れます。

辺の伸ばし方

値 表示名 説明
Document 素材設定 NineSlice Pack 側で保存した設定を使います。
Repeat くり返し 辺パーツをタイルのように並べます。ドット絵の枠線向けです。
Stretch 引き伸ばし 辺パーツを出力サイズに合わせて伸ばします。

中央の伸ばし方

値 表示名 説明
Document 素材設定 NineSlice Pack 側で保存した設定を使います。
Repeat くり返し 中央パーツをタイルのように並べます。
Stretch 引き伸ばし 中央パーツを出力サイズに合わせて伸ばします。
Transparent 透明 中央を描かず、透明のまま残します。

最小サイズ処理

9スライスは、左枠 + 右枠、上枠 + 下枠より小さいサイズには基本的にできません。その場合の処理を選べます。

値 表示名 説明
Clamp 自動で広げる 小さすぎる時、描画できる最小サイズまで自動で広げます。
Warn 注意を出して広げる 最小サイズまで広げたうえで、warnings に注意を書きます。
Error エラーにする 小さすぎるサイズなら描画せずエラーにします。

基本的な使い方

  1. 9スライス素材作成 の nine_slice を、このノードの nine_slice に接続します。
  2. width と height を指定します。
  3. image 出力を Preview などにつなぎ、ウィンドウ画像を確認します。
  4. 必要なら edge_mode や center_mode を変更して、くり返しと引き伸ばしを比較します。

content_rect の意味

content_rect は、ウィンドウの中に文字やアイコンを置くための目安です。

キー 意味
x 中身エリアの左上X座標
y 中身エリアの左上Y座標
width 中身エリアの幅
height 中身エリアの高さ

たとえば content_rect が x=8, y=8, width=80, height=32 なら、テキストはだいたい (8, 8) から 80x32 の範囲に置くと枠に重なりにくくなります。

注意

  • このノードは描画専用です。素材の作成やパーツ順の指定は NineSlice Pack で行います。
  • ドット絵の線を保ちたい場合は、まず edge_mode=Repeat を試すのが基本です。
  • グラデーションや単色面のように模様が目立たない素材なら Stretch も使えます。
  • paddingが出力を使い切るとcontent_rectは0幅または0高さになり、 content_rect_empty警告が出ます。
  • summaryとwarningsは言語に依存しない安定した診断形式です。 小さすぎるサイズを広げた場合はsize_clampedが出ます。
ノード一覧に戻る
9スライス描画 — PixPipeline ノード解説