UnityUnityメモ

Unityで簡単!左クリックでPrefab生成&UIスライダーでサイズ調整をする方法

Unity

1. はじめに

Unityを使ったゲーム開発では、「プレハブ(Prefab)」と「UI」を組み合わせることで、プレイヤーが簡単にインタラクティブな操作を体験できるゲームを作ることができます。たとえば、クリック一つでオブジェクトを生成したり、そのサイズや見た目を調整したりすることが可能です。

これを実現することで、Unity初心者でも「クリックでアイテム生成」といったゲームの基本機能を簡単に取り入れることができます。

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



2. 必要な準備

Unityでマウスクリックを使ってPrefabを生成し、UIスライダーでサイズを調整するには、いくつかの準備が必要です。以下の手順に沿って進めていきましょう。


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

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

  1. Unity Hubを開き、「New Project」をクリック。
  2. テンプレートは「3D」を選び、プロジェクト名を「PrefabAndUISlider」に設定して「Create」をクリックします。

2. プレハブの作成

プレハブは、生成するオブジェクトのテンプレートです。以下の手順でCubeをプレハブ化します:

  1. ヒエラルキー(Hierarchy)ウィンドウで右クリックし、「3D Object」→「Cube」を選択します。
  2. Cubeが作成されたら、その名前を「PrefabCube」に変更します。
  3. Cubeをプロジェクト(Project)ウィンドウにドラッグ&ドロップして、プレハブとして保存します。これでプレハブが完成です!

3. UIスライダーの作成

UIスライダーを追加し、オブジェクトのサイズを調整できるようにします。

  1. ヒエラルキーウィンドウで右クリックし、「UI」→「Slider」を選択します。
  2. 作成されたスライダーの位置を調整します:
    • RectTransformで位置を調整し、画面下部中央に配置します。
  3. インスペクター(Inspector)ウィンドウで「Min Value」を 0.1 に、「Max Value」を 2.0 に設定し、初期値(Value)を 1.0 にします。

4. 空のゲームオブジェクトを作成

スクリプトを管理するための空のゲームオブジェクトを作成します。

  1. ヒエラルキーウィンドウで右クリックし、「Create Empty」を選択します。
  2. 名前を「GameManager」に変更します。

以上で準備は完了です!次は、このプロジェクトにスクリプトを作成し、機能を追加していきます。準備が整ったら、次のステップに進みましょう!



3. スクリプトの作成

ここでは、Prefabを生成し、UIスライダーでサイズを調整するためのスクリプトを作成します。初心者でもわかりやすいように、一つひとつ解説していきます!


① スクリプトを作成する

まず、新しいC#スクリプトを作成します。

  1. プロジェクトウィンドウで右クリックします。
  2. 「Create」→「C# Script」を選びます。
  3. スクリプトの名前を「SpawnWithClick」に設定します。

これでスクリプトが作成されました。


② コードの記述

以下のコードを「SpawnWithClick」スクリプトに記述します。

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

public class SpawnWithClick : MonoBehaviour
{
    public GameObject prefab; // 生成するプレハブ
    private Vector3 mousePosition; // マウスの位置
    public Slider slider; // UIスライダー

    void Start()
    {
        // スライダーをヒエラルキーから取得
        slider = GameObject.Find("Slider").GetComponent<Slider>();
    }

    void Update()
    {
        // UIスライダーを操作中はプレハブを生成しない
        if (EventSystem.current.IsPointerOverGameObject())
        {
            return;
        }

        // マウスの左クリックでPrefabを生成
        if (Input.GetMouseButtonDown(0))
        {
            float scale = slider.value; // スライダーの値を取得
            mousePosition = Input.mousePosition;
            mousePosition.z = 10.0f; // カメラからの距離を設定
            GameObject obj = Instantiate(prefab, Camera.main.ScreenToWorldPoint(mousePosition), Quaternion.identity);
            obj.transform.localScale = new Vector3(scale, scale, scale); // スライダーの値を使ってスケールを設定
        }
    }
}

