Unityでインディゲームを作る!

Unityでのゲーム制作を目指し、それに関わる話題についてのブログ

Unity Event Trigger コンポーネントを使って、自動で閉じるコントロールパネルを作る!

 よくあるUIとしてアイコンをクリックするとパネルが開き、マウスカーソルがその範囲から離れると自動で閉じる、というモノがあります。これはゲームに限らず様々な分野のアプリで見かけるパターンだと思いますが、今回はこれをEvent Triggerコンポーネントを使って作る!という内容です。

AutoClosePanel_AudioControlPanel

 自分が作っている、とあるミニゲームでは画面右上にスピーカーアイコンがあり、それをクリックするとパネルが展開され、表示されるスライダーで音楽と効果音の音量が調整出来ます。このパネルを閉じる時、もう一度アイコンをクリックするのは面倒ですよね。だからパネルからカーソルが離れたら自動で閉じるようにしたいです。

 

AutoClosePanel_TogglePanelMethod

 このゲームには音楽を管理するスクリプトがあり、そこでオーディオコントロール・パネルの開閉を行うメソッドを定義しています(上写真)。処理内容としては、パネルのゲームオブジェクトへの参照からSetActiveを使って表示を切り替えるだけです。

 それをオーディオアイコンとしているButton(Text Mesh Pro)のonClickにアサインしているわけですが、このメソッドをパネルのEvent Triggerの方にも追加します。

AutoClosePanel_UIpanel

 パネルはヒエラルキーの追加メニューのUI項目から。そこにEvent Triggerコンポーネントを追加し、後はパネルのインスペクター上でRaycast Target設定にチェックを入れておきます。これが無いとマウスカーソルに反応してくれません。

AutoClosePanel_PointerExit

 Event Triggerでは複数の中から自由にイベントを追加でき、今回はPointerExitを選択します。これは対象のUIからカーソルが離れた時に発生するイベントです。

AutoClosePanel_EventTriggerComponent

 該当するスクリプトを持つゲームオブジェクトを選択し、ドロップボックスからToggleAudioControlPanelメソッドを選択します。これで動作を確認すると、確かにカーソルがパネルから外れると自動で閉じるようになっているはずです。

 

 しかし、このままだとアイコンの上にカーソルをやるとパネルが消えてしまいます。アイコンにカーソルが乗ったことでパネル及びその子UIオブジェクトからExitしたと判定されるからです。

AutoClosePanel_AltAudioIconButton

 なのでヒエラルキー上でアイコンの方を上にして(ヒエラルキー上で下にあるものが手前に表示される)、コピーしたアイコンをパネル内部に配置します。すると、従来のアイコンはパネルの下に表示される形になり、PointerExitイベントが発生しなくなります。(ボタンを押して閉じる場合に押すのはコピーされたアイコン)

 

 というわけで、Event Triggerコンポーネントを使うと、Unity UIで簡単に自動開閉するパネルを作ることが出来ました。

 やはり、こうしたゲームプレイとは直接的に関係のない操作については、出来る限り簡潔でストレスの少ないモノにしていきたいですね!