【unity】画像を動かす【UI(image)をドラッグして動かす】

画面をタッチして操作する代表的なのが「ボタン(button)を押下」などがあるかと思います。

ですが、ボタンのように押すだけではなく、ドラッグしてモノを動かすなどがあるかと思います。

本記事では上のようにunityでイメージ（画像）を動かす方法について解説していきます。

imageをドラッグして動かす方法
1. imageにアタッチするスクリプトを作成
2. ドラッグ中・終了を検出する「TriggerEvent」の設定
ゲームオブジェクトを動かしたい場合

imageをドラッグして動かす方法

今回は2Dにて「imageをドラッグ操作で動かす」という内容でやってみます。

流れは下の通りです。

１．imageを動かすためのスクリプトを作成する。

２．imageに対しての『TriggerEvent』を追加し、ドラッグ操作を検出できるようにする。

imageにアタッチするスクリプトを作成

まずはimageにアタッチするスクリプト(ImageController)を作成します。

下がimageを動かすコードになります。

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;
    }
}

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にアタッチしてください。

上のコードの詳細が知りたい方は下の記事を読んでみてください。

【unity】カメラを制御する【縦横スクロール】

よく2Dゲームのカメラワークで『横（縦）スクロール』がよく使われるかと思います。本記事ではその横スクロールを簡単に実現できるコードを紹介します。シンプルなカメラワークを求めている方はぜひ参考にしてみてください。カメラを制...

ドラッグ中・終了を検出する「TriggerEvent」の設定

次に「imageに対してのドラッグ操作時に処理が呼び出される」ようにしてみます。

今回はimageなどに対してのマウス操作を検出できる『TriggerEvent』コンポーネントを使います。

・インスペクターの一番下にある『Add Component』をクリックし、「TriggerEvent」を追加する。

・TriggerEventコンポーネントの下にある『Add New Event Type』をクリックし、「BeginDrag」「EndDrag」を選択する。

・２つのイベントにアタッチしたスクリプトをドロップし、スクリプトにあるドラッグ中・終了時に呼び出したい処理を選択する。

※今回は「BeginDrag」にはドラッグ時に呼び出したい処理(OnDrogメソッド)、「EndDrag」にはドラッグ終了時に呼び出したい処理(OffDrogメソッド)を設定している。

これで実行してみるとimageをドラッグ中にカーソルに合わせて動くようになっています。

ゲームオブジェクトを動かしたい場合

本記事はimageを操作する方法を解説しました。

ですが、スプライト付きのゲームオブジェクトを動かしたいという方もいるかもしれません。

その場合には、そのオブジェクトに『image※スプライト設定を忘れずに』『Canvas』『GraphicRaycaster』を追加すれば動くようになります。