よくあるUIとしてアイコンをクリックするとパネルが開き、マウスカーソルがその範囲から離れると自動で閉じる、というモノがあります。これはゲームに限らず様々な分野のアプリで見かけるパターンだと思いますが、今回はこれをEvent Triggerコンポーネントを使って作る!という内容です。
自分が作っている、とあるミニゲームでは画面右上にスピーカーアイコンがあり、それをクリックするとパネルが展開され、表示されるスライダーで音楽と効果音の音量が調整出来ます。このパネルを閉じる時、もう一度アイコンをクリックするのは面倒ですよね。だからパネルからカーソルが離れたら自動で閉じるようにしたいです。
このゲームには音楽を管理するスクリプトがあり、そこでオーディオコントロール・パネルの開閉を行うメソッドを定義しています(上写真)。処理内容としては、パネルのゲームオブジェクトへの参照からSetActiveを使って表示を切り替えるだけです。
それをオーディオアイコンとしているButton(Text Mesh Pro)のonClickにアサインしているわけですが、このメソッドをパネルのEvent Triggerの方にも追加します。
パネルはヒエラルキーの追加メニューのUI項目から。そこにEvent Triggerコンポーネントを追加し、後はパネルのインスペクター上でRaycast Target設定にチェックを入れておきます。これが無いとマウスカーソルに反応してくれません。
Event Triggerでは複数の中から自由にイベントを追加でき、今回はPointerExitを選択します。これは対象のUIからカーソルが離れた時に発生するイベントです。
該当するスクリプトを持つゲームオブジェクトを選択し、ドロップボックスからToggleAudioControlPanelメソッドを選択します。これで動作を確認すると、確かにカーソルがパネルから外れると自動で閉じるようになっているはずです。
しかし、このままだとアイコンの上にカーソルをやるとパネルが消えてしまいます。アイコンにカーソルが乗ったことでパネル及びその子UIオブジェクトからExitしたと判定されるからです。
なのでヒエラルキー上でアイコンの方を上にして(ヒエラルキー上で下にあるものが手前に表示される)、コピーしたアイコンをパネル内部に配置します。すると、従来のアイコンはパネルの下に表示される形になり、PointerExitイベントが発生しなくなります。(ボタンを押して閉じる場合に押すのはコピーされたアイコン)
というわけで、Event Triggerコンポーネントを使うと、Unity UIで簡単に自動開閉するパネルを作ることが出来ました。
やはり、こうしたゲームプレイとは直接的に関係のない操作については、出来る限り簡潔でストレスの少ないモノにしていきたいですね!