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

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

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

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

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

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

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

スポンサーリンク

UIを準備する

ui1

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

Unityでスタートボタン、ゲーム終了ボタンのUIを作成する
Unityでタイトル画面に表示するスタートボタン、ゲーム終了ボタンのUIを作成していきます。シーン移動や画面遷移をしたい時にボタンを押す事で移動出来るようにします

を参考にしてください。


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

ui4

ui3.png

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

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

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

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

少し混乱させるかもしれませんが、clickUIとdragUIは自前の関数です。
ゲームオブジェクトがクリックやドラッグされた時にこれらの関数は呼び出され実行することになります。

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

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

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

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

ui5

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

ui6

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

ui7

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

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

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

ui2

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

今回はクリックの動作と言ってますが、実際は画像が押された時になります。
Clickのイベントだとドラッグ終了時にもイベントが発生する為にこちらにしました。
自前の関数はclickUIとしてるのは混乱の元になりますね・・・・(+_+)

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

ui8

上のような感じになりました。
JavaScriptだとどうしてもイベントの受け取りが出来なく焦っていましたが、
よく考えたらUIの記事の所でイベントの発生をやっていたのを忘れていました・・・・。

UIのイベント処理をJavaScriptでやりたい方はぜひ試してみてください。