はじめに
設定画面のオン・オフを、スマートフォンアプリのようなスライドスイッチで表現したい——そんな場面に使えるのが CheckButton です。前回紹介した CheckBox と機能はまったく同じで、見た目だけが異なります。
この記事では、CheckButton の特徴・CheckBox との使い分け・よく触るプロパティを紹介します。
CheckButtonとは?
CheckButton は スライドスイッチ(トグルスイッチ)風の外見を持つオン・オフ切り替えUIノードです。クリックするたびにスイッチが左右に切り替わり、現在の状態を button_pressed で取得できます。
スマートフォンの設定画面にある「Wi-Fi ●━━」「Bluetooth ━━○」のトグルをイメージしてください。CheckButton はその見た目をGodotのUIで再現します。チェックボックスより直感的に「スイッチをオンにした」感が伝わります。
継承ツリーは CheckButton → Button → BaseButton → Control → CanvasItem → Node です。CheckBox と同じ親クラスを持つため、プロパティ・シグナルはすべて共通です。

このノードを使うべき場面
- モバイルライクな設定画面:スマホゲームやタッチ操作向けのUIでスイッチ感を出したいとき
- 「有効/無効」の切り替え:通知・サウンド・バイブレーションなど、機能の有効化をスイッチで表現するとき
- チェックボックスより視認性を上げたいとき:小さい画面や高齢者向けUIで、オン・オフがわかりやすいスイッチが好ましい場面
- 設定項目が縦に並ぶリスト:項目名の右端にスイッチを配置するレイアウト(HBoxContainer + Label + CheckButton)
別のノードが適切な場面:
- チェックマーク風の見た目が好ましい →
CheckBox(031)を使う - 複数から1つだけ選ばせたい →
Buttonのbutton_groupを使う
主なプロパティと機能
CheckButton のプロパティは CheckBox と共通です。主なものを再掲します。
| プロパティ | 型 | 役割 |
|---|---|---|
button_pressed | bool | 現在オンかどうか(true = ON)。読み書き両方できる |
text | String | スイッチの左に表示するラベルテキスト |
disabled | bool | true にすると操作を受け付けなくなる |
toggled(シグナル) | Signal | 状態が切り替わったとき、新しい状態(bool)を引数として発火する |
コード例:サウンドのオン・オフをスイッチで切り替える
@onready var sound_switch: CheckButton = $SoundSwitch
func _ready() -> void:
sound_switch.button_pressed = SaveData.sound_enabled
sound_switch.toggled.connect(_on_sound_toggled)
func _on_sound_toggled(pressed: bool) -> void:
SaveData.sound_enabled = pressed
AudioServer.set_bus_mute(AudioServer.get_bus_index("Master"), not pressed)
コード例:HBoxContainer で「ラベル + スイッチ」のレイアウトを作る
# シーン構成例
# VBoxContainer
# ├─ HBoxContainer
# │ ├─ Label ("サウンド")
# │ └─ CheckButton ← $SoundSwitch
# ├─ HBoxContainer
# │ ├─ Label ("通知")
# │ └─ CheckButton ← $NotifySwitch
# └─ HBoxContainer
# ├─ Label ("バイブレーション")
# └─ CheckButton ← $VibSwitch

もっと使いこなす:カスタマイズできるパラメータ
まずは基本を動かしてみてから、余裕が出たら試してみてください。
| パラメータ・テクニック | 変えると何が起きるか |
|---|---|
button_pressed を起動時に設定 | 保存済みの設定値をスイッチに反映できる。設定画面の初期化に必須 |
| Theme Overrides でアイコンを変える | スイッチの画像をゲーム独自のデザインに変更できる。ON/OFF それぞれのアイコンを差し替え可能 |
disabled を条件付きで切り替える | 他の設定に依存するオプションを一時的にグレーアウトできる |
size_flags_horizontal を EXPAND に | HBoxContainer 内でスイッチが右端に寄り、設定リストとして整った見た目になる |
まとめ
CheckButton は 「スライドスイッチ風の見た目を持つトグルUI」 です。
- 機能は CheckBox と完全に同じ。見た目の好みやターゲット層で使い分ける
toggledシグナルで状態変化を検知して設定の保存・機能の切り替えに使う- HBoxContainer + Label との組み合わせでスマホ風の設定リストが手軽に作れる
次回は、ドロップダウンリストから選択肢を選べる OptionButton を紹介します。
関連性の高いノード解説記事
- Node(基底クラス)
- Node2D
- Sprite2D
- AnimatedSprite2D
- CharacterBody2D
- CollisionShape2D
- Area2D
- RigidBody2D
- Camera2D
- Label
- RichTextLabel
- LineEdit
- Button
- HBoxContainer
- VBoxContainer
- GridContainer
- ScrollContainer
- Panel
- TabContainer
- SplitContainer
- HSplitContainer
- VSplitContainer
- FlowContainer
- MarginContainer
- CenterContainer
- AspectRatioContainer
- SubViewportContainer
- TextureRect
- ColorRect
- ProgressBar
- CheckBox
- CheckButton(この記事)
- OptionButton
- SpinBox
- HSlider
この記事はGodot 4.xをもとに執筆しています。



コメント