Unity: Всё, что вы не знали о разработке: “UI Toolkit Это некое подобие html/css. Почему подобие? Потому что мног…”

UI Toolkit

Это некое подобие html/css. Почему подобие? Потому что многих стандартных вещей нет, а текущий стандарт css ушел довольно далеко от uss. То есть это примерно как верстать сейчас сайтики под Internet Explorer 6.0, оно вроде называется похоже, но большую часть просто не поддерживает.

Где это использовать?
Я бы рекомендовал это использовать только для editor-tools, еще может быть в каких-нибудь рантайм штук в билде типа дев консоли. Для продакшена еще далеко, да и есть много подводных камней.

Для редактора:
PropertyDrawer. Если в IMGUI нужно использовать два метода, если высота элемента больше стандартной линии, то при использовании UI Toolkit можно использовать только один метод:


VisualElement CreatePropertyGUI(SerializedProperty property) {
  ...
}

EditorWindow. Для отрисовке в окне существует стандартный метод:


private void CreateGUI() {
  ...
}

CustomEditor. Для отрисовки редактора для всего скрипта, нужно использовать метод:


VisualElement CreateInspectorGUI() {
  ...
}

Как это работает?

По сути UIToolkit - это контейнеры, которые можно заполнять объектами, которые сами по себе тоже являются контейнерами. Если знакомы с HTML, то контейнер в UITK - это тег.
В любом варианте из перечисленных выше, у нас есть VisualElement - это рутовый контейнер, в который мы можем вкладывать свои:


Label myLabel;
VisualElement CreateInspectorGUI() {
  // Создаем свой контейнер
  var myRoot = new VisualElement();
  // Добавляем файл со стилями
  myRoot.styleSheets.Add(Resources.Load<StyleSheet>("MyStyle"));
  // Создаем label
  var label = new Label("Hello World");
  label.AddToClassList("my-label");
  this.myLabel = label;
  // Добавляем в иерархию
  myRoot.Add(label);
  // Возвращаем корневой объект
  return myRoot;
}

void UpdateLabel() {
  // Просто обновляем текст у объекта
  this.myLabel.text = "New text";
}

А в MyStyle.uss:


// Наводим всякие красивости
.my-label {
  font-size: 20px;
  border-radius: 5px;
  background-color: red;
}

Что хорошего?

1. Многопоточность. Я не уверен, что прям все апи многопоточное, но большая часть точно, во всяком случае с тем, что я сталкивался. Это значит, что обновлять данные у элемента можно из потоков.
2. Быстро работает. На самом деле IMGUI работает тоже быстро, если не использовать GUILayout, просто там схема работы "Перемешали логику и визуалку", поэтому чтобы отрисовать элементы - нужно пройтись по всей логике.
3. Визуалка зависит от стилей, а не от настроек элементов в коде.
4. Не нужно тратить CPU на подготовку отрисовки каждый кадр, т.к. структурно меняется все очень редко.

Что плохого?

1. Если структурных изменений очень много, то нужно будет написать пулинг объектов, чтобы переиспользовать элементы, а не создавать их заново.
2. Нет поддержки партиклов и похоже что это будет еще не скоро. На самом деле одна из основных проблем почему UITK не нужно использовать в рантайме.
3. Нет поддержки анимаций. Есть стандартные анимации типа transition, но боюсь что этого недостаточно, чтобы сделать красивые штуки.
4. Нет возможности указать слой, т.е. рисуется все в том порядке, в котором было объявлено.

Резюмирую

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

#uitoolkit #ui