短編RPG制作(Unity2D)【第31回】メニューの作成その9

メニューへの表示

今回はアイテム表示の中身を作っていきます。

アイテム画像の表示

前回、アイテムの画像がシルエット表示されてしまいました。
これは、UIを背景様に黒・透明に設定していたことが原因でした。四角はそのまま表示しておきたいので、新たにUIを用意して重ねて表示することとします。
アイテムの説明については、InspectorウィンドウでTextコンポーネントを調整しました。白字にしてフォントを大きくし、左中央揃えにしています。
表示する文章については、スクリプトでアイテムの情報から取得します。

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class MenuButton : MonoBehaviour
{
    [SerializeField] private PlayerStatus _playerStatus;
    [SerializeField] private Canvas _canvas;
    [SerializeField] private GameObject _panelItemBackground;
    [SerializeField] private GameObject _panelItemIcon;
    [SerializeField] private GameObject _panelItemContent;
    [SerializeField] private Image imageItemBackground;
    [SerializeField] private Image imageItemIcon;
    [SerializeField] private Image imageItemContent;
    private bool canvasEnable = false;
    private List<ItemData> itemList;
    private List<int> itemPossessions;
    private int itemCount;
    private Image[] itemImages;
    private Text[] itemContents;

    public void OnClickMenuButton()
    {
        if (!canvasEnable)
        {

            _canvas.enabled = true;
            canvasEnable = true;
            StartCoroutine(MenuUpdate());
        }
        else
        {
            _canvas.enabled = false;
            canvasEnable = false;
        }
    }

    // メニュー表示の更新
    private IEnumerator MenuUpdate()
    {
        MenuReset();
        yield return null;
        MenuDisplay();
    }

    // アイテム枠をリセット
    private void MenuReset()
    {
        foreach (Transform child in _panelItemBackground.transform)
        {
            GameObject.Destroy(child.gameObject);
        }
        foreach (Transform child in _panelItemIcon.transform)
        {
            GameObject.Destroy(child.gameObject);
        }
        foreach (Transform child in _panelItemContent.transform)
        {
            GameObject.Destroy(child.gameObject);
        }
    }

    // アイテム内容を表示
    private void MenuDisplay()
    {
        itemList = _playerStatus.GetItemList();
        itemPossessions = _playerStatus.GetItemPossessions();
        itemCount = itemList.Count;

        // 所持アイテム種類数だけの枠を生成
        for (int i = 0; i < itemCount; i++)
        {
            Instantiate(imageItemBackground, _panelItemBackground.transform);
            Instantiate(imageItemIcon, _panelItemIcon.transform);
            Instantiate(imageItemContent, _panelItemContent.transform);
        }

        // 子オブジェクトのコンポーネントを取得する
        itemImages = _panelItemIcon.GetComponentsInChildren<Image>();
        itemContents = _panelItemContent.GetComponentsInChildren<Text>();

        // 子オブジェクトにアイテム情報を表示する
        for (int i = 0; i < itemCount; i++)
        {
            itemImages[i].sprite = itemList[i].GetItemIcon();
            itemContents[i].text = itemList[i].GetItemName() + "\n" + itemList[i].GetItemText() + "\n所持数：" + itemPossessions[i];
        }
    }
}

実行結果

アイテムが表示できた

無事に表示できています。

まとめ

アイテム画像とアイテム説明を表示することができました。
めちゃくちゃ苦労した前回と比較するとめちゃくちゃ簡単……主にInspectorウィンドウでの操作だったということも一因です。
次回は少し寄り道して、敵の種類を増やそうと思います。敵ごとにドロップアイテムを設定し、プレイヤーが複数種類のアイテムを所持した状態を作る前段階です。