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

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

C#で記述しているならばIdragHandler等のインタフェースの実装でイベントを受け取れるんですが・・・、javascriptではどうやったらいいかわかりません。

UIのドラッグ&ドロップがしたかったんですが、JavaScriptだとインタフェースの実装ってどうやるんでしょ?

後でやり方がわかったので

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

でやり方を記述しました。

インタフェースの実装は一旦忘れて、UIの方からイベントを発生してそれに対応しようと思います。

スポンサーリンク

UIを準備する

ui1

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

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

を参考にしてください。

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

ui4

ui3.png

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

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

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

かなり最小限です。押されたら「押された」と表示し、ドラッグされていたらInput.mousePositionでマウスの位置に画像を移動させます。

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

ゲームオブジェクトが押されたりドラッグされた時にこれらのメソッドを呼び出し実行することになります。

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

では次に『画像が押された』、や『ドラッグされている』、というイベントを受け取れるようにイベントの発生をしてみます。

ImageオブジェクトのインスペクタでAdd ComponentをしEvent→Event Triggerを追加します。
Event Triggerの下にAdd New Event Typeというボタンがあるのでクリックします。

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

ui5

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

ui6

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

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

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

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

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

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

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

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

ui8

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

スポンサーリンク

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

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