Unityで画像を動かす簡単な方法｜初心者向けスクリプト解説

1. はじめに

Unityでゲームやアプリを作るとき、UIの要素を動かすことができると、よりダイナミックで魅力的な演出ができますよね。例えば、矢印アイコンを上下に動かしたり、画像をスライドさせたりすることで、プレイヤーに視覚的なヒントを与えることもできます。

でも、「スクリプトを書かないといけないの？」と聞くと、初心者には少し難しく感じるかもしれません。でも安心してください！この記事では、たった数行のコードでUI画像を動かす方法を、初心者にもわかりやすく解説します。

UnityのUIシステムで使われるRectTransformを利用するので、Unityの標準機能をフル活用した方法です。スクリプトの作り方から動作確認まで、一緒に進めていきましょう！

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

2. スクリプトの準備

画像を動かすスクリプトを作成する前に、Unityエディターで少し準備が必要です。ここでは、簡単な手順でスクリプトを作成する方法を説明します。

1. 動かしたい画像を用意する

• 使用したい画像をプロジェクトウィンドウにドラッグアンドドロップして追加します。

• Inspectorウィンドウで「Texture Type」を「Sprite (2D and UI)」に設定してください。

• ヒエラルキー（Hierarchy）ウィンドウに、動かしたい画像（例: 矢印アイコン）を追加します。
• 画像をUIとして扱う場合、**Canvas（キャンバス）**の子要素として配置してください。
• 動かしたい画像を選択し、インスペクター（Inspector）でRectTransformコンポーネントが表示されていることを確認します。

2. スクリプトを作成する

1. プロジェクト（Project）ウィンドウを開きます。
2. 任意のフォルダ（例: Scriptsフォルダ）を右クリックして、
   **「Create」→「C# Script」**を選択。
3. スクリプト名をMoveImageに変更します。

ポイント: スクリプト名は、後でコードを書く際に使われるので、スペルミスがないよう注意しましょう。

3. スクリプトを開く

作成したスクリプトをダブルクリックして、エディター（通常はVisual Studio）で開きます。

次のステップでは、このスクリプトに画像を動かすコードを記述していきます。準備が整ったら、次のセクション「スクリプト内容の解説」に進みましょう！

3. スクリプト内容の解説

ここでは、作成したMoveImageスクリプトに実際のコードを書き、どう動作するかを一緒に確認していきます。

スクリプト全体

以下のコードをスクリプトに貼り付けてください。

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

public class MoveImage : MonoBehaviour
{
    public RectTransform arrow; // 動かす画像の参照
    private int counter = 0; // カウンター変数
    private float move = 0.5f; // 移動量（速度）

    void Update()
    {
        // 画像を上下に動かす
        arrow.position += new Vector3(0, move, 0);
        counter++;

        // カウンターが一定値に達したら方向を反転
        if (counter == 100)
        {
            counter = 0;
            move *= -1; // 移動方向を逆にする
        }
    }
}

コードの解説

1. public RectTransform arrow;
   • RectTransform型の公開変数です。
   • UnityのUI要素（画像など）を操作するために使用されます。
   • 後ほど、インスペクターで動かしたい画像をこの変数に割り当てます。
2. private int counter = 0;
   • 動きのカウントを記録する変数です。
   • 画像が一定距離動いたら反転する仕組みに必要です。
3. private float move = 0.5f;
   • 画像が1フレームごとにどれだけ移動するかを決めます。
   • 値を変更することで移動速度を調整できます。
4. arrow.position += new Vector3(0, move, 0);
   • arrowの位置を毎フレーム上下に移動させます。
   • new Vector3(0, move, 0)は、X方向は動かさず、Y方向に移動するベクトルです。
5. if (counter == 100)
   • カウンターが100に達すると、移動方向を反転します。
   • これにより、画像が上下に動き続けるようになります。
6. move *= -1;
   • 移動量に-1を掛けて正負を反転し、上下方向を切り替えます。

次に進む前に確認すること

• コードにミスがないか確認してください。
• 特に、arrowやcounterなどのスペルミスには注意！

これで、画像を動かすスクリプトの内容が完成しました。次のステップでは、このスクリプトをUnityエディターで設定し、実行する方法を解説します！

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

スクリプトを作成したら、Unityエディターでそれを設定し、動作するようにします。以下の手順に従ってください。

1. 空のゲームオブジェクトを作成する

1. ヒエラルキー（Hierarchy）ウィンドウを右クリックします。
2. **「Create Empty」**を選択して、空のゲームオブジェクトを作成します。
3. 作成したオブジェクトの名前をわかりやすくMoveControllerに変更します。

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

1. プロジェクトウィンドウで、先ほど作成したMoveImageスクリプトを探します。
2. このスクリプトをドラッグ＆ドロップして、MoveControllerオブジェクトにアタッチします。
3. MoveControllerを選択し、インスペクター（Inspector）でMoveImage (Script) が表示されていることを確認します。

3. 矢印画像をスクリプトに割り当てる

1. ヒエラルキーで動かしたい画像（例: 矢印アイコン）を選択します。
2. インスペクターでその画像にRectTransformがアタッチされていることを確認します。
3. MoveControllerオブジェクトを選択し、インスペクターのMoveImage (Script) セクションを見ます。
4. arrowフィールドに、矢印画像をドラッグ＆ドロップします。

4. 確認

すべて正しく設定できたら以下を確認しましょう：

• MoveControllerにスクリプトがアタッチされている。
• arrowフィールドに、動かしたい画像が設定されている。

次はプレイモードで動作を確認します。以下のステップで実際に矢印が動くか確認してみましょう！

5. 実行してみよう

ここまでの設定が完了したら、Unityのプレイモードを使ってスクリプトが正しく動作するか確認しましょう！

1. プレイモードを開始する

1. Unityエディターの上部にある再生ボタン（▶）をクリックします。
2. ゲームビュー（Gameビュー）に切り替え、矢印画像が上下に動いているか確認してください。

2. 正常に動作していればOK！

• 矢印画像が上下にスムーズに動いていれば成功です。
• 動かない場合は以下の項目をチェックしてください。

トラブルシューティング

Q1: 矢印画像が動かない
A: スクリプトのarrowフィールドに画像（RectTransform）が正しく設定されているか確認してください。

Q2: 動きが速すぎる/遅すぎる
A: スクリプト内のmoveの値を調整してください。値を小さくすると遅く、大きくすると速くなります。

Q3: 画像が正しい位置で動かない
A: ヒエラルキーで画像の初期位置を確認してください。RectTransformのPositionを適切に設定しましょう。

3. 実験してみよう！

• counterの値やmoveのスピードを調整して、自分好みの動きにカスタマイズしてみましょう。
• 複数の画像を動かしたい場合は、同じスクリプトを別のオブジェクトに割り当てると良いです。

これで画像を動かすスクリプトの実行は完了です！ぜひいろいろな場面で活用してみてくださいね。次のセクションでは、よくある質問に答えていきます！

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

ここでは、スクリプトを使った画像移動に関してよく寄せられる質問とその回答をまとめました。ぜひ参考にしてください！