クリックした座標を中心にUI上のImageを拡大する 〜DOTweenを使ってみる〜

# はじめに

タイトルにもあります通り、この記事では、無料で使えるアセットであるDOTweenを用いて、クリックした座標を中心にUI上のImageを拡大してみます。


# この記事を書いた背景
現在カスタマサポートをUnityで開発している際に、質問に対するアンサーは”**できるだけ長い文章を避ける**”ことが重要なことに気付きました。そこから、必要な場面には写真を表示し、お客さまにもっと分かりやすいようなものにしようと考えました。そこで、自分はよくある**クリックした座標を中心に拡大し、もう一度クリックしたら元に戻るようなImageを生成したい**と考えたので、せっかくなら触ったことのないDOTweenを用いて実装しようと考えたのです。

下の方にソースコードも載せてありますので、ぜひ採用してみてください！

## 用件定義
### 1. UI.Imageを表示
今回拡大縮小するターゲットとなるImageです。

### 2. クリックするとマウス座標を中心に拡大、もう一度クリックすると元のサイズと位置に戻る
今回のメインの機能です。DOTweenの**DOAnchorPos**と**DOScale**を用いて実装していきます。


# 実装手順

## 1. Asset StoreからDOTweenをインポート
まずは、今回お世話になるアセットをインポートしましょう。

https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

無事にインポートができたら、DOTweenをセットアップしましょう。インポート時に以下のようなウィンドウ(DOtween Utility Panel)が出てくると思いますので、"Setup DOTween..."と書かれた緑色のボタンを押し、コンパイルが完了したら、"Apply"を押して完了です！ 

![スクリーンショット 2022-12-20 4.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609178/e4a366cc-784e-aef0-11dd-b3eef39a7d12.png)

**DOtween Utility Panelが表示されない場合は、Tools→Demigiant→DOtween Utility Panelから表示可能です。**

## 2. Canvas内にターゲットとなるImageを配置する
新規オブジェクトから、UI→Imageを選択しましょう。Imageの名前はTargetImageとし、座標は(0,0,0)としておきます。

## 3. 表示させたい写真を追加する
自分は新しくImagesというフォルダの中にpngの写真をD&Dしました。画像処理でよく使われるおなじみのLennaさんです。

ここで、追加した写真は**必ずTexture TypeをSprite(2D and UI)に変更し、Applyすること**を忘れないように！


![スクリーンショット 2022-12-20 14.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609178/cef37876-d75e-9509-c5e1-92c173a8f4b9.png)


## 3. Targetに追加した写真を表示させる
TargetImageのInspectorウィンドウのImageコンポーネントのSource Imageに先ほど追加した写真をD&Dしましょう。また、このままだと写真が少し小さいので、TargetImageのWidth,Heightを共に400に変更しましょう！

![スクリーンショット 2022-12-20 14.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609178/f721b6af-30d7-cf2f-d35a-cc261a1b087f.png)


## 4. TargetImageのスケールを変更する`ClickImageScale`クラスを記述
名前を`ClickImageScale`としたスクリプトを作成しましょう。作成したら、以下をコピー&ペーストしてください。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; //これ大事！


public class ClickImageScale : MonoBehaviour
{

    //UI関連
    Canvas canvas;
    RectTransform canvasRect;
    RectTransform photoSize;
    Vector2 targetPosition;

    ///拡大機能関連
    float effectDuration;
    float magnification;
    bool isZoomScale;

    void Start()
    {
        photoSize = GetComponent<RectTransform>();
        canvas = transform.parent.GetComponent<Canvas>();
        canvasRect = transform.parent.GetComponent<RectTransform>();

        //２秒間のアニメーションで実行しています！
        effectDuration = 2.0f;

        //拡大率は2.5倍に変更しています！
        magnification = 2.5f;
    }

    public void ScaleUp()
    {
        // クリックしたスクリーン座標
        var screenPoint = Input.mousePosition;
        var camera = canvas.worldCamera;

        // Overlayの場合はScreenPointToLocalPointInRectangleにnullを渡さないといけない
        if (canvas.renderMode == RenderMode.ScreenSpaceOverlay)
        {
            camera = null;
        }

        // クリック位置に対応するRectTransformのlocalPositionを計算する
        targetPosition = Vector2.zero;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            canvasRect, screenPoint, camera, out targetPosition);

        Debug.Log("クリック座標 : " + targetPosition);

        ScaleControl();
        
    }

    void ScaleControl()
    {
        if (!isZoomScale)
        {
            photoSize.DOAnchorPos(-targetPosition, effectDuration);

            photoSize.DOScale(magnification, effectDuration);
            
        }
        else
        {
            photoSize.DOAnchorPos(new Vector2(0,0), effectDuration);

            photoSize.DOScale(1f, effectDuration);
        }

        isZoomScale = !isZoomScale;

    }

}

```

## 5. TargetImageのInspectorを変更する
まずは、`ClickImageScale`クラスをTargetImageにアタッチしまししょう！

次に、クリックを検知するために、EventTriggerコンポーネントを追加し、Add New Event Type → Pointer Clickを追加しましょう。
![スクリーンショット 2022-12-20 22.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609178/c3bc593d-8aaf-9910-e165-bfd4ac25edf5.png)

＋ボタンから、None(Object)にTargetImageをD＆Dし、No Function → ClickImageScale → ScaleUp()を選択しましょう。
![スクリーンショット 2022-12-20 22.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609178/c2091934-871c-aeb7-e1ad-f1dcd0bf0e37.png)

ここまで完了したら、実際に再生して確かめてみましょう！


# ソースコード

https://github.com/goooochi/Qiita_ClickImage




# まとめ
スクリプトに宣言した変数は全てprivateなので、 Prefab化してInstantiateして使っていただいても問題ないです。

ここまで読んでいただき、ありがとうございました！