スポンサーリンク
UnityUnityメモ
C#スクリプトUIスクリプトUnityUnityチュートリアルゲーム開発初心者向け画像ズーム

Unity初心者向け！画像をクリックでゆっくり拡大する簡単な方法

Unity
2024.02.09

1. はじめに

Unityでゲームやアプリを作るとき、インタラクティブなUI（ユーザーインターフェイス）を作りたいと思うことがありますよね。その中でも、画像をクリックするとゆっくりと拡大する機能は、特に写真ビューアやギャラリーアプリなどでよく使われる便利な機能です。

この記事では、Unity初心者でも分かりやすく、画像をクリックしたときにスムーズに拡大・縮小する機能を実装する方法を解説します。コードを書いたことがない方でも安心して進められるよう、手順を一つずつ丁寧に説明します。

この記事を読むことで、以下のことが学べます：

  • 画像をクリックで拡大する基本的な仕組み
  • Unityでのスクリプト作成方法
  • 簡単なアニメーションをコードで実現する方法

では、さっそく始めてみましょう！

Unityを触ったことがないという方はコチラの記事から見てみてください！

Unityの使い方①基本とインストール

2. 必要な準備

画像をクリックするとゆっくり拡大する機能を実装するために、まずは準備が必要です。以下の手順を参考に、Unityプロジェクトをセットアップしましょう。

1. Unityプロジェクトを作成

Unityを起動して、新しいプロジェクトを作成します。

  1. Unity Hubを開き、「New Project」をクリック。
  2. テンプレートは「2D」を選び、プロジェクト名を入力して「Create」をクリック。

2. UIキャンバスの作成

Unityの使い方⑪ UI（ユーザーインターフェース）を作ってみよう

画像を表示するために、UIキャンバスを作成します。

  1. ヒエラルキーウィンドウを右クリック。
  2. 「UI」→「Canvas」を選択。
  3. キャンバスがシーンに追加されたことを確認します。

3. Imageオブジェクトの作成

画像を表示するためのImageオブジェクトを作成します。

  1. キャンバスを右クリック。
  2. 「UI」→「Image」を選択。
  3. Imageオブジェクトが作成されたら、名前を「TargetImage」に変更します。

4. 画像の設定

  1. Imageオブジェクトの「Inspector（インスペクター）」ウィンドウで「Source Image」を設定します。
    • 任意の画像をプロジェクトにドラッグ＆ドロップして「Source Image」に適用します。
  2. サイズや位置を調整して、画面中央に配置します。

5. スクリプトフォルダの作成

スクリプトを管理しやすくするため、プロジェクトウィンドウで以下の手順を行います。

  1. 「Assets」フォルダを右クリック。
  2. 「Create」→「Folder」を選び、フォルダ名を「Scripts」にします。

これで、基本的な準備は完了です！次は、画像をクリックすると拡大するスクリプトを作成していきましょう！



3. スクリプトの作成手順

次に、画像をクリックするとゆっくり拡大するスクリプトを作成していきます。一歩ずつ進めていきましょう！

Unityの使い方⑤C#スクリプトを作成してみよう

1. スクリプトを作成

  1. プロジェクトウィンドウで「Scripts」フォルダを右クリックします。
  2. 「Create」→「C# Script」を選択します。
  3. スクリプト名を ImageZoomer と入力します。

2. スクリプトを編集

作成した ImageZoomer スクリプトをダブルクリックして開き、以下のコードを記入します。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ImageZoomer : MonoBehaviour, IPointerClickHandler
{
    public Image targetImage;       // 拡大する対象のImage
    public float zoomSpeed = 1f;    // ズーム速度
    private bool isZooming = false; // 拡大中かどうか
    private float targetScale = 1f; // 目標の拡大率
    private Vector3 originalScale;  // 元のサイズ

    void Start()
    {
        if (targetImage != null)
        {
            // Imageの元のスケールを記録
            originalScale = targetImage.transform.localScale;
        }
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        if (isZooming)
        {
            // ズームアウト
            targetScale = 1f;
        }
        else
        {
            // ズームイン
            targetScale = 2f; // 倍率を調整可能
        }
        isZooming = !isZooming; // 状態を切り替え
    }

    void Update()
    {
        if (targetImage.transform.localScale != originalScale * targetScale)
        {
            // スムーズに拡大縮小する
            targetImage.transform.localScale = Vector3.Lerp(
                targetImage.transform.localScale, 
                originalScale * targetScale, 
                zoomSpeed * Time.deltaTime
            );
        }
    }
}

3. スクリプトのポイント解説

  • Start 関数
    画像の元のサイズ（スケール）を取得して記録します。
  • OnPointerClick 関数
    画像をクリックすると、ズームイン（拡大）かズームアウト（縮小）を切り替えます。倍率（targetScale）を変更して実現します。
  • Update 関数
    Vector3.Lerp を使って、スムーズに画像のサイズを変更します。これにより、急激ではなく自然なアニメーションになります。

using 文

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
  • UnityEngine：Unityの基本的なクラスや関数を使うためのもの。
  • UnityEngine.UI：ImageなどのUI要素を操作するためのもの。
  • UnityEngine.EventSystems：ユーザーの入力（クリックやタッチ）に対応するためのもの。

クラス宣言

public class ImageZoomer : MonoBehaviour, IPointerClickHandler
  • ImageZoomer：スクリプトの名前です。
  • MonoBehaviour：Unityのスクリプトがゲームオブジェクトにアタッチできるようにするための基本クラス。
  • IPointerClickHandler：マウスやタッチのクリックイベントを処理するためのインターフェースです。

変数の定義

Unityの使い方⑥ 変数を使ってオブジェクトを動かしてみよう
public Image targetImage;       // 拡大する対象のImage
public float zoomSpeed = 1f;    // ズーム速度
private bool isZooming = false; // 拡大中かどうか
private float targetScale = 1f; // 目標の拡大率
private Vector3 originalScale;  // 元のサイズ
  • targetImage：ズームする対象となるUIのImageを設定します。Inspectorから指定可能。
  • zoomSpeed：ズームの速さを設定します。大きい値にするとズームが速くなります。
  • isZooming：今ズーム中かどうかを記録するフラグ。
  • targetScale：目標の拡大率（通常時は1倍、ズームイン時は2倍）。
  • originalScale：画像の元のサイズを記録しておく変数。

Start メソッド

void Start()
{
    if (targetImage != null)
    {
        // Imageの元のスケールを記録
        originalScale = targetImage.transform.localScale;
    }
}
  • ゲームが始まったときに、targetImageの元のサイズを記録します。
  • もし、targetImageが設定されていない場合は何もしません。

OnPointerClick メソッド

public void OnPointerClick(PointerEventData eventData)
{
    if (isZooming)
    {
        // ズームアウト
        targetScale = 1f;
    }
    else
    {
        // ズームイン
        targetScale = 2f; // 倍率を調整可能
    }
    isZooming = !isZooming; // 状態を切り替え
}
  • クリック時の処理を記述。
  • isZoomingがtrueの場合（すでにズームイン中）：
    • 画像を元のサイズ（1倍）に戻します。
  • isZoomingがfalseの場合（通常のサイズのとき）：
    • 画像を2倍に拡大します。
  • クリックするたびにisZoomingの状態が切り替わります。

Update メソッド

void Update()
{
    if (targetImage.transform.localScale != originalScale * targetScale)
    {
        // スムーズに拡大縮小する
        targetImage.transform.localScale = Vector3.Lerp(
            targetImage.transform.localScale, 
            originalScale * targetScale, 
            zoomSpeed * Time.deltaTime
        );
    }
}
  • 毎フレーム実行される部分。
  • 現在のスケールが目標スケール（originalScale * targetScale）と異なる場合、徐々にその値に近づけます。
    • Vector3.Lerp：
      • 2つの値（現在のスケールと目標のスケール）をスムーズに補間します。
      • zoomSpeed：ズームの速さを調整。
      • Time.deltaTime：フレームごとの経過時間でスムーズな動きを実現。

2. スクリプト全体の動き

  1. 開始時：
    • 画像の元のサイズを記録。
  2. クリック時：
    • クリックされたら、現在の状態（ズームイン or ズームアウト）に応じて目標のスケールを変更。
  3. フレームごとの更新：
    • 画像のスケールが目標値に向かって滑らかに変化する。



4. スクリプトのアタッチ

作成したスクリプトをシーン内のオブジェクトに適用する方法を説明します。このステップでは、スクリプトが正しく動作するように設定します。

1. ヒエラルキーでターゲット画像を選択

  1. ヒエラルキーウィンドウで、クリックで拡大したい画像（例: TargetImage）を選択します。
  2. 画像が選択されると、インスペクターウィンドウにそのオブジェクトの設定が表示されます。

2. スクリプトをアタッチ

スクリプトをオブジェクトにアタッチするには、次の手順を行います：

  1. プロジェクトウィンドウで、先ほど作成した ImageZoomer スクリプトを探します。
  2. このスクリプトをクリックし、ドラッグして TargetImage にドロップします。
    • インスペクターに ImageZoomer コンポーネントが追加されていることを確認してください。

3. スクリプトの設定

  1. インスペクターの ImageZoomer コンポーネントを確認します。
  2. Target Image フィールドに TargetImage をドラッグ＆ドロップして割り当てます。
  3. ズーム速度（Zoom Speed）を調整する場合、適切な値を設定します（例: 1 や 2）。

4. UI用のイベントシステムを確認

画像クリックイベントを受け取るために、シーンにイベントシステムが必要です。

  1. ヒエラルキーウィンドウで、Event System オブジェクトが存在しているか確認します。
  2. もし存在しない場合、ヒエラルキーを右クリックして「UI」→「Event System」を選択して追加してください。

これでスクリプトのアタッチは完了です！次は、プレイモードで実行して機能をテストしてみましょう。問題があれば、設定やスクリプトを見直してください。



5. 実行して確認

最後に、実際にプレイモードで機能を確認しましょう。スムーズに画像が拡大・縮小するかをテストします！

1. シーンを保存

  1. 作業内容を保存するために、Ctrl + S（Command + S） を押します。
  2. 適当な名前（例: ImageZoomTest）でシーンを保存します。

2. プレイモードを開始

  1. Unityエディター上部の「Play」ボタン（三角マーク）をクリックします。
  2. シーンが実行され、クリックで拡大・縮小する機能が動作するか確認します。

3. 動作確認のポイント

  • クリック時の動作
    • 画像をクリックすると、ゆっくりと拡大するか確認します。
    • 再度クリックすると、縮小するか確認します。
  • ズーム速度の確認
    • ズームイン・アウトが滑らかに動作しているかをチェックします。
    • ズーム速度が速すぎたり遅すぎたりする場合は、スクリプトの Zoom Speed 値を調整してください（例: 1 → 2 など）。

4. ズーム倍率の調整

拡大・縮小の倍率が希望に合わない場合は、以下を調整してください：

  1. スクリプト内の targetScale の値を変更します（例: 2f → 1.5f）。
  2. 変更後、再度プレイモードで動作を確認します。

5. トラブルシューティング

もしうまく動作しない場合、以下をチェックしてください：

  • スクリプトの設定: Target Image フィールドに正しいImageオブジェクトが割り当てられているか確認します。
  • イベントシステム: シーン内に「Event System」が存在するかを確認してください。

以上で、画像クリックでゆっくり拡大・縮小する機能の実装と確認は完了です。これを応用すれば、ほかのUI要素にも簡単に同じ機能を追加できますよ！
次はカスタマイズのアイデアや応用例にもチャレンジしてみましょう！



あわせて読みたい

画像やクリック操作に関する実装に興味がある方は、以下の記事もぜひご覧ください！

6. よくある質問（Q&A）

ここでは、画像拡大機能を実装する際によくある疑問とその解決方法を紹介します。トラブルがあったときや、カスタマイズしたいときの参考にしてください！

Q
画像がスムーズに拡大・縮小しません。どうしたらいいですか？
A

以下をチェックしてください：

  1. スクリプトの Zoom Speed 値が適切か確認してください（小さすぎると動きが遅くなります）。
  2. Target Image フィールドに正しいImageオブジェクトが設定されているか確認してください。
  3. シーンに Event System が追加されていることを確認してください。
Q
拡大倍率を変更したい場合はどうすればいいですか？
A

スクリプト内の targetScale の値を変更してください。

csharpコードをコピーするtargetScale = 2f; // 倍率を「2倍」から好きな値に変更

例えば、targetScale = 1.5f; に設定すると、1.5倍のサイズに拡大されます。

Q
拡大速度をもっと速くするにはどうすればいいですか？
A

スクリプトの Zoom Speed の値を大きくすることで調整できます。

  • 例: zoomSpeed = 1f; を zoomSpeed = 3f; に変更すると、動作が速くなります。
Unity Asset Storeで手に入るゲーム制作が楽になるアセット

関連記事:

Unityのスクリプト設計を改善！SOLID原則で整理する方法 【Unity】2Dタワーディフェンスゲームの作り方②！武器配置と弾の発射を実装 【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法 【Unity初心者向け】2Dブロック崩しゲームの作り方を解説！

※当サイトはアフィリエイト広告を利用しています。リンクを経由して商品を購入された場合、当サイトに報酬が発生することがあります。

※本記事に記載しているAmazon商品情報（価格、在庫状況、割引、配送条件など）は、執筆時点のAmazon.co.jp上の情報に基づいています。
最新の価格・在庫・配送条件などの詳細は、Amazonの商品ページをご確認ください。

スポンサーリンク