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

はじめに
TextureRectとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

ゲームのUI上に画像を表示したいとき、まず手を伸ばすのが TextureRect です。背景画像・アイコン・カードのイラストなど、UIに貼り付ける「画像ノード」として幅広く使われます。

この記事では、TextureRect の基本的な使い方・引き伸ばしモードの選び方・よく触るプロパティを紹介します。

TextureRectとは？

TextureRect は テクスチャ（画像）をUI上に表示するためのノードです。Sprite2D がゲームワールドに画像を描画するのに対し、TextureRect は Control ノードとして動作するため、HBoxContainer や VBoxContainer などのUIレイアウトシステムと自然に組み合わせられます。

壁に絵を飾るときの「額縁」をイメージしてください。額縁（TextureRect）のサイズを変えると、中の絵（テクスチャ）をどう見せるか——引き伸ばす・縮める・そのまま保つ——を選べます。

継承ツリーは TextureRect → Control → CanvasItem → Node です。Container を継承していないため子ノードのレイアウト管理はしませんが、Control としてアンカーや size_flags を使った配置ができます。

Sprite2D（ゲームワールド描画）と TextureRect（UI描画）の使い分け — Sprite2D はゲームワールド用、TextureRect は UI レイヤー用の画像表示ノード

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

背景画像：タイトル画面・メニュー画面・ダイアログの背景に画像を敷くとき
アイコン表示：スキル・アイテム・ステータスのアイコンをUIに並べるとき
カードのイラスト：カードゲームUIでカード画像を一定サイズの枠に収めるとき
キャラクターの立ち絵：ビジュアルノベル風のUIで立ち絵を画面端に表示するとき
装飾・区切り線：UIの飾り枠・バナー画像など、レイアウトの一部として画像を使うとき

別のノードが適切な場面：

ゲームワールド内（物理・カメラ座標系）に画像を置くなら → Sprite2D を使う
リアルタイムで別カメラの映像を表示したいなら → SubViewportContainer（027）を使う
単色の矩形を置きたいだけなら → ColorRect（029）の方がシンプル

主なプロパティと機能

TextureRect の代表的なプロパティをまとめました。特に expand_mode と stretch_mode の組み合わせが、見た目に大きく影響します。

プロパティ	型	役割
`texture`	Texture2D	表示する画像リソースを指定する
`expand_mode`	enum	ノードのサイズをテクスチャに合わせるか、独立させるかを制御する
`stretch_mode`	enum	テクスチャをノードサイズに対してどう表示するか（引き伸ばし・タイル・維持など）
`flip_h`	bool	水平方向に反転して表示する
`flip_v`	bool	垂直方向に反転して表示する

stretch_mode の種類と動作を整理しました。

stretch_mode	動作	向いている場面
`SCALE`	ノードサイズにぴったり引き伸ばす（比率無視）	背景画像など比率が多少崩れても問題ない場面
`TILE`	タイル状に繰り返して敷き詰める	パターン背景・地面テクスチャなど
`KEEP`	元のサイズのまま表示（拡縮しない）	ピクセルパーフェクトなアイコン表示
`KEEP_CENTERED`	元のサイズで中央に配置	アイコンを枠の中央に固定したいとき
`KEEP_ASPECT`	縦横比を保ってノードに収める（FIT相当）	比率を崩したくないカード画像・プレビューなど
`KEEP_ASPECT_CENTERED`	縦横比を保って中央に収める	最もよく使う汎用設定。アイコン・イラスト全般
`KEEP_ASPECT_COVERED`	縦横比を保ってノード全体を覆う（COVER相当）	背景をはみ出してでも全面を埋めたいとき

TextureRect の stretch_mode 各モードの表示比較 — stretch_mode によってテクスチャの見え方が大きく変わる。KEEP_ASPECT_CENTERED が汎用的

コード例：テクスチャをコードで設定する

@onready var icon: TextureRect = $TextureRect

func _ready() -> void:
    # リソースパスから直接読み込む
    icon.texture = load("res://assets/icons/sword.png")
    icon.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTERED

コード例：アイテム選択に応じてアイコン画像を切り替える

@onready var item_icon: TextureRect = $ItemIcon

const ICON_PATHS = {
    "sword":  "res://assets/icons/sword.png",
    "shield": "res://assets/icons/shield.png",
    "potion": "res://assets/icons/potion.png",
}

func set_item(item_name: String) -> void:
    if item_name in ICON_PATHS:
        item_icon.texture = load(ICON_PATHS[item_name])

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

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ・テクニック	変えると何が起きるか
`stretch_mode` を `KEEP_ASPECT_CENTERED` に	比率を保ちつつ枠の中央に収まる。最初に試すべき設定
`stretch_mode` を `TILE` に	画像を繰り返して背景を敷き詰めできる。ドット絵パターンの背景によく使う
`modulate` で色を変える	テクスチャに色を掛け算して表示できる。グレーアウト（`Color(0.5, 0.5, 0.5)`）や点滅演出に使える
`flip_h` を `true` に	キャラクターの向きを反転する。左右対称のキャラ立ち絵を1枚で済ませるときに便利
`expand_mode` を `IGNORE_SIZE` に	テクスチャの元サイズに関係なく、ノードのサイズをレイアウトで自由に設定できる
AspectRatioContainer で包む	ノード自体の縦横比を固定しつつテクスチャを表示できる。アイコン枠の正方形維持に最適