この記事について

GodotでButtonを置いても、見た目を作っただけではクリック後の処理は動きません。ボタンが発するpressedシグナルを、実行したい関数へ接続します。

この記事では、ボタンをクリックすると「クリック回数」が増える小さな画面を作ります。シグナルの接続、Labelの書き換え、ボタンを押せないときの確認箇所を順に見ていきます。Godot 4.6.3のGDScriptを使い、エディターの項目名は英語表記で説明します。

この記事でわかること

  • Buttonのpressedをスクリプトの関数へ接続する方法
  • クリックするたびにLabelの文字を更新する方法
  • Disabled・Mouse Filter・接続先を調べる順番

基本手順

手順1:ボタンと表示用のLabelを用意する

空のプロジェクトでScene → New Sceneを開き、SceneドックのUser Interfaceを選びます。作られたControlをCounterUIに名前変更し、counter_ui.tscnとして保存します。

CounterUIを選び、Sceneドックの+からVBoxContainerを追加し、名前をContentにします。続けてContentの子としてLabelとButtonを追加し、それぞれCountLabel、CountButtonに名前変更します。

CounterUI (Control)
└ Content (VBoxContainer)
  ├ CountLabel (Label)
  └ CountButton (Button)

ContentのInspectorでLayout → Transformを開き、PositionをX=40、Y=40にします。Layout → Custom Minimum SizeのXを280にすると、ボタンの幅を確保できます。Theme Overrides → ConstantsのSeparationは16にします。

CountLabelのTextへ「クリック回数: 0」、CountButtonのTextへ「1回増やす」と入力します。CountButtonのCustom Minimum SizeのYは56にします。文字が小さい場合は両方のTheme Overrides → Font Sizes → Font Sizeを24にしてください。

CounterUIの下にContent、CountLabel、CountButtonを配置したGodotのシーン
手順1:Contentの下にCountLabelとCountButtonを置き、表示文字を設定します。

手順2:親ノードへスクリプトを付ける

CounterUIを選び、SceneドックのAttach ScriptからGDScriptを追加します。保存先はres://counter_ui.gdにします。Templateのチェックがある場合は外し、Createを押します。

スクリプトを次の内容にします。countが回数を保持する変数で、count_labelが画面のLabelです。ノード名は大文字と小文字も含めて手順1とそろえてください。

extends Control

var count: int = 0
@onready var count_label: Label = $Content/CountLabel

$Content/CountLabelは、このスクリプトが付いたCounterUIからCountLabelまでの相対パスです。CountLabelを別の親へ移動した場合は、コード側のパスも変更します。

counter_ui.gdのcount変数とCountLabelへの相対パス
手順2:countに回数を保持し、$Content/CountLabelで表示用Labelを取得します。

手順3:pressedシグナルをCounterUIへ接続する

SceneドックでCountButtonを選びます。右側のSignalsタブを開き、pressed()をダブルクリックします。接続先には、スクリプトを付けたCounterUIを選びます。

CountButtonとSignalsタブのpressedシグナルおよび接続先
手順3:CountButtonを選び、Signalsのpressed()を開きます。画像は接続後で、pressed()の下に接続先が表示されています。

Receiver Methodに「_on_count_button_pressed」と入力し、Connectを押します。スクリプトに同名の関数が追加されたら、その中のpassを次の2行へ置き換えます。

pressedの接続ダイアログでCounterUIと_on_count_button_pressedを指定した状態
手順3:接続先をCounterUI、Receiver Methodを_on_count_button_pressedにしてConnectを押します。
func _on_count_button_pressed() -> void:
    count += 1
    count_label.text = "クリック回数: %d" % count

関数の中は字下げが必要です。count += 1で回数を1増やし、その数をLabelへ表示しています。「_on_count_button_pressed」という関数名を付けるだけで、自動的に接続されるわけではありません。Signalsタブで接続したことを確認してください。

手順4:現在のシーンを実行してクリックする

スクリプトとシーンを保存し、エディター右上のRun Current Sceneからcounter_ui.tscnを実行します。Windows・Linuxの標準ショートカットはF6です。実行した画面で「1回増やす」を3回クリックし、表示が0 → 1 → 2 → 3と変わることを確認します。

実行直後のクリック回数0と、3回クリック後のクリック回数3を同縮尺で比較
手順4:実行直後は0、ボタンを3回クリックすると3になります。

ButtonのAction Modeが既定のButton Releaseなら、押して離したタイミングでpressedが発生します。押し続けている間、毎フレーム回数が増える処理ではありません。

停止してもう一度実行すると、countは0から始まります。今回の変数は実行中だけ値を保持するため、終了後も回数を残したい場合は別途、保存処理が必要です。

手順5:コードから接続する書き方も確認する

エディターで接続する代わりに、スクリプトから接続することもできます。こちらを試すときは、まずCountButtonのSignalsタブで既存の接続を選び、Disconnectで解除してください。接続方法はどちらか一方にそろえます。

次がコード接続版の全体です。_ready()で接続してから、クリックを待ちます。

extends Control

var count: int = 0
@onready var count_label: Label = $Content/CountLabel
@onready var count_button: Button = $Content/CountButton

func _ready() -> void:
    count_button.pressed.connect(_on_count_button_pressed)

func _on_count_button_pressed() -> void:
    count += 1
    count_label.text = "クリック回数: %d" % count

エディター接続版では_ready()の接続行は不要です。コード接続版へ切り替えた後も、3回のクリックで3回だけ増えるか確かめます。

counter_ui.gdのコード接続版全体。_readyでpressedシグナルを接続する行を赤枠で表示
手順5:コード接続版では_ready()の中でpressed.connect()を呼びます。

うまくいかないときの確認箇所

クリックしても文字が変わらない

最初にDebuggerへエラーが出ていないか見ます。次にCountButtonのpressedの接続先と、Receiver Methodの名前を確認します。スクリプト内に関数があっても、シグナルがその関数へ接続されていなければ実行されません。

ボタンが灰色で押せない

CountButtonのDisabledがオンになっていないか確認します。検証中はオフにします。Toggle Modeは今回使わないので、こちらもオフのままにします。

見えているのにマウスへ反応しない

ボタンの上にColorRectやTextureRectなどのControlが重なっていると、上のノードが入力を受け取る場合があります。装飾専用のノードなら、そのノードのMouse → FilterをIgnoreにします。ボタン自身をIgnoreへ変更すると、ボタンがマウス入力を受け取れなくなるため、変更する対象を間違えないようにしてください。

Node not foundと表示される

CounterUIにスクリプトが付いているか、ContentとCountLabelの親子関係・名前が一致するか確認します。ノードを後から改名した場合、コード中の$Content/CountLabelも見直します。

接続済みのエラーが出る

Signalsタブで接続したまま、_ready()にも同じ接続を書いていないか確認します。同じシグナルと同じ関数の接続を重ねるとエラーになります。エディター接続かコード接続のどちらかに統一してください。

まとめ

Buttonを動かす基本は、処理を書くスクリプトを用意し、pressedシグナルをその関数へ接続することです。まずはクリック回数のように結果が目で見える処理で確認すると、入力の問題と処理の問題を切り分けやすくなります。

反応しないときは、エラー、シグナルの接続、Disabled、重なったControlの順に確認してみてください。