Varcklen
CliCli

Редактор UI - Основы

Добавлен , опубликован

Изучаем CliCli

Содержание:
Пользуясь World Editor у нас могло возникать желание изменить иконки на экране под свои нужды, но не могли этого сделать из-за ограничений игры. Даже если мы попробуем изменить фреймы в Warcraft 3: Reforged, мы столкнемся с неотзывчивостью настройки фреймов. Какая ситуация обстоит в редакторе CliCli? Используя редактор UI, мы сможем редактировать любые элементы пользовательного интерфейса в визуальным отображением на специальном холсте.

Интерфейс Редактора UI

Открыв редактор UI, мы увидим большое разнообразие кнопок и инструментов интерфейса. Давайте разберем,для чего они все нужны.
  • Окно панелей (синий) - Здесь хранятся ваши панели (холсты), на которые вы будете накладывать виджеты (местный аналог фреймов).
  • Окно виджетов (красный) - Здесь хранятся ваши виджеты, а также видна их иерархия.
  • Виджеты (оранжевый) - Отсюда вы берете шаблоны виджетов, которые будут помещены на холст.
  • Холст (фиолетовый) - Здесь будут находится ваши виджеты. Во время игры, вы будете видеть содержимое холста на экране.
  • Параметры виджета (желтый) - Здесь отображаются параметры выделенного виджета. Эти параметры можно менять в редакторе UI.
А вот как выглядит готовый холст в редакторе и в игре:

Создание Панели и Виджета

Панели позволяют нам создать новый холст, на котором можно добавить виджеты. Чтобы создать панель, нажмите на символ плюса в левом верхнем углу редактора.
Мы можем создать несколько панелей. В таком случае, виджеты из каждого из них будут наслаиваться друг на друга. Чтобы задать приоритет наслаивания (layer), выберите панель и измените параметр "Layer", который находиться в правой части редактора. Если layer панели №1 больше, чем layer панели №2, то в приоритете мы будем видеть виджеты с панели №1.
Чтобы создать виджет, нам нужно выбрать любой виджет из списка и с зажатой левой клавишей мыши перетащить на холст или в окно виджетов.
Выбрав виджет, нажав на него на холсте или в окне виджетов, мы можем его перемещать и менять размер.

Типы виджетов

Чтобы продолжить, нам нужно понять, какие типы виджетов мы можем использовать:
  • Node - невидимый виджет-пустышка. Используется для настройки иерархии виджетов.
  • Button - кнопка. В отличии от картинки имеет дополнительные возможности.
  • Picture - картинка.
  • Model - отображение модели в специальном окне.
Открыть
  • Text - текст.
  • Input - поле, в которое можно вводить символы.
  • Progress Bar - смесь виджетов, позволяющую (например) сделать полоску здоровья.
  • Slider - ползунок, передвигающийся горизонтально или вертикально.
  • List - виджет, позволяющий строго закрепить несколько дочерних виджетов на определенные расстояния.
Открыть
  • RTF - продвинутый виджет текста. Отображает отредактированный текст описаний из редактора объектов.
Открыть
Также мы имеем дополнительные типы виджетов. Нажав на кнопку Components, появится окно с виджетами-компонентами. Эти виджеты созданы для отображения на экране определенных элементов: карты, способности, чата, настроек игры и прочего.

Иерархия виджетов

Для того, чтобы научиться пользоваться виджетами, нужно понять, как работает иерархия виджетов. Каждый виджет имеет иерархию – родителей и детей. Виджет является дочерним, если находится ниже по иерархии, чем виджет выше него. Обычно, дочерние виджеты отображаются на панели немного правее от родителя. Родитель наоборот находится выше от виджета.
Посмотрим на изображение. «parent» является родителем для "widget1". "child1" это ребенок для "widget1". В свою очередь "widget1" - родитель для "child1".
У каждого виджета может быть неограниченное число детей, но только 1 родитель. Дети могут иметь своих детей, а их дети – своих детей.
Для чего нужна иерархия? Когда мы хотим переместить, изменить, удалить, скрыть или показать виджет-родителя, то изменения частично затронут дочерние виджеты тоже.
Помните, мы ранее говорили о нодах? В тех случая, когда нам нужно объединить несколько виджетов под одним родителем, но так, чтобы это было не заметно в игре, используются ноды.

Базовые Параметры Виджетов

Рассмотри базовые параметры виджетов, которые можно увидеть в окне параметров:
  • Swallow Touch – определяет проницаемость виджета. Если true, то при нажатии на виджет все виджеты за ним не будут реагировать на нажатие.
  • Visible – если true, то вы можете видеть виджет и его детей (виджет при этом выключен).
  • Draggable – если true, то его можно перемещать, как окна на рабочем столе вашего компьютера.
  • Widget Adaption – цепляет виджет к родителю. Если активировать этого параметр можно увидеть квадрат и 4 линии от него. Квадрат – это виджет. Линии – это точки крепления. Если вы нажмете на одну из линий, чтобы она стала синей и попробуете переместить, вы заметите, что ребенок перемещается вместе с ним. Если активировать все 4 линии и попробовать изменить размер родителя, вы заметите, что ребенок тоже меняет свой размер.
Открыть
Coordinates – координаты положения виджета относительно родителя.
Size – размеры виджета.
Rotation – положение виджета вокруг своей оси. Изменение ротации родителя влияет на детей.
Alpha – задает прозрачность виджета. 100 – полностью виден. 50 – частично виден. 0 – невидим, но не выключен.

Особенности ​Местного ​Get​Local​Player()

Как мы знаем, в World Editor при изменении параметров фрейма, его параметры будут изменены для всех игроков. Чтобы изменить параметры фрейма для одного игрока, использовалось условие if GetLocalPlayer == <Выбранный вами игрок>. При не правильном использовании, это могло приводить к вылету в главное меню из-за десинхронизации.
В CliCli это работает иначе. Вам не нужно использовать дополнительное условие для локального игрока, а десинхронизация между игроками не вызывает вылет в главное меню. Но для каждого действия, связанного с UI, вам нужно указывать игрока или игроков, на которых распространится это изменение.

Содержание
22 фев 2023
  • Размещен: 22.02.2023 20:31:56
  • Создан: 22.02.2023 20:31:56
  • Обновлен: 22.02.2023 20:31:56
164
`
ОЖИДАНИЕ РЕКЛАМЫ...
Чтобы оставить комментарий, пожалуйста, войдите на сайт.