③ コードの解説

  1. usingステートメント
    • UnityEngine.UI: UI要素(スライダー)を扱うために必要。
    • UnityEngine.EventSystems: マウスがUI要素の上にあるかどうかを確認するために必要。
  2. 変数の宣言
    • prefab: 生成するオブジェクトを格納。
    • slider: スライダーの値を取得してサイズを調整するために使用。
  3. Startメソッド
    • GameObject.Find("Slider"): ヒエラルキー上のスライダーオブジェクトを取得。
  4. Updateメソッド
    • EventSystem.current.IsPointerOverGameObject(): マウスがUI上にある場合はクリックを無視。
    • Input.GetMouseButtonDown(0): 左クリックを検知。
    • Camera.main.ScreenToWorldPoint(mousePosition): 画面上のマウス位置をワールド座標に変換。

④ スクリプトを保存

コードを書き終えたら、Ctrl + S(またはMacの場合はCmd + S)で保存しましょう。

次のステップでは、このスクリプトをUnityのゲームオブジェクトにアタッチして設定していきます!



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

ここでは、作成したスクリプト「SpawnWithClick」をUnityのゲームオブジェクトにアタッチし、プレハブやスライダーを正しく設定する手順を説明します。


① 空のゲームオブジェクトにスクリプトをアタッチ

  1. ヒエラルキー(Hierarchy)ウィンドウで「GameManager」をクリックします。
    もし「GameManager」がまだ作成されていない場合は、以下の手順で作成してください:
    • ヒエラルキーで右クリック → 「Create Empty」を選択。
    • 名前を「GameManager」に変更。
  2. プロジェクト(Project)ウィンドウで作成したスクリプト「SpawnWithClick」を探します。
  3. スクリプトをドラッグ&ドロップして、「GameManager」にアタッチします。

② プレハブを設定

  1. 作成したプレハブ「PrefabCube」をGameManagerのインスペクター(Inspector)ウィンドウの「Prefab」フィールドにドラッグ&ドロップします。

③ スライダーを設定

  1. ヒエラルキーウィンドウで「Canvas」→「Slider」を選択します。
  2. このスライダーをGameManagerのインスペクターで「Slider」フィールドにドラッグ&ドロップします。

④ 設定の確認

  • Prefabフィールドに「PrefabCube」が設定されていることを確認。
  • Sliderフィールドに「Slider」が設定されていることを確認。

これでスクリプトのアタッチと設定が完了しました!次は実行中の動作確認と、必要に応じて改善点を探していきましょう。



5. 実行と確認

ここでは、Unityエディタでプロジェクトを実行して、スクリプトや設定が正しく動作しているかを確認します。


① 実行の準備

  1. Unityエディタの上部にある再生ボタン(Playボタン)をクリックします。
  2. ゲーム画面が表示され、操作できる状態になります。

② 確認内容

1. マウスクリックでPrefabを生成
  • 手順:
    • マウスカーソルをゲーム画面に移動。
    • 左クリックを押すと、マウスの位置にプレハブ(PrefabCube)が生成されるか確認。
  • ポイント:
    • プレハブが指定した位置に生成されているか。
    • 生成されたプレハブがスライダーの初期値(1.0)のサイズになっているか。
2. スライダーでサイズ調整
  • 手順:
    • 画面下部のスライダーをドラッグしてサイズを変更。
    • その状態で再び左クリックし、生成されるPrefabのサイズがスライダーの値に応じて変わるか確認。
  • ポイント:
    • スライダーを動かすと、生成されるプレハブのサイズが大きくなったり小さくなったりするか。
3. UI操作の確認
  • 手順:
    • スライダーを動かしている間に、Prefabが誤って生成されないか確認。
  • ポイント:
    • スライダーを操作中は、Prefabが生成されないことを確認(EventSystem.current.IsPointerOverGameObject()が正しく動作しているか)。

③ エラーの確認と対処

実行中に問題が発生した場合、以下のポイントを確認します:

  1. プレハブが生成されない場合:
    • Prefabフィールドに正しいオブジェクトが設定されているか確認。
    • スクリプト内のInstantiateメソッドに誤りがないか確認。
  2. スライダーでサイズが変わらない場合:
    • スライダーが正しくスクリプトに紐付けられているか確認。
    • スライダーのMin ValueMax Valueの範囲が正しいか確認。
  3. UI操作中にPrefabが生成される場合:
    • EventSystem.current.IsPointerOverGameObject()が有効か確認。
    • スライダーの上にカーソルを置いた状態でクリックしてもPrefabが生成されないことを確認。

これで実行と確認が完了です!動作が期待通りにならない場合は、スクリプトや設定を見直してみてください。次は、応用や改善点について考えていきましょう!



6. 応用と改善ポイント

Prefabの生成やスライダーでのサイズ調整が正常に動作するようになったら、さらに機能を拡張して、より便利で魅力的なゲーム体験を作ることができます。ここではいくつかの応用アイデアと改善ポイントを紹介します。


① 色やマテリアルを変更する

生成されるPrefabにランダムな色やマテリアルを適用すると、見た目にバリエーションを加えられます。

追加コード例
void Update()
{
    if (EventSystem.current.IsPointerOverGameObject())
    {
        return;
    }

    if (Input.GetMouseButtonDown(0))
    {
        float scale = slider.value;
        mousePosition = Input.mousePosition;
        mousePosition.z = 10.0f;

        GameObject obj = Instantiate(prefab, Camera.main.ScreenToWorldPoint(mousePosition), Quaternion.identity);
        obj.transform.localScale = new Vector3(scale, scale, scale);

        // ランダムな色を適用
        Renderer renderer = obj.GetComponent<Renderer>();
        renderer.material.color = new Color(Random.value, Random.value, Random.value);
    }
}

② プレハブの種類を増やす

スクリプトに配列を使うことで、クリックごとに異なるプレハブを生成できるようになります。

追加コード例
public GameObject[] prefabs; // 複数のプレハブを設定
private int prefabIndex = 0;

void Update()
{
    if (EventSystem.current.IsPointerOverGameObject())
    {
        return;
    }

    if (Input.GetMouseButtonDown(0))
    {
        float scale = slider.value;
        mousePosition = Input.mousePosition;
        mousePosition.z = 10.0f;

        // 配列からプレハブを選択して生成
        GameObject obj = Instantiate(prefabs[prefabIndex], Camera.main.ScreenToWorldPoint(mousePosition), Quaternion.identity);
        obj.transform.localScale = new Vector3(scale, scale, scale);

        // 次のプレハブに切り替え
        prefabIndex = (prefabIndex + 1) % prefabs.Length;
    }
}

③ アニメーションの追加

生成されたPrefabにアニメーションを追加して、動きのあるオブジェクトを作りましょう。UnityのAnimatorを使うと簡単に実現できます。

  1. Animator Controllerを作成。
  2. プレハブにアタッチ。
  3. スクリプトでAnimatorのトリガーを設定することで、クリックごとに異なるアニメーションを再生。

④ タグやレイヤーで管理する

生成されたオブジェクトにタグやレイヤーを設定して、特定のオブジェクトだけを選択・操作できるようにします。

コード例
obj.tag = "GeneratedObject";

その後、スクリプトでタグを利用して操作することが可能です。


⑤ パフォーマンスの最適化

オブジェクトが増えすぎるとパフォーマンスに影響を与える場合があります。その場合は以下を検討してください:

  • 古いオブジェクトを削除するDestroy(obj, 5.0f); // 生成後5秒で削除
  • Object Poolingを使用して、生成と削除を効率化。

⑥ プレイヤーインタラクションの拡張

  • クリック回数のカウント: プレイヤーのスコアを増減させる仕組みを追加。
  • タイマー: 一定時間内で何個のPrefabを生成できるか挑戦するミニゲームに応用。

これらの応用や改善を追加することで、より楽しく、充実したゲーム体験を作ることができます!必要に応じて取り入れてみてくださいね。



よくある質問(FAQ)

Q
スライダーが動かない場合、どうすればいいですか?
A

スライダーが正しくスクリプトに紐付けられているか、Findメソッドの名前が正しいか確認してください。

Q
クリック時にPrefabが生成されないのはなぜですか?
A

EventSystem.current.IsPointerOverGameObject()の条件に該当していないか、カメラの設定が正しいか確認しましょう。

Q
他のUI要素にも対応できますか?
A

はい、ボタンやトグルなどのUI要素も同様の方法でスクリプトに追加可能です。