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

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

はじめに

UIに単色の背景を敷きたい、暗幕を重ねてフェードインしたい、HPゲージの土台を作りたい——こういった「とにかく色のついた矩形が欲しい」場面に即座に使えるのが ColorRect です。シンプルな見た目ですが、ゲームUIの土台を支える縁の下の力持ちです。

この記事では、ColorRect の仕組みと使いどころ、よく使うテクニックを紹介します。

ColorRectとは？

ColorRect は 指定した色で塗りつぶした矩形（長方形）を UI 上に表示するノードです。テクスチャもスクリプトも不要で、色とサイズを設定するだけで使えます。

画用紙に色鉛筆で長方形を塗りつぶす——それだけのシンプルさが ColorRect の強みです。装飾を凝らした UI の「土台」や「仕切り」として、縁の下で活躍します。

継承ツリーは ColorRect → Control → CanvasItem → Node です。Control を継承しているため、アンカーや size_flags を使ったレイアウト配置が自由にできます。

ColorRect の主な用途：背景・暗幕・仕切り・ゲージ土台 — 単色の矩形ひとつで、UI の様々な「土台」として機能する

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

画面全体の暗幕・フェード：黒い ColorRect を全画面に広げて modulate.a をアニメーションさせるフェードイン・アウト
パネルの背景：テクスチャを使わずシンプルな単色背景のダイアログやパネルを作るとき
仕切り線・セパレータ：高さ 2px・幅いっぱいの ColorRect でリスト項目の区切り線を表現するとき
HPゲージの土台：ゲージの背景（灰色の帯）として使い、上に別の ColorRect や TextureRect を重ねてゲージを作るとき
デバッグ・プロトタイプ：仮の画像が用意できていないとき、色付きの矩形で位置やサイズを確認するとき

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

画像・テクスチャを表示したい → TextureRect（028）を使う
角丸・ボーダーなど凝った見た目にしたい → Panel ノードにスタイルボックスを設定するか、シェーダーを使う

主なプロパティと機能

ColorRect のプロパティは非常にシンプルです。

プロパティ	型	役割
`color`	Color	矩形の塗りつぶし色（RGBA）。アルファ値で透明度を調整できる

プロパティはこれだけです。サイズや位置は Control の size・position・アンカーで管理します。

コード例：画面全体にフェードイン・アウトする暗幕を作る

@onready var curtain: ColorRect = $Curtain  # anchors: Full Rect、color: 黒

func fade_out(duration: float) -> void:
    curtain.visible = true
    curtain.color.a = 0.0
    var tween := create_tween()
    tween.tween_property(curtain, "color:a", 1.0, duration)

func fade_in(duration: float) -> void:
    curtain.color.a = 1.0
    var tween := create_tween()
    tween.tween_property(curtain, "color:a", 0.0, duration)
    await tween.finished
    curtain.visible = false

コード例：シンプルなHPゲージを ColorRect で作る

# シーン構成
# Control (HPゲージ全体の親)
#   ├─ ColorRect (背景: 灰色、full_rect)
#   └─ ColorRect (ゲージ本体: 緑、左端からサイズで伸ばす) ← hp_bar

@onready var hp_bar: ColorRect = $HPBar
var max_hp := 100.0

func update_hp(current_hp: float) -> void:
    var ratio := clamp(current_hp / max_hp, 0.0, 1.0)
    hp_bar.size.x = hp_bar.get_parent().size.x * ratio

    # HP が少ないと赤くなる演出
    hp_bar.color = Color(1.0 - ratio, ratio * 0.8, 0.1)

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

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

パラメータ・テクニック	変えると何が起きるか
`color.a`（アルファ値）をアニメーションさせる	フェードイン・アウトや点滅演出が作れる。暗幕・ダメージフラッシュに定番
`color` を Tween で変化させる	HP 残量に応じて緑→黄→赤に色が変わるゲージが作れる
アンカーを `Full Rect` に設定する	親ノード全体を覆う背景・暗幕になる。画面フェードに必須の設定
高さ 1〜2px の横長にする	区切り線・セパレータとして使える。リストやパネルの仕切りに
`mouse_filter` を `IGNORE` に	マウスイベントを透過させ、背後のボタンなどがクリックできるようになる。装飾用途に重要
シェーダーを `material` に設定する	角丸・グラデーション・光るエフェクトなど、単色以上の表現が可能になる