Иван Марьев: Включаем голову и “делаем” интерфейс. Часть I
Art Director компании G5 Games® поделился секретами мастерства и рассказал, какие приемы и подходы оправданы при создании интерфейсов в казуально-мультяшной стилистике (на примере успешного проекта G5 Games - Mahjong Journey®).
Первое, с чем нужно смириться приступив к задаче создания интерфейсов, это факт, что интерфейсы не рисуют! Их проектируют, делают, создают. Этот процесс можно назвать как угодно, но только не рисованием в классическом понимании этого слова. Безусловно, интерфейсы, как и любая игровая графика, бывают выполнены в разных стилистиках и непосредственно выбранная стилизация определяет пайплайн разработки и инструментарий. Например, Flat интерфейсы в Hyper-casual играх сильно отличаются по манере исполнения от интерфейсов в Casual. В этой статье будут рассмотрены приемы, которые используют UI художники именно для создания интерфейсов в казуально-мультяшной стилистике на примере успешного проекта Mahjong Journey®. Вопросы UX затронуты не будут, и речь пойдет исключительно о визуальной составляющей.
UI в игре это не набор самостоятельных изображений, а система. В идеале, продуманная система, в которой в обязательном порядке присутствует реюз множества тайлящихся, тянущихся и просто дублирующих друг друга элементов. Кроме того, необходимо помнить, что количество элементов-сущностей должно быть ограничено не только по причине последующей оптимизации графических ресурсов, но и исходя из тезиса, что интерфейс должен быть консистентным.
Рассмотрим на примере окно выхода из гринда:
Проанализируем изображение.
Очевидно, что это скевоморфизм, то есть, имитирование реальных материалов. Несмотря на то, что в компьютерном дизайне и дизайне нативных приложений Flat Design практически полностью вытеснил приемы скевоморфизма, в казуальных играх этот подход все еще актуален, хотя и с некоторыми оговорками и тенденциями к облегчению и упрощению.
Изображение высокодетализированное, подробное, отсутствуют выраженный мазок CG кисти и какие-либо живописные приемы в принципе. Для интерфейса, как для некой игровой сущности, это крайне важный момент, потому как интерфейс не терпит “скетчевости” в отличие от живописных игровых фонов - UI элементы должны быть максимально проработаны и отполированы. Безусловно, это не аксиома и, в зависимости от стилистики проекта, изобразительные приемы могут кардинально отличаться, но если говорить об общепринятой mainstream практике, то дела обстоят именно так.
UI элементы объемные, присутствуют перспективные искажения, а некоторые элементы, например, золотые уголки, имеют относительно сложную геометрию.
Стоит предположить, что именно эти условия и были вводными на старте разработки интерфейса в примере. Но самое интересное — это решение этих задач. Для этого понадобятся: вектор, кисти, 3D и понимание того, как это все нарезать.
Сначала необходимо создать свою, рукотворную текстуру древесины:
Не нарисовать, а именно создать в Photoshop’e, используя его богатый инструментарий (в данном случае: Pen, Motion blur и инструмент трансформации Warp). В результате получим мягкую, пластичную и аккуратную мультяшную текстуру, которую и будем использовать практически на всех UI элементах.
Отдельно хотелось бы остановиться на термине “пластичность линии” и почему эта пресловутая пластичность требует от UI художника много и часто использовать вектор в своей работе.
Пластичность линии (силуэта) - совокупность таких параметров, как ритм изгибов, напряжение формы, сопряжения кривых.
Термин сложен в описании и понять его проще всего просто взглянув на пример:
Слева непластичная линия “от руки”, а справа пластичная — разница очевидна.
Для создания пластичных, приятных глазу силуэтов, используется “вектор”, то есть, способ создания объектов и изображений, основанный на математическом описании элементарных геометрических объектов. Соответственно, так как создание интерфейсов очень точная и кропотливая задача, то и использование векторных инструментов оправдано. Благо, Photoshop располагает не самым богатым, но вполне достаточным инструментарием для создания векторных объектов (Photoshop shapes).
Далее перейдем к проектированию основного UI элемента под кодовым названием Container (по крайней мере, Google в своей документации называет этот элемент именно так). В нашем случае это деревянная коробка с золотыми уголками, выполняющая функцию подложки для всех интерфейсных элементов. В этот момент очень важно хорошенько подумать, как этот контейнер будет нарезан и как тот или иной элемент нарезки будет тянуться/скейлиться. Если не решить этот вопрос на ранней стадии проектирования, неизбежны проблемы хранения, загрузки и выгрузки избыточной графики. И, само собой, недопустимо для каждого окна создавать свой уникальный контейнер, - необходимо использовать общее решение, по крайней мере, для большинства окон.
Обычно контейнер состоит из 9 тайлов, и это всем известный факт. И хорошо, если в интерфейсе центральный тайл решен в виде локальной заливки, которую можно растянуть как душе угодно. Но в рассматриваемом нами примере текстура дерева накладывает существенные ограничения — текстура древесины прекрасно тянется вдоль волокон и очень плохо против направления волокон (артефакты неизбежны).
На примере видно, что когда Height/высота - 200%, изображение “мылится” и теряет четкость, а когда Width/ширина - 200%, то разница практически не видна. Получается, что в случае с текстурой дерева концепция одного центрального тайла не применима, и мы делим его на отдельные доски, как можно наблюдать на следующей гифке.
Далее рассмотрим объемные элементы UI с относительно сложной геометрией, такие, как золотые уголки, сердце и кнопка Close.
Безусловно, для хорошего UI художника не составит особой проблемы построить и отрисовать эти элементы от руки. Но зачем? В нашем случае значительно проще и быстрее сначала подготовить 3D болванку в сером градиенте, а потом покрасить ее, положить текстуру и т.д.
Скорее всего, на этом этапе внимательный читатель может задаться вопросом: “Позвольте, а хоть что-нибудь здесь нарисовано кистью, по старинке, руками?”. Ответ: “Да. Но очень мало.” В данном случае работа кистью сводиться к проработке нюансов. Где-то необходимо немного подчеркнуть текстуру дерева добавив трещину и рельеф. Где-то пройтись мягкой кистью и усилить тень, а где-то, наоборот, положить рефлекс. Безусловно, есть интерфейсы, где творческой работы значительно больше, чем в нашем примере. Еще раз хотелось бы напомнить, что все зависит от глобальной стилистики проекта.
Если рассмотреть наше окно с точки зрения UX, то, возможно, многим оно покажется чрезмерно перегруженным, несовременным, и, отчасти, это действительно так. Но, тем не менее, этот пример хорошо иллюстрирует комплексность задач, с которыми сталкивается UI художник. Это и оптимизация графических ресурсов при помощи грамотно спланированной нарезки, и навыки работы в разных графических пакетах, и не только художественное, но и дизайнерское чутье. А в идеале, и способность оживить свою работу техническими, интерфейсными анимациями. В общем, на мой взгляд, толковый UI художник, - это очень ценный для любой игровой компании специалист-многостаночник на стыке технологии и арта. Не просто рисующий симпатичные картинки, а создающий сложную, и, что самое главное, продуманную систему окон и органов управления. Ну и красивую, само собой!
Тема создания интерфейсов очень обширна и богата нюансами. К сожалению, в рамках одной статьи невозможно раскрыть ее полностью, но, надеюсь, начинающие UI специалисты смогут почерпнуть для себя что-то новое.
Спасибо за внимание!