Включаем голову и “делаем” интерфейс. Часть III, заключительная

Art Director компании G5 Games® поделился секретами мастерства и рассказал об одном из способов создания UI элементов.

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

Как всегда начнем с небольшого анализа изображения.
Первое, что необходимо для себя отметить, так это плавность и округлость форм. Сделано это не просто так, а в угоду мультяшной, казуальной стилистике, которая не очень приветствует параллельно-перпендикулярные, строгие формы. В свою очередь эта “округлость” накладывает определенные ограничения при нарезке UI элементов.
Для тех, кто, может быть, еще не сталкивался с процедурой нарезки и не совсем понимает для чего это необходимо, поясню. Нарезка необходима для того, чтобы не рисовать бесконечное количество однотипных окошек, переполняя проект ненужной графикой. И вот как раз, чтобы этого не происходило, окошки делаются “резиновыми”, то есть тянущимися, благодаря пресловутой нарезке на тайлы.
Стандартный подход к процедуре нарезки интерфейсного окна выглядит следующим образом:

Полагаю, всем знаком этот метод. Мы просто берем и режем исходник на девять тайлов. При этом, после интеграции в проект, угловые тайлы никак не тянутся и не скейлятся, а вот центральный, правый, левый, верхний и нижний растягиваются в зависимости от задаваемого размера окна.
Очень простая, рабочая и проверенная годами схема! Но, к сожалению, плохо работающая с округлыми формами.
Смотрим на примере:

На примере “А” мы видим окно, собранное из тех самых, классических девяти тайлов. И все бы хорошо, но из-за того, что тянущиеся тайлы не поддерживают плавность и округлость, появляются визуальные артефакты, пропадает плавность изгиба общей формы и появляются заметные уголки на местах стыков тайлов. Эти визуальные артефакты отмечены розовыми стрелками.
А вот на примере “Б” этого эффекта излома нет, так как плавный изгиб не прерывается по всему контуру.
Как же была решена эта проблема? Нетривиально, - при помощи редактора анимаций Spine 2d. Да-да, именно редактора анимаций и его прекрасного, гибкого инструментария.

Контроль над костями
Краеугольный камень всей нашей истории - контроль над костями анимации из кода. Фактически, это возможность менять координаты костей, управляющих анимацией, силами программистов. Это все не артовая история и глубоко вникать в нее нет никакого смысла, просто нужно запомнить, что реализовать это в любом движке возможно. Звучит мудрено, но волноваться и жать крестик раньше времени не стоит, скоро все встанет на свои места.
От теории к практике!

Шаг первый - подготовка арта
Обычно первый шаг - это нарезка на тайлы. Но в нашем случае, как раз таки, классической нарезки и нет. Мы сразу загружаем изображение окна в Spine 2d, целиком. Расставляем по углам 4 кости, которые будут отвечать за “резиновость” и переходим с следующему этапу.

Шаг второй - Mesh (как бы нарезка)
Spine 2d позволяет разбить изображение на отдельные виртуальные тайлы, не разделяя изображение физически. То есть, на рисунок помещаем сетку, которая определяет, как будет выглядеть изображение в зависимости от деформации сетки.

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

Шаг третий - настройка весов
Для того, чтобы косточки и изменение их координат, как-то могли повлиять на наше изображение, разбитое на Mesh сетку, нам необходимо привязать уголки каждого полигона к соответствующей косточке. Выглядит это следующим образом:

На примере мы видим, что узлы полигонов окрашены в цвета костей, т.е. узелки, которые полностью окрашены в цвет кости, полностью подчиняется этой кости, а те, которые окрашены в несколько цветов, подчиняются сразу нескольким костям. В зависимости от того, какой цвет преобладает, определяется и влияние той или иной косточки на конкретный узел. Именно процедура продуманной расстановки весов позволяет растягивать изображение плавно и естественно!
Для большей наглядности, к окну-примеру были добавлены внутреннее, вдавленное окошко и кнопка. Смотрим:

Теперь, после того, как мы выполнили все предшествующие шаги и разобрались как все это работает, мы можем тянуть наше окно с плавными, округлыми очертаниями как душе угодно!
Иными словами, используя подобный пайплайн, нет никакой необходимости держать себя в рамках классических девяти тайлов и ограничивать полет фантазии прямоугольными формами. Можно создавать UI элементы со сложными очертаниями и при этом не раздувать размер билда уникальной графикой. Да и управляться с таким окошком проще простого - изменили всего четыре координаты и получили необходимый размер. Кроме того, подобным образом можно модифицировать не только статическое интерфейсное окно, но и анимированное, с каким-нибудь эффектом, например, пробегающим бликом.

Бытует мнение, что задачи по UI скучны, в них нет места фантазии, а жесткие ограничения, вызванные требованиями оптимизации графических ресурсов UI, не позволяют сделать что-то интересное и впечатляющее. Уверен, что нет! Любую задачу связанную с интерфейсами можно выполнить множеством способов используя растр, вектор, 3d, анимации, внутренний инструментарий движков или даже самописных, на коленке, редакторов. Дело исключительно в желании и фантазии.
И как говорил Бигвелд: “Есть задача — реши её!”