クリックで画像を拡大する

2021年05月14日

画像データをクリックすると、ゆっくり拡大する動きをつけてみましょう。

写真をクリックすれば、約2倍の大きさまで拡大していきます。

画像のインポート

UI > 画像からImageオブジェクトを作成します。

Imageエリアが矩形で作成されるので、これを中央に配置します。

画像をインポートします。

Assetsの中で右クリック > 新しいアセットをインポート

テクスチャタイプを「スプライト（2DとUI）」に変更します。

「インポート設定が適用されていません」というダイアログは、適用するを選択します。

Imageを選択し、ソース画像からインポート画像を選択し、アスペクト比を保存にチェックを入れます。

画像を拡大するスクリプト

ClickScale.csを作成して、Imageに追加します。

ClickScale.csを記述しましょう。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ClickScale : MonoBehaviour
{
    public RectTransform photoSize;
    
    void Start()
    {
        photoSize = gameObject.GetComponent<RectTransform>();
    }

    public void ScaleUp() {
         StartCoroutine("ScaleUpStart");
    }

     IEnumerator ScaleUpStart()
    {
        for (int i = 100 ; i < 200 ; i+=10 ){
            photoSize.sizeDelta = new Vector2(i, i);
            yield return new WaitForSeconds(0.1f);
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class ClickScale : MonoBehaviour

{

public RectTransform photoSize;

void Start()

{

photoSize = gameObject.GetComponent<RectTransform>();

}

public void ScaleUp() {

StartCoroutine("ScaleUpStart");

}

IEnumerator ScaleUpStart()

{

for (int i = 100 ; i < 200 ; i+=10 ){

photoSize.sizeDelta = new Vector2(i, i);

yield return new WaitForSeconds(0.1f);

}

RectTransformの幅と高さは、sizeDeltaを使用します。

100から始まって200になるまで、0.1秒おきに10ずつ拡大していきます。

Event Triggerの設定

続いて、スクリプトを実行するためのアクションをつけていきましょう。

Imageを選択し、コンポーネントを追加　> イベント > イベントトリガーの順に選択します。

EventTriggerの新しいイベントタイプを追加をクリック。

クリックしたタイミングなので、「Pointer Click」を選択しました。

次のような手順で選択して、ScaleUp()メソッドを指定します。

プレイして動きを確認しましょう。

＼ Udemyで講座はじめました／

< 前の記事次の記事 >

クリックで画像を拡大する

画像のインポート

画像を拡大するスクリプト

Event Triggerの設定

＼ Udemyで講座はじめました／

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室

クリックで画像を拡大する

画像のインポート

画像を拡大するスクリプト

Event Triggerの設定

＼ Udemyで講座はじめました ／

関連記事

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室

＼ Udemyで講座はじめました／