Godot入門：NinePatchRectの使い方と活用法

対象読者：Godotの基本操作を少し触ったことがある初級者の方

はじめに
NinePatchRectとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
1. マージンを調整して枠の太さを変える
よくある質問：似たノードとの違い
まとめ
関連性の高いノード解説記事

はじめに

ダイアログの吹き出しやボタンの背景など、サイズを変えても角や枠が崩れないUIパーツを作りたいときに便利なのが NinePatchRect です。1枚のテクスチャを9分割し、拡大縮小しても見た目を保ったまま表示できます。

NinePatchRectとは？

NinePatchRectは、1枚のテクスチャを縦横3分割ずつ、合計9つの領域（パッチ）に分けて表示するノードです。四隅は原寸のまま、上下左右の辺は一方向にだけ伸び縮みし、中央は縦横両方向に伸び縮みします。

たとえるなら、額縁のような枠です。四隅の飾りはそのままに、辺の部分だけを伸ばして好きなサイズの額縁を作れるイメージです。

NinePatchRect は Control → CanvasItem → Node を継承しています。TextureRect と違い、拡大してもテクスチャ全体が歪まないのが特徴です。

このノードを使うべき場面

ダイアログウィンドウやメッセージウィンドウの背景（サイズが可変でも枠が崩れない）
ボタンやパネルの背景を、リッチな見た目のまま様々なサイズに対応させたいとき
吹き出しやツールチップなど、内容量に応じて大きさが変わるUIパーツ

UIの見た目にこだわるほど、NinePatchRectの出番は増えていきます。

使わない・別のノードが適切な場合：

単色の背景でよい → ColorRect を使う
拡大縮小せず1枚絵をそのまま表示したいだけ → TextureRect を使う
テーマのスタイルボックスで十分に装飾できる → Panel や PanelContainer を使う

使うかどうかの目安：テクスチャの見た目を保ったまま様々なサイズに引き伸ばしたいならNinePatchRect、単純に画像を表示するだけならTextureRect、と考えると選びやすくなります。

主なプロパティと機能

プロパティ／メソッド	役割	型
texture	表示する元のテクスチャ	Texture2D
patch_margin_left / top / right / bottom	各辺の伸縮しない領域（マージン）の幅	int
draw_center	中央部分を描画するかどうか	bool
axis_stretch_horizontal / vertical	水平・垂直方向の伸縮方法（Stretch / Tile / Tile Fit）	AxisStretchMode
region_rect	テクスチャ内で使用する領域	Rect2

もっと使いこなす：カスタマイズできるパラメータ

マージンを調整して枠の太さを変える

貼り付け先の準備：①シーンツリーで＋ボタンから「NinePatchRect」を検索して追加　②インスペクターでTextureプロパティに任意の画像を設定　③右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け

extends NinePatchRect

func _ready() -> void:
	patch_margin_left = 16
	patch_margin_right = 16
	patch_margin_top = 16
	patch_margin_bottom = 16
	axis_stretch_horizontal = NinePatchRect.AXIS_STRETCH_MODE_STRETCH
	axis_stretch_vertical = NinePatchRect.AXIS_STRETCH_MODE_STRETCH

よくある質問：似たノードとの違い

Q. TextureRectとの違いは？

TextureRect はテクスチャ全体を拡大縮小するため、大きくすると絵が歪みます。NinePatchRectは9分割することで、四隅や辺の見た目を保ったまま拡大縮小できます。詳しくはTextureRectの記事で解説しています。

Q. Panelとの違いは？

Panel はテーマのスタイルボックスで背景を描画する仕組みで、コードやテーマで見た目を管理します。NinePatchRectは1枚のテクスチャ画像をもとに9分割表示する仕組みで、画像素材から直接デザインしたい場合に向いています。詳しくはPanelの記事を参照してください。

まとめ

NinePatchRectは、1枚のテクスチャを9分割することで、サイズを変えても角や枠の見た目を保ったまま表示できるノードです。

ダイアログやボタンなど、サイズが変わるUIパーツの背景に最適
patch_marginで伸縮しない領域を指定できる
単純な画像表示ならTextureRect、装飾はPanel系と使い分ける

次の記事では、背景と余白をまとめて扱えるコンテナ「PanelContainer」について解説します。