UnityのUIのクリックやドラッグのイベントを受け取る

今回はUIのImage画像等をクリックやドラッグした時にイベントを受け取れるようにしたいと思います。

C#で記述しているならばIdragHandler等のインタフェースの実装でイベントを受け取れますが、今回はEvent Triggerコンポーネントを使って行いたいと思います。

C#でインタフェースの実装でイベントを起こす場合は

Unityでマウスイベントのインタフェースの実装をしてマウスイベントを実行出来るようにします。またレイキャストを設定し3Dゲームオブジェクトでもマウスイベントを処理できるようにしていきます。

JavaScriptでのインタフェースの実装は、

UnityのJavaScriptでクラスやインタフェースの作成方法を学び、イベントの受け取りで実際に使用してみます

を参照してください。

スポンサーリンク

UIを準備する

ui1

まずは上の画像のようにUIを作成します。

UIに関しては

Unityでタイトル画面を作成し、スタートボタンを押した時にゲームシーンへ遷移させ、ゲーム終了ボタンを押した時はゲームのプラットフォームに応じて処理わけする機能を作成します。

を参考にしてください。

次にImageのインスペクタでSource Imageに何か画像を指定します。

ui4

ui3.png

画面上は上のようになります。

人が映っていますが、今回の記事とは全く関係がありません。(^_^;)

イベントを受け取った時の処理を記述する

画像がクリックされた時やドラッグされた時に何かしらのアクションをしたいので、Imageに新しいスクリプトReceiveEventという新しいスクリプトを作り設定します。

最小限の処理のみ記述しています。

UIのイメージが押されたらMyPointerDownUIメソッドを呼び出し「押された」とコンソールに表示し、ドラッグされていたらMyDragUIメソッドを呼び出しInput.mousePositionでマウスの位置に画像を移動させます。

ドラッグ中はマウスポインタに画像がついてきます。

UIからイベントを発生させる

次に『画像が押された』、や『ドラッグされている』、というイベントを発生をさせます。

ImageオブジェクトのインスペクタでAdd ComponentをしEvent→Event Triggerを追加します。

Event Triggerの下にAdd New Event Typeというボタンがあるのでクリックします。

そこでPointer DownとDragを追加します。

ui5

Pointer DownはEvent Triggerコンポーネントが取り付けてあるゲームオブジェクトが押された時にイベントを発生し、
Dragはドラッグされている時にイベントを発生させます。

次に赤の+をクリックします。

ui6

赤い囲いの中にはイベントを受け取るオブジェクト(ReceiveEventを設定したオブジェクトImage)をドラッグ&ドロップします。

イベントトリガーのイベントリスナーを設定

No Functionとなっているところをクリックし、Pointer DownにはスクリプトReceiveEventのMyPointerDownUI、DragにはMyDragUIをそれぞれ設定します。

上の画像のように選択します。

これでこのImageというUIが押された時やドラッグされると指定したスクリプトのメソッドが実行されるようになります。

イベントトリガーにMyPointerDownとMyDragUIメソッドを設定

最終的にEvent Triggerは上のようになります。

それではUnityの実行ボタンを押して試してみましょう。

ui8

上のような感じになりました。

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます