ゲーム内でテキストウィンドウを表示させる機能を作った際、画面のどこをクリックしても文字が進むように全画面のボタンを作りました。 さらに、それとは別にスキップボタンを作り、全画面ボタンの上にスキップボタンが表示されるようにしました。 すると、見た目上はスキップボタンが手前にあるのに、スキップボタンが押せなくなりました。

この記事では、重なったButtonのクリック優先順位を検証し、z_indexによる見た目の重なり順とGUI入力の優先順位が異なることを紹介します。

環境

• Godot4.7
• GDScript

具体例

• Control
  • Button1
  • Button2

上記のようなシーンを作成し、青いButton1の上に赤いButton2を配置しました。

ボタンを押したら、どのボタンが押されたかをprintするようになっています。

extends Control

func _on_button_1_pressed() -> void:
	print("ボタン１が押されました")

func _on_button_2_pressed() -> void:
	print("ボタン２が押されました")

動画ではButton1を押したら、Button1が反応し、 Button2を押したら、Button2が反応します。

今度は、Button1が手前に来るようにz-indexを増やしてみます。Button2は完全に隠れました。

実行した結果、Button1しか見えないが、Button2があるであろう場所をクリックすると、Button2が反応してしまいます。

z_index はControlの描画順を変更できます。しかし、見た目が手前になったからといって、そのButtonが必ず先にGUI入力を受け取るとは限りません。

解決方法

今回のように重なったButtonでは、シーンツリーで下にあるButtonが優先されます。 そのため、シーンツリーでButton1を下に持ってくるとButton2は押せなくなります。

• Control
  • Button2
  • Button1

今度はButton1の判定すべてがButton1になっています。

おまけ ー Buttonを非表示にするとクリック判定も消える

要素をhide()で隠すと、判定も消えます。

• Control
  • Button1
  • Button2

extends Control

func _ready() -> void:
	$Button2.hide()

func _on_button_1_pressed() -> void:
	print("ボタン１が押されました")

func _on_button_2_pressed() -> void:
	print("ボタン２が押されました")

Button2をシーンツリーで下に配置していても、hide()で非表示にするとButton2はクリックされません。

まとめ

z-indexで見た目を手前にしてもGUI入力の優先順位が同じように変わるとは限らない。 優先させたいボタンはシーンツリー上で下に配置すれば良い💯

重なったButtonのクリック判定がおかしい場合は、z_indexだけでなくシーンツリー上の配置順も確認しましょう。