Продолжение цикла статей от 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 отвечает за хранение данных, визуальное представление, обработку нажатий и начальное состояние перед загрузкой данных.
Создадим метод для задания исходного состояния.
Думаю, для нашего проекта потребуется несколько иконок. Я нашел бесплатный комплект на Asset Store. Давайте добавим его в проект.
Теперь можно добавить переменную, которая будет хранить иконку для предмета внутри класса ItemData.
Теперь в ItemView мы можем добавить иконку к представлению.
Добавим скрипт к кнопке в сцене и переименуем объект с кнопкой в Item. После этого назначим в поле ItemIcon объект ImageIcon.
Удалим остальные три кнопки, поскольку они нужны были для настройки сетки, и сохраним объект Item как префаб, перетащив его в окно проекта.
Представление почти готово. Нам нужно 4 предмета, чтобы наполнить инвентарь. Создадим и назначим иконки на модели, которые сделали на предыдущем уроке.
Готово. Теперь создадим скрипт ItemViewController.
Итак, у нас есть ссылка на инвентарь, который хранит ItemData, созданные в папке проекта, ссылку на InventoryPanel, чтобы создавать представления как дочерние объекты этой панели, и ссылку на префаб, в котором лежит само представление предмета.
Теперь в методе Start создадим экземпляр представления предмета и вызовем метод InitItem, чтобы заполнить данные представления данными из модели для каждого элемента инвентаря.
Ну и, наконец, создадим пустой объект в сцене, прикрепим к нему скрипт контроллера и назначим ссылки на требуемые объекты в сцене.
Убедитесь, что в инвентаре все предметы назначены.
Мы сделали довольно много. Теперь посмотрим, как все работает.
Предметы созданы, но я забыл удалить с кнопки объект Text. В Unity кнопки по умолчанию создаются с текстом. Откройте префаб, который мы сохранили в проекте, и удалите объект Text. Затем сохраните префаб и вернитесь к сцене.
Теперь протестируем еще раз.
Поздравляю, все работает.
В следующей части мы займемся панелью информации.
В этот раз мы начнем с того, что создадим несколько представлений для отображения объекта инвентаря и панель информации для отображения параметров объекта. Этакий примитивный инвентарь. Затем сосредоточимся на окне инвентаря, а окно статистики закончим в следующей части.
Давайте посмотрим, из чего будет состоять наша работа. Нам предстоит:
- сделать визуальные компоненты для информации о предмете и инвентаря;
- создать префаб представления предмета в инвентаре;
- наполнить инвентарь представлениями;
- вывести информацию в консоль по щелчку на представлении предмета.
Это немало. Сначала настроим разрешение экрана.
Мы будем использовать объекты 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. Затем сохраните префаб и вернитесь к сцене.
Теперь протестируем еще раз.
Поздравляю, все работает.
В следующей части мы займемся панелью информации.