はじめに

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

この記事を書いた背景

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

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

用件定義

1. UI.Imageを表示

今回拡大縮小するターゲットとなるImageです。

2. クリックするとマウス座標を中心に拡大、もう一度クリックすると元のサイズと位置に戻る

今回のメインの機能です。DOTweenのDOAnchorPosとDOScaleを用いて実装していきます。

実装手順

1. Asset StoreからDOTweenをインポート

まずは、今回お世話になるアセットをインポートしましょう。

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

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することを忘れないように！

3. Targetに追加した写真を表示させる

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

4. TargetImageのスケールを変更する`ClickImageScale`クラスを記述

名前をClickImageScaleとしたスクリプトを作成しましょう。作成したら、以下をコピー&ペーストしてください。

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を追加しましょう。

＋ボタンから、None(Object)にTargetImageをD＆Dし、No Function → ClickImageScale → ScaleUp()を選択しましょう。

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

ソースコード

まとめ

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

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