👻

# [Unity] 宝箱から取得したアイテム情報を画面に表示させる。part2

2022/04/06に公開

Unity

[Unity] 宝箱から取得したアイテム情報を画面に表示させる。part2

やりたいこと

・宝箱をあけたらアイテムを取得したい
・ScriptableObjectからアイテムを取得したい。
・取得したアイテムをゲーム画面に表示したい。
・一定時間をかけ、画面上部外から画面上部に表示したい。
・表示するObjectはPrefabsとしたい。
・一定時間が経過するとアイテム表示を消去したい。
・表示されたアイテムをタッチすると、取得したアイテムの詳細がわかる画面に移動させたい。
　（今後実装予定。）

・part1は以下参照お願いします。

事前準備

・Playerをゲームに配置する。（スクリプトをアタッチできればなんでもいいです。）
・DoTweenをimportする。（DOTween (HOTween v2)）

取得アイテムを表示するTextの用意

Hierarchy > UI > Canvas をクリック
Canvasを右クリック ⇒ UI > Imageをクリック（アイテム表示の台紙）
Imageを右クリック ⇒ UI > Textをクリック（アイテム名を表示）
Imageを右クリック ⇒ UI > Imageをクリック（アイテムのアイコンを設定）
各UIの名前を任意のものに変更し、オブジェクトが以下のように構成されていることを確認してください。

ここまでで作成したものをPrefabs化してください。
（　手順2)で作成したImageをResources配下までD&Dしてください。　）

UIのInspector設定

Canvasの設定
・Canvas Scaler > UI Scale ModeをScale Eith Screen Sizeに変更。
・Reference Resolutionを任意の値に設定（画面サイズと同じもの）
ItemTextの設定
・任意の文字列を設定。（私の場合は「０１２３４５６７８９０１」と入力）
（スクリプトから取得したアイテム名を記載する場所。）
・Font Size等任意の値を設定。
ItemImageの設定
Imageは任意のものを設定（私は面倒くさかったので色を緑にしただけです。。）
（本来ならば、取得したアイテム画像が妥当です。）

ソースコード

以下のコードを作成し、Playerにアタッチしてください。

ItemAcquisitionInfo.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class ItemAcquisitionInfo : MonoBehaviour
{
    private GameObject itemInfoPrefabs;          // アイテム取得を知らせるUIPrefabs
    private GameObject prefabs;
    public GameObject itemAcquisitionCanvas;    // itemInfoPrefabsを生成した際の親UI

    void Start()
    {
        // prefabs読み込み
        itemInfoPrefabs = Resources.Load<GameObject>("Prefabs/GameSystems/ItemAcquisitionImagePatern2");

        // prefabsをオブジェクト化
        infoItemAcquisition();

        // prefabsを移動/setText/破壊
        StartCoroutine("InfoItemAcquisition");
    }

    public void infoItemAcquisition()
    {
        // 生成位置を指定（最初は画面外に設置）
        Vector3 pos = new Vector3(0.0f, 600.0f, 0.0f);

        // プレハブを指定位置に生成
        prefabs = (GameObject) Instantiate(itemInfoPrefabs, pos, Quaternion.identity);

        //prefabsをCanvasの子に指定
        prefabs.transform.SetParent(itemAcquisitionCanvas.transform, false);
    }

    IEnumerator InfoItemAcquisition()
    {
        // 0.5秒かけて所定の位置まで移動
        prefabs.transform.DOLocalMove(new Vector3(0f, 450f, 0f), 0.3f);

        // 所定の位置で2秒間固定（image移動時間を含めて計3秒）
        yield return new WaitForSeconds(5f);

        // 0.5秒かけて元の位置に移動
        prefabs.transform.DOLocalMove(new Vector3(0f, 600f, 0f), 0.3f);

        // Prefabsが元の位置に戻るまで待機する（Prefabsの移動時間と同じ時間分待機する）
        yield return new WaitForSeconds(0.3f);

        // 画面外でPrefabsを破壊
        Destroy(prefabs);
    }
}

ここまでで、ゲームを開始すると、Prefabsが画面外に生成され、0.3秒かけて画面上部に現れ、5秒間表示された後、0.3秒かけ、生成時の場所に移動した後破壊されることが確認できるかと思います。

今後、Prefabsに取得したアイテム名とアイテム画像をセットする処理、アイテム取得通知を押下した際にアイテム詳細画面に遷移する処理も記載していこうかと思ってます。