画面をタッチして操作する代表的なのが「ボタン(button)を押下」などがあるかと思います。
ですが、ボタンのように押すだけではなく、ドラッグしてモノを動かすなどがあるかと思います。
本記事では上のようにunityでイメージ（画像）を動かす方法について解説していきます。
imageをドラッグして動かす方法
今回は2Dにて「imageをドラッグ操作で動かす」という内容でやってみます。
流れは下の通りです。
１．imageを動かすためのスクリプトを作成する。
２．imageに対しての『TriggerEvent』を追加し、ドラッグ操作を検出できるようにする。
imageにアタッチするスクリプトを作成
まずはimageにアタッチするスクリプト(ImageController)を作成します。
下がimageを動かすコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
using UnityEngine; public class ImageController : MonoBehaviour { private Vector3 _previousPos = Vector3.zero; private Vector3 _currentPos = Vector3.zero; private bool _isDrog = false; // 「ドラッグされているか」の真偽値 void Update() { if (Input.GetMouseButtonDown(0)) { _previousPos = Input.mousePosition; } if (_isDrog == true) { if (Input.GetMouseButton(0)) { _currentPos = Input.mousePosition; Vector3 _diffDistance = _currentPos - _previousPos; _diffDistance *= 1.0f; this.transform.GetComponent<RectTransform>().position -= new Vector3(-_diffDistance.x, -_diffDistance.y); _previousPos = Input.mousePosition; } } } // ドラッグ中に呼び出される処理 public void OnDrog() { _isDrog = true; } // ドラッグ終了時に呼び出される処理 public void OffDrog() { _isDrog = false; } } |
今回はドラッグ中には「OnDrog()」、ドラッグ終了時には「OffDrog()」を呼び出し、ドラッグ中にimageが動くようにしています。
※この２つのメソッドがないと、画面のどこをタッチしてもimageが動いてしまうので注意です。
ここで作成したスクリプトを動かしたいimageにアタッチしてください。
上のコードの詳細が知りたい方は下の記事を読んでみてください。
ドラッグ中・終了を検出する「TriggerEvent」の設定
次に「imageに対してのドラッグ操作時に処理が呼び出される」ようにしてみます。
今回はimageなどに対してのマウス操作を検出できる『TriggerEvent』コンポーネントを使います。
・インスペクターの一番下にある『Add Component』をクリックし、「TriggerEvent」を追加する。
・TriggerEventコンポーネントの下にある『Add New Event Type』をクリックし、「BeginDrag」「EndDrag」を選択する。
・２つのイベントにアタッチしたスクリプトをドロップし、スクリプトにあるドラッグ中・終了時に呼び出したい処理を選択する。
※今回は「BeginDrag」にはドラッグ時に呼び出したい処理(OnDrogメソッド)、「EndDrag」にはドラッグ終了時に呼び出したい処理(OffDrogメソッド)を設定している。
これで実行してみるとimageをドラッグ中にカーソルに合わせて動くようになっています。
ゲームオブジェクトを動かしたい場合
本記事はimageを操作する方法を解説しました。
ですが、スプライト付きのゲームオブジェクトを動かしたいという方もいるかもしれません。
その場合には、そのオブジェクトに『image※スプライト設定を忘れずに』『Canvas』『GraphicRaycaster』を追加すれば動くようになります。
スポンサーリンク
