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

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

はじめに
ColorPickerButtonとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
1. 1. 選んだ色をキャラクターに反映する
よくある質問：似たノードとの違い
まとめ
関連性の高いノード解説記事

はじめに

キャラクターの色をカスタマイズさせたり、お絵かきツールの色選択に使ったりと、ユーザーに色を選ばせるボタンが ColorPickerButton です。ボタン一つで、押すと色選択パネルが開くUIを簡単に作れます。

ColorPickerButtonとは？

ColorPickerButtonは、クリックすると色選択パネル（ColorPicker）がポップアップで開くボタンです。選んだ色はボタン自体にプレビュー表示されます。

たとえるなら、ペイントソフトの「色を選ぶ」ボタンです。普段はボタンとして小さく収まっていて、押したときだけ詳細な色選択画面が開きます。

ColorPickerButton は Button → BaseButton → Control → CanvasItem → Node を継承しています。Buttonの一種なので、見た目や挙動の基本はButtonと共通しています。

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

キャラクターや装備の色をプレイヤーにカスタマイズさせたいとき
お絵かき・ペイント機能で、使用する色を選ばせたいとき
テーマカラーの設定など、開発者向けツール画面を作るとき
色選択の機会が増えるほど便利になるノードです： カスタマイズ要素が増えるゲームほど、標準の色選択UIとして重宝します

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

色選択パネルを常に表示しておきたい（ボタンで畳みたくない） → ColorPicker を直接使う
選択肢が色ではなく文字や項目 → OptionButton を使う

使うかどうかの目安： 画面のスペースを節約しつつ色を選ばせたいならColorPickerButton、常に色選択パネルを表示しておきたいならColorPickerを直接使いましょう。

主なプロパティと機能

ColorPickerButtonの代表的なプロパティとメソッドを以下にまとめました。

プロパティ/メソッド	役割	型
`color`	現在選択されている色	Color
`edit_alpha`	透明度（アルファ値）の調整を許可するか	bool
`get_picker()`	内部のColorPickerオブジェクトを取得	ColorPicker
`color_changed`	色が変更されたときに発火するシグナル	Signal
`popup_closed`	色選択パネルが閉じられたときに発火するシグナル	Signal

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

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

1. 選んだ色をキャラクターに反映する

貼り付け先の準備： ①シーンツリーで＋ボタンから「ColorPickerButton」を検索して追加　②右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け

extends ColorPickerButton

func _ready() -> void:
	color = Color.WHITE
	color_changed.connect(_on_color_changed)

func _on_color_changed(new_color: Color) -> void:
	# 例：プレイヤーキャラクターの色を変更
	get_node("../PlayerSprite").modulate = new_color

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

Q. ColorPickerButtonとColorPickerの違いは？
A. ColorPickerButtonは普段ボタンとして畳まれていて、クリックすると色選択パネルが開きます。ColorPickerは色選択パネルそのもので、常に画面上に表示されたままになります。

Q. ColorPickerButtonとOptionButtonの違いは？
A. どちらもクリックでポップアップが開く点は似ていますが、OptionButtonはテキストの選択肢一覧、ColorPickerButtonは色を選ぶための専用UIという違いがあります。

まとめ

ColorPickerButton は、色選択UIをボタン一つで手軽に実現できるノードです。

キャラクターカスタマイズやお絵かきツールなど、色選択が必要な場面で活躍します
colorプロパティとcolor_changedシグナルが基本の使い方です
常時表示が必要ならColorPicker、省スペースならColorPickerButtonと使い分けましょう

次の記事では、UIの見た目を整える NinePatchRect を解説します。