【Unity】RPG制作 その5－アイテムのUI作成

　今回はアイテムのUIを作成していきたいと思います。

　アイテムのリストを作るのにScreenViewを使います。ScreenViewの階層下にあるContentsに、所持数が1以上のアイテム名のTextコンポーネントを保持したゲームオブジェクトを追加していきます。

　ヒエラルキーに新しくCanvasを作成し、名前をItemUICanvasにします。ItemUICanvasの階層下に「UI」→「ScrollView」を作成。ItemUICanvasのSortOrderを3に設定。ScrollViewはColorを適当に変更し、ScrollRectコンポーネントのMovementTypeをClampedに変更し、HorizontalScrollbarをNoneに変更。そしてScrollView階層下のScrollbarHorizontalを削除します。

　新規に空のオブジェクトを作成し、ItemUISystemを作成。新しくItemUIスクリプトを作成してオブジェクト「ItemUISystem」に貼り付けます。コードは以下のようにします。

クリックで展開

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

public class ItemUI : MonoBehaviour
{   
    public ItemManager itemManager;
    public Canvas itemCanvas;

    ItemManager.Item iEnum;
    GameObject scrollView;
    Transform viewPort;
    Transform content;

    // Start is called before the first frame update
    void Start()
    {
        scrollView = GameObject.Find("Scroll View");//(注)同じ名前を作らない
        // スクリプトからScroll Viewのサイズを変更する場合はアンコメント
        //scrollView.transform.localPosition = new Vector3(0, 0, 0);
        //scrollView.transform.localScale = new Vector3(1,1,1);
        //scrollView.GetComponent<RectTransform>().sizeDelta = new Vector2(1000, 1000);

        viewPort = scrollView.transform.Find("Viewport");//(注)同じ名前を作らない
        content = viewPort.transform.Find("Content");//(注)同じ名前を作らない



        //デバッグでアイテムのUIを表示する前に、アイテムの所持数をセットする。
        itemManager.TestInit();

        SetItemUI();
        itemCanvas.gameObject.SetActive(false);

    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void SetItemUI()
    {
        

        //テキストを表示する
        for (int i = 0; i < 20; i++)
        {
            iEnum = (ItemManager.Item)Enum.ToObject(typeof(ItemManager.Item), i);

            if (itemManager.itemCountDictionary[iEnum] == 0)
            {
                continue;
            }
            else
            {
                GameObject Contents = new GameObject("Contents" + (i + 1).ToString());

                Contents.transform.parent = content.transform;
                var Rect = Contents.AddComponent<RectTransform>();
                Rect.transform.localPosition = new Vector3(0, 0, 0);
                Rect.transform.localScale = new Vector3(1, 1, 1);
                Rect.sizeDelta = new Vector2(0, 100);

                Contents.AddComponent<CanvasRenderer>();
                Contents.AddComponent<Image>();
                Contents.AddComponent<LayoutElement>().preferredHeight = 100;

                var buttonState = Contents.AddComponent<Button>();
                //背景の色を変えて見やすくする
                var colors = buttonState.colors;
                if (content.transform.childCount % 2 == 0)
                {
                    colors.normalColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                    colors.highlightedColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                    colors.pressedColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                    colors.disabledColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                }
                else
                {
                    colors.normalColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                    colors.highlightedColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                    colors.pressedColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                    colors.disabledColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                }
                buttonState.colors = colors;

                GameObject text = new GameObject("Item" + (i + 1).ToString());
                text.transform.parent = Contents.transform;
                var rect = text.AddComponent<RectTransform>();
                rect.transform.localPosition = new Vector3(0, 0, 0);
                rect.transform.localScale = new Vector3(1, 1, 1);
                rect.sizeDelta = new Vector2(900, 90);

                text.AddComponent<CanvasRenderer>();

                var textChild = text.AddComponent<Text>();

                //-----------アイテム名 × 所持数のテキスト生成
                string viewtext = "";
                viewtext = itemManager.itemDatas[i].itemName;
                string countText = "　×　" + (itemManager.itemCountDictionary[iEnum]).ToString();
                textChild.text = itemManager.itemDatas[i].itemName + countText;

                textChild.color = new Color(255f / 255f, 255f / 255f, 255f / 255f, 255f / 255f);
                textChild.fontSize = 30;
                textChild.alignment = TextAnchor.MiddleCenter;
                textChild.font = Resources.GetBuiltinResource(typeof(Font), "Arial.ttf") as Font;
                //--------------テキストここまで


                //ボタンを押したときの処理に関連するitemEventコンポーネントを付ける
                var itemEvent = Contents.AddComponent<itemEvent>();
                itemEvent.itemData = itemManager.itemDatas[i];
                //-----------イベントここまで

                //ボタン上の左側にアイテムのアイコンを表示する
                GameObject itemIcon = new GameObject("ItemIcon" + (i + 1).ToString());
                itemIcon.transform.parent = buttonState.transform;
                var iconRect = itemIcon.AddComponent<RectTransform>();
                iconRect.transform.localPosition = new Vector3(-250, 0, 0);
                iconRect.transform.localScale = new Vector3(1, 1, 1);
                //rect.sizeDelta = new Vector2(900, 90);

                itemIcon.AddComponent<CanvasRenderer>();
                var iconImage = itemIcon.AddComponent<Image>();
                iconImage.sprite = itemManager.itemDatas[i].itemSprite;
            }

        }
    }

    public void UpdateItemUI()
    {
        DestroyAllItem();
        SetItemUI();
    }

    public void DestroyAllItem()
    {
        if (content.gameObject.transform.childCount != 0)
        {
            foreach(Transform child in content.gameObject.transform)
            {
                //全要素削除
                Destroy(child.gameObject);
            }
        }
    }

    public void ShowItemUI()
    {
        SoundManager.instance.PlaySE(6);
        UpdateItemUI();
        itemCanvas.gameObject.SetActive(true);
    }

    //アイテムUIを消す（見えなくする)
    public void DeleteItemUI()
    {
        SoundManager.instance.PlaySE(7);
        DestroyAllItem();
        itemCanvas.gameObject.SetActive(false);
    }

　publicにしたItemManagerとItemCanvasにそれぞれオブジェクト「ItemManager」とオブジェクト「ItemUICanvas」を貼り付けます。スクリプトの実行内容としては、ItemManagerの全てのアイテムの所持数をチェックして、所持数が1以上のアイテムを ItemUICanvasのScrollViewにアイコン付きのテキストで追加するものです。後で使用時の処理を実装できるようにButtonコンポーネントと新しく作成したItemEventコンポーネントもつけています。

　実行すると以下のようになります。

　このアイテムのUIをアイテムボタンを押したときに呼び出すようにしたいので、探索時のUIにItemButtonとBackButtonを追加します。

　StageUIManagerにアイテムボタンと戻るボタンが押されたときの処理を追加します。

クリックで展開

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


//StageUIを管理(ステージ数のUI/進行ボタン/街に戻るボタン)の管理
public class StageUIManager : MonoBehaviour
{
    public Text stageText;
    public GameObject nextButton;
    public GameObject toTownButton;
    public GameObject stageClearImage;
    public GameObject itemButton; //New
    public GameObject cancelButton; //New

    private void Start()
    {
        stageClearImage.SetActive(false);
        cancelButton.SetActive(false); //New
    }

    public void UpdateUI(int currentStage)
    {
        stageText.text = string.Format("ステージ:{0}", currentStage + 1);
        
    }

    public void HideButtons()
    {
        nextButton.SetActive(false);
        toTownButton.SetActive(false);
        itemButton.SetActive(false);
    }

    public void ShowButtons()
    {
        nextButton.SetActive(true);
        toTownButton.SetActive(true);
        itemButton.SetActive(true);
    }

    public void ShowButtons(bool isTrue)
    {
        nextButton.SetActive(isTrue);
        toTownButton.SetActive(isTrue);
        itemButton.SetActive(isTrue);
    }
    
    public void PushItemButton() //New
    {
        itemButton.SetActive(false); 
        cancelButton.SetActive(true); 
    }

    public void PushCancelButton() //New
    {
        itemButton.SetActive(true);
        cancelButton.SetActive(false);
    }

    public void ShowClearText()
    {
        stageClearImage.SetActive(true);
        nextButton.SetActive(false);
        toTownButton.SetActive(true);
    }
}

　ItemButtonのOnclickに、ItemUISystemオブジェクトのItemUI.ShowItemUI関数とStageUIManagerオブジェクトのStageUIManager.PushItemButton関数を指定します。
　BuckButtonのOnClickには、ItemUISystemオブジェクトのItemUI.DeleteItemUI関数とStageUIManagerオブジェクトのStageUIManager.PushCanvasButton関数を指定します。
これでアイテムボタンを押せばItemUIを表示し、戻るボタンを押せばItemUIを閉じることが出来るようになりました。

次回からは戦闘時の処理を実装していきたいと思います。