Unity, разрабатываем свой компонент

Unity, разрабатываем свой компонент

@nrjwolf_live

Навигация

Уроки, трюки по Unity

  1. Динамический инспектор
  2. AssetBundles, подгрузка контента
  3. Unity, разрабатываем свой компонент
  4. Unity — Динамическое освещение в 2D
  5. Unity и телеграм
  6. Unity — автогенерация Enum

Стартуем

Часто, особенно если вы работаете не один, нужно настраивать сцену, чтобы визуально было понятно, что есть что и кто есть кто. Стандартные unity компоненты прекрасно с этим справляются, но что если ваш случай особый?

Сегодня мы рассмотрим пример самописного компонента, в котором будут заданы параметры и будет возможность их сбрасывать и применять, но обо все по порядку.

В зависимости от выбранного enum меняем вид компонента

Начнем с первой функции — будем менять вид объекта в зависимости от выбранного enum на данный момент. На гифке можно увидеть лейбл с названием Data, в нем скрывается массив, а точнее список ( List ), в котором мы задаем параметры.

Перейдем к скриптам

Для реализации компонента, нам потребуется создать два скрипта : первый будет отвечать за компонент непосредственно в игре, второй будет работать исключительно в редакторе.

Для начала, создадим папки. В который раз напишу, но важно помещать скрипт относящийся к редактору в папку с именем "Editor". Таких папок может быть несколько, главное, чтобы скрипт находился в одной из них.


Наводим порядок

Далее добавим на сцену Canvas, так как пример с UI компонентами. Добавим в canvas пустой GameObject. Перейдем в папку Scripts и создадим скрипт MyComponent.cs

Я активно пользуюсь стерилизацией, это помогает наводить порядок в коде и как следствие в инспекторе.

Для работы нам потребуется создать один Enum, и несколько классов с сериализацией :

  • Data — создаем лист, в котором будем хранить дефолтные данные. Например мы зададим для машины значение 5 и красный цвет, а также выберем соответсвующий спрайт
  • Parametrs — входит в Data, но также храниться отдельной переменной. В параметрах мы храним цвет и число. Параметры мы можем изменять и сразу видеть результат, затем сохранить их или сбросить
  • View — здесь храним переменный для отображения, в нашем случае это Image и Text. Запись идет либо при старте в игре, либо при активации компонента в редакторе
Первые строчки кода
RequireComponent - автоматически создаст компонент Image и не даст его удалить.
В Data содержится list с заданными параметрами

Чтобы не ломать глаза, и не переписывать одно и то же. Рекомендую сразу ознакомиться конечным кодом по ссылкам :

MyComponent.cs

MyComponentEditor.cs


На данный момент принцип работы такой :

  1. Вы задаете в листе Data все параметры, указывая для какого enum они предназначаются.
  2. При смене типа объекта (enum), скрипт автоматически задаст ему ваши параметры.
  3. Вы можете изменить параметры в режиме реального времени, затем сохранить их в ваш массив ( кнопка "Применить" )
  4. Вы можете изменить параметры в режиме реального времени, затем сбросить их и вернуться к заданным ранее ( кнопка "Сбросить" )
Демонстрация
Вторые строчки кода
Завершаем класс MyComponent.cs

Итак, у нас есть класс, в котором мы задали лист, в котором прописали параметры для каждого типа компонента ( enum ). Отдельно у нас вынесен тип компонента и отдельно у нас есть параметры.

Также у нас есть несколько методов :

  • Init — сохраняет компоненты в переменную и два других обновляют вид
  • UpdateView — делает это в зависимости от выбранного типа
  • UpdateView с параметрами — обновляет данные опираясь на входящие данные о цвете и числе

Оживляем редактор

Теперь нам нужно оживить компонент уже в редакторе, для этого в папке Editor мы создаем скрипт MyComponentEditor.cs

Первые строчки кода в MyComponentEditor.cs

На этот раз мы наследуем класс от Editor, а не от MonoBehaviour.

Также нам нужно прописать атрибуты:

  • CustomEditor — даст понять unity, к какому классу мы собираемся обращаться в редакторе
  • CanEditMultiplyObjects — как следует из названия, даст возможность редактировать скрипт для нескольких выбранных объектов сразу

Далее прописываем метод OnEnable ( своего рода аналог Awake / Start ), в нем мы сохраним target как MyComponent, чтобы в дальнейшем проще было обращаться. Также сохраним текущий тип, чтобы изменять вид, только когда сменяем enum. Последнее — мы вызовем Init метод, который подцепит Image и Text компоненты.

Update

Опустимся ниже и найдем ф-ию, которая действую как Update. В ней мы можем рисовать UI для инспектора.

DrawDefaultInspector — отрисует UI аналогично тому, который отрисовывается сейчас. Если убрать этот метод, то вы увидите пустоту под названием вашего класса в инспекторе, а оно вам нужно?

Пустота

Конечно, вы можете создать все элементы заново, но в данном случае мы можем отрисовать по умолчанию и уже после добавить несколько кнопок.

На 29 строчке мы проверяем, соответсвует текущий тип последнему. Соответсвенно, при выборе нового типа в инспекторе, мы сразу же обновим вид компонента, обновим параметры ( сбросим ), и переназначим lastType.

Далее мы создаем две кнопки к которым привяжем методы :

  • ApplyChanges — сохранит текущие параметры в лист Data
  • ResetChanges — вернет компонент к параметрам, которые заданы в листе

В конце метода, мы вызовем обновление вида с нужными параметрами — как раз это позволит нам вне зависимости от того, что находится в Data менять параметры компонента на лету.

Завершение MyComponentEditor.cs
Обратите внимание, в ResetChanges я вынужден клонировать объект Parametrs, без этого, в инспекторе вы не сможете поменять вынесенную переменную parametrs, так как она будет наследоваться от той, что уже задана в Data.

Теперь все, с помощью этих двух классов вы получите то, что можно увидеть на гифке.

Репозиторий урока тут : https://github.com/Nrjwolf/my-component

Бонус

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

Выбор иконки
Буду рад видеть вас в своем канале @nrjwolf_live, вы также можете поддержать меня через разрабатываемого нами @DonateTelegramBot
@nrjwolf






Report Page