このレッスンでは、Cave Engine の UI Elements でユーザーインタラクションを検出する方法を学びます。

マウスカーソルが UI Element の上にホバーしているとき、またはその要素がクリックされたときに識別方法を見ていきます。これらのイベントを使用すると、ゲームプレイ中にプレイヤーに応じてインターフェイスが反応します。

これらのインタラクションは、ボタン、メニュー、設定スクリーン、インベントリインターフェイス、一時停止メニュー、ダイアログオプション、その他多くの UI システムを作成するために不可欠です。

これらのイベントから、Python logic を実行し、インタラクティブな動作を作成し、メニューを開き、UI 要素を変更し、音を再生し、ゲームを開始し、ウィンドウを閉じたり、インターフェイスが必要とする他の機能をトリガーしたりできます。

1. Hoverを許可

マウスカーソルが UI Element の上にホバーしているときに検出するには、希望する UI Element を選択し、Behaviour タブで Allow Hover オプションを有効にします。

Preview では、ゲームを実行せずに UI Element の見た目を視覚化できます。

Allow Hover を有効にした後、プレビュー領域の上にマウスカーソルを移動させて、通常の状態とホバー状態の間の見た目の変化を観察します。

これはインターフェイスの開発中に非常に便利です。要素が期待どおりに視覚的に反応しているかどうかを迅速にテストできます。

例えば、ホバー状態を利用してボタンを明るくしたり、その色を変えたり、透明度を増したり、プレイヤーにその要素が操作可能であることを明確に示すことができます。

2. クリックを許可

UI Element がユーザーのクリックを検出できるようにするには、Allow Click オプションを有効にします。

Allow Hover と同様に、Allow Click の動作も Preview で直接テストできます。

これにより、要素が押されたときの見た目を確認し、小さな視覚調整をテストするためにゲームを頻繁に実行する必要がなくなります。

3. ロジックの実行

UI インタラクションからロジックを実行するには、Allow Hover と Allow Click オプションの左側にある矢印アイコンをクリックします。

ここで、Callbacks を使用できます。

Callbacks を使用すると、UI Element インタラクションに関連するイベントにアクセスでき、マウスカーソルが要素に入ったとき、要素から出たとき、クリックしたとき、またはクリックを放したときにカスタム動作を追加できます。

これらのイベントで実行されるロジックを編集するには、鉛筆アイコンをクリックします。

Hover コールバックをテストするために、各イベントにシンプルなプリントメッセージを追加しましょう。

カーソルが UI Element の上に検出されるとすぐに実行される On Hover In Callback に、インタラクションが検出されたことを確認するためのプリントメッセージを追加します。

次に、カーソルが要素から離れたときに呼び出される On Hover Out Callback に、出発イベントが検出されたときの確認メッセージを追加します。

これにより、カーソルが UI Element エリアに入ったり出たりする正確なタイミングを Console で見ることができます。

ゲームを実行して、マウスカーソルをその上に移動させたり、離したりして UI Element とインタラクトしてください。

プリントメッセージが表示されるタイミングを確認するために Console を観察してください。

これは、UI インタラクションロジックをデバッグするための最も簡単な方法の一つです。イベントが正しく呼び出されていることを確認できます。

Callback の隣にある赤いアイコンは、それが空でないことを示します。言い換えれば、そのイベントによって実行されるロジックやスクリプトが設定されているということです。

このインジケーターは、どのイベントにどの動作が関連付けられているかを視覚的に簡単に識別できます。

インターフェイスが成長するにつれて、これが非常に有用になり、どの UI Elements にすでにインタラクションロジックが設定されているかを迅速に確認できます。

次に、UI Element のクリックイベントを確認するためにプリントメッセージを追加しましょう。

On Click In Callback に、要素の上でクリックが検出された瞬間を示すプリントメッセージを追加します。

次に、On Click Out Callback を使用して、クリックが終了したとき、つまりマウスボタンが放されたときを確認できるプリントメッセージを追加します。

この区別は重要です。なぜなら、いくつかの UI 動作はボタンが最初に押されたときに発生し、他のものはクリックが解放されたときのみ発生するべきだからです。

例えば、Click In の際にボタンを視覚的に押すことができ、Click Out でアクションを確認することができるかもしれません。

ゲームを実行し、要素とインタラクトする際に Console を観察してください。

ホバー、クリック、解放、マウスを UI Element から離したときに、対応するコールバックが実行され、プリントメッセージが Console に表示されるはずです。

これで、Cave Engine で最も基本的な UI インタラクションを検出する方法を知っています。

Allow Hover、Allow Click、およびコールバックを組み合わせることで、メニューを開くボタン、設定スライダー、確認ウィンドウ、一時停止メニューなど、ゲームに必要な実際のインタラクティブインターフェイスを作成し始めることができます。

Cave: ゲームユーザーインターフェイス (ゲームUI) システム

UIインタラクションの検出