Back to Node List

NineSlice Render

nine_slice_render

Renders a nine-slice material at an arbitrary pixel size.

Draft
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

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

Output Ports

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

Parameters

NameTypeDefaultRangeDescription / Options
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
    指定サイズが枠より小さい時はエラーにします。

概要

  • 主な用途: メッセージウィンドウ、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. widthheight を指定します。
  3. image 出力を Preview などにつなぎ、ウィンドウ画像を確認します。
  4. 必要なら edge_modecenter_mode を変更して、くり返しと引き伸ばしを比較します。

content_rect の意味

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

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

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

注意

  • このノードは描画専用です。素材の作成やパーツ順の指定は NineSlice Pack で行います。
  • ドット絵の線を保ちたい場合は、まず edge_mode=repeat を試すのが基本です。
  • グラデーションや単色面のように模様が目立たない素材なら stretch も使えます。
Back to Node List
NineSlice Render — PixPipeline Node Reference