Godot入門:CheckButtonの使い方と活用法

はじめに

設定画面のオン・オフを、スマートフォンアプリのようなスライドスイッチで表現したい——そんな場面に使えるのが CheckButton です。前回紹介した CheckBox と機能はまったく同じで、見た目だけが異なります。

この記事では、CheckButton の特徴・CheckBox との使い分け・よく触るプロパティを紹介します。

CheckButtonとは?

CheckButton は スライドスイッチ(トグルスイッチ)風の外見を持つオン・オフ切り替えUIノードです。クリックするたびにスイッチが左右に切り替わり、現在の状態を button_pressed で取得できます。

スマートフォンの設定画面にある「Wi-Fi ●━━」「Bluetooth ━━○」のトグルをイメージしてください。CheckButton はその見た目をGodotのUIで再現します。チェックボックスより直感的に「スイッチをオンにした」感が伝わります。

継承ツリーは CheckButtonButtonBaseButtonControlCanvasItemNode です。CheckBox と同じ親クラスを持つため、プロパティ・シグナルはすべて共通です。




CheckButton のOFF状態(左)とON状態(右)
クリックするたびにスイッチが左右に切り替わる

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

  • モバイルライクな設定画面:スマホゲームやタッチ操作向けのUIでスイッチ感を出したいとき
  • 「有効/無効」の切り替え:通知・サウンド・バイブレーションなど、機能の有効化をスイッチで表現するとき
  • チェックボックスより視認性を上げたいとき:小さい画面や高齢者向けUIで、オン・オフがわかりやすいスイッチが好ましい場面
  • 設定項目が縦に並ぶリスト:項目名の右端にスイッチを配置するレイアウト(HBoxContainer + Label + CheckButton)

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

  • チェックマーク風の見た目が好ましい → CheckBox(031)を使う
  • 複数から1つだけ選ばせたい → Buttonbutton_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




HBoxContainer + Label + CheckButton で作る設定画面レイアウト
Label + CheckButton を HBoxContainer に入れると、スマホ風の設定リストが作れる

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

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

パラメータ・テクニック 変えると何が起きるか
button_pressed を起動時に設定 保存済みの設定値をスイッチに反映できる。設定画面の初期化に必須
Theme Overrides でアイコンを変える スイッチの画像をゲーム独自のデザインに変更できる。ON/OFF それぞれのアイコンを差し替え可能
disabled を条件付きで切り替える 他の設定に依存するオプションを一時的にグレーアウトできる
size_flags_horizontalEXPAND HBoxContainer 内でスイッチが右端に寄り、設定リストとして整った見た目になる

まとめ

CheckButton は 「スライドスイッチ風の見た目を持つトグルUI」 です。

  • 機能は CheckBox と完全に同じ。見た目の好みやターゲット層で使い分ける
  • toggled シグナルで状態変化を検知して設定の保存・機能の切り替えに使う
  • HBoxContainer + Label との組み合わせでスマホ風の設定リストが手軽に作れる

次回は、ドロップダウンリストから選択肢を選べる OptionButton を紹介します。

シリーズ:Godot 4 ノード解説

この記事はGodot 4.xをもとに執筆しています。

コメント