MVC в Unity со Scriptable Objects. Часть 2

Продолжение цикла статей от Cem Ugur Karacam (часть 1 можно прочитать здесь).

В этот раз мы начнем с того, что создадим несколько представлений для отображения объекта инвентаря и панель информации для отображения параметров объекта. Этакий примитивный инвентарь. Затем сосредоточимся на окне инвентаря, а окно статистики закончим в следующей части.



Давайте посмотрим, из чего будет состоять наша работа. Нам предстоит:

• сделать визуальные компоненты для информации о предмете и инвентаря;
• создать префаб представления предмета в инвентаре;
• наполнить инвентарь представлениями;
• вывести информацию в консоль по щелчку на представлении предмета.

Это немало. Сначала настроим разрешение экрана.



Мы будем использовать объекты Unity UI. Создадим пустую канву (правый клик в окне иерархии → UI → Canvas).



Далее создадим две панели — информацию о предмете и инвентарь.
Также создадим объект для фона, назовем его BG и назначим на него компонент Vertical Layout.







Теперь дочерние объекты фона будут выравниваться по вертикали.

Давайте создадим внутри BG панель.



Установим в компоненте RectTransform только высоту панели — 300, а ширину оставим автоматической, под управлением компонента Vertical Layout. Вот мои настройки для объекта BG:





Теперь продублируем панель и поставим высоту 440.



Затем дадим панелям правильные имена.



Должно выглядеть так:



Рассказ о работе над объектом InfoPanel продолжится в следующей части.

Давайте подготовим представление для предмета инвентаря и сохраним как префаб. Создадим кнопку внутри панели. Чтобы получить правильное отображение предметов в инвентаре, добавим удобный компонент Grid Layout Group на объект InventoryPanel.



Теперь каждый дочерний объект панели инвентаря будет размещен на экране согласно настройкам сетки в компоненте Grid Layout Group. Вернемся к кнопке.



Кнопка работает неправильно, потому что мы еще не настроили сетку. Пока добавим объект Image к кнопке как дочерний для иконки предмета и снимем флаг Raycast Target с компонента Image, чтобы нажатие на картинку не вызывало нажатия на кнопку.



Теперь скопируем кнопку несколько раз. Четырех копий будет для этого урока достаточно. Вот как должно все выглядеть:



Прежде чем двигаться дальше, мы должны сделать один скрипт для представления предмета. Он будет отвечать за хранение информации о самом предмете инвентаря и реагировать на событие клика по кнопке (пока мы ограничимся выводом в консоль командой Debug.Log).

Создадим новый скрипт и назовем его ItemView.



ItemView отвечает за хранение данных, визуальное представление, обработку нажатий и начальное состояние перед загрузкой данных.

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

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image ItemIcon;

    private ItemData itemData;
}

Создадим метод для задания исходного состояния.

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

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image itemIcon;

    private ItemData itemData;

    public void InitItem(ItemData item)
    {
        this.itemData = item;

        button.onClick.AddListener(ButtonClicked);
    }

    private void ButtonClicked()
    {
        Debug.Log(itemData.name);
    }
}

Думаю, для нашего проекта потребуется несколько иконок. Я нашел бесплатный комплект на Asset Store. Давайте добавим его в проект.



Теперь можно добавить переменную, которая будет хранить иконку для предмета внутри класса ItemData.

using UnityEngine;

[CreateAssetMenu]
public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;
    public Sprite icon; 

    public float GetPrice()
    {
        return attack * 40;
    }
}

public enum ItemType
{
    Dagger,
    Axe,
    Hammer,
    Potion
}

Теперь в ItemView мы можем добавить иконку к представлению.

public void InitItem(ItemData item)
{
  this.itemData = item;
  itemIcon.sprite = itemData.icon;

  button.onClick.AddListener(ButtonClicked);
}

Добавим скрипт к кнопке в сцене и переименуем объект с кнопкой в Item. После этого назначим в поле ItemIcon объект ImageIcon.



Удалим остальные три кнопки, поскольку они нужны были для настройки сетки, и сохраним объект Item как префаб, перетащив его в окно проекта.



Представление почти готово. Нам нужно 4 предмета, чтобы наполнить инвентарь. Создадим и назначим иконки на модели, которые сделали на предыдущем уроке.



Готово. Теперь создадим скрипт ItemViewController.

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

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public GameObject itemViewPrefab;

    private void Start() 
    {
        foreach (var item in inventoryHolder.inventory)
        {
            var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent);
            itemGO.GetComponent<ItemView>().InitItem(item);
        }
    }
}

Итак, у нас есть ссылка на инвентарь, который хранит ItemData, созданные в папке проекта, ссылку на InventoryPanel, чтобы создавать представления как дочерние объекты этой панели, и ссылку на префаб, в котором лежит само представление предмета.

Теперь в методе Start создадим экземпляр представления предмета и вызовем метод InitItem, чтобы заполнить данные представления данными из модели для каждого элемента инвентаря.

Ну и, наконец, создадим пустой объект в сцене, прикрепим к нему скрипт контроллера и назначим ссылки на требуемые объекты в сцене.



Убедитесь, что в инвентаре все предметы назначены.



Мы сделали довольно много. Теперь посмотрим, как все работает.



Предметы созданы, но я забыл удалить с кнопки объект Text. В Unity кнопки по умолчанию создаются с текстом. Откройте префаб, который мы сохранили в проекте, и удалите объект Text. Затем сохраните префаб и вернитесь к сцене.



Теперь протестируем еще раз.



Поздравляю, все работает.

В следующей части мы займемся панелью информации.