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

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

はじめに

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

Unity uGUI のボタン

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

この記事でのバージョン

Unity 2019.4.20f1

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

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

Unity の uGUI ボタン

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

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

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

Button コンポーネント

Button の「Interactable」は有効か

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

uGUI ボタンの Interactable

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

uGUI ボタンの Interactable の ONとOFF

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

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

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

Graphic Raycaster コンポーネント

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

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

子の Canvas に関する当たり判定

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

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

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

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

Graphic Raycaster の Blocking Mask

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

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

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

Event System オブジェクト

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

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

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

テキストとボタンオブジェクト

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

Text オブジェクトの当たり判定範囲

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

Text の Raycast Target

Raycast Target は Image コンポーネントにも存在します。処理の負荷削減にも繋がるため、タッチ判定が不要な UI の Raycast Target は OFF にしておくことをオススメします

おわりに

ボタンの当たり判定が反応しない時のトラブルシューティングをいくつか紹介してきました。この記事が問題解決のお役に立てれば幸いです。

紹介した方法は全ての原因を網羅しているわけではなく、上記以外が原因でボタンが押せない現象が起こる可能性もあります。ご了承下さい。