はじめに
タイトルにもあります通り、この記事では、無料で使えるアセットである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して使っていただいても問題ないです。
ここまで読んでいただき、ありがとうございました！