【Unity】ボタンの当たり判定が反応しない時に確認すること【uGUI】

Unity での開発では uGUI のボタン(Button)を使う機会が多々ありますが、様々な原因でボタンを押しても何も効かず反応しないことがあります。

本記事ではボタンの当たり判定が反応しない時のトラブルシューティングを紹介します。

この記事でのバージョン

Unity 2019.4.20f1

uGUI ボタンの当たり判定が反応しない時に確認すること

以下を前提条件とします。
・Canvas 以下にある uGUI の Button
・Button にはクリックイベントを追加済み

Button コンポーネントは有効か

Button コンポーネントが有効であるか確認します。

Inspector ビューにて各コンポーネント名の左側にあるチェックボックスより、コンポーネントの ON / OFF 切り替えが可能です。デフォルトは ON ですが、このチェックボックスが OFF だとボタンの効果が無効になります。

Button の「Interactable」は有効か

Button の「Interactable」が有効であるか確認します。

Interactable が OFF だとボタンが押せない状態になります。初期設定ではInteractable が OFFの時にボタンもグレーに変わるので、見た目で判断できるかと思います。

Image の「Raycast Target」は有効か

Button と同じ階層にある Image の「Raycast Target」が有効であるか確認します。

Raycast Targetは、UI要素（例えばボタン）がレイキャストのターゲットとして動作するかどうかを制御するプロパティです。

レイキャストとは、一点から特定の方向に向かって「レイ」または線を投射し、その線が交差するオブジェクトを検出する処理のことです。

Raycast Targetがオンになっている場合、そのUI要素（例えばボタン）はレイキャストによって検出されます。つまり、マウスクリックやタッチ入力などによる対話が可能となります。

逆にRaycast Targetがオフになっている場合、そのUI要素はレイキャストによって無視され、ユーザーの入力を受け付けなくなります。

Canvasに「Graphic Raycaster」はアタッチされているか

Button を設置した Canvas に「Graphic Raycaster」がアタッチされているか確認します。

Graphic Raycaster は、画面上のボタンやオブジェクトに対してのタッチやクリック等の判定を取得するのに必要なコンポーネントです。そのためこれが無いと当たり判定が取れません。

Canvas の中に Canvas がある場合は注意が必要です。

以下の画像では「Canvas」の子オブジェクトに「ChildCanvas」があります。「Canvas」オブジェクトに Graphic Raycaster がアタッチされていても「ChildCanvas」オブジェクトに Graphic Raycaster がない場合は「Button2」の当たり判定は反応しません。

「Button2」の当たり判定も有効にするには「ChildCanvas」オブジェクトにも Graphic Raycaster を付ける必要があります。

Graphic Raycaster の「Blocking Mask」設定は適切か

Graphic Raycaster の「Blocking Mask」にて、当たり判定を取得する Layer を設定できます。項目にチェックの入ってるレイヤーは当たり判定が取れます。

デフォルトでは Everything（全てのレイヤーが対象）が設定されているのでこの設定が原因になることは稀ですが、対象のボタンオブジェクトの Layer を確認して Blocking Mask の設定が適切かどうか確認して下さい。

シーンに「Event System」は存在するか

EventSystem はキーボードやタッチなどからユーザーからの入力を受け取り、イベントを送信するコンポーネントです。

Canvas を生成した時に Event System も自動で生成されますが、このオブジェクトがシーンに存在しなかったり、オブジェクトのアクティブやコンポーネントが OFF になっている場合はボタンが無効になります。

他の UI がボタンの当たり判定に重なっていないか

他の UI の当たり判定がボタンの当たり判定と重なってしまい、ボタンを押しても反応しないケースがあります。

例えば以下の画像のように「↓ Click Here ↓」と書かれた Text オブジェクトと Button オブジェクトがあるとします。見た目上は問題なさそうですが、この Button を押しても何も反応しません。

これは Text オブジェクトの当たり判定範囲がボタンの範囲と重なっているため、ボタンが Text に遮られてしまっています（以下の画像参照）。当たり判定の範囲の確認方法は、対象のオブジェクトを選択して「Rect Tool」モードを押すことで矩形が表示されます。

当たり判定の範囲は Rect Transform の Width と Height の値を変えることで変更できますが、そもそも Text オブジェクトは文字を表示するだけで当たり判定は必要ありません。Text コンポーネントの「Raycast Target」を OFF にすることで、Text の当たり判定を無効にできます。