Делаем интерфейс

Art Director компании G5 Games® поделился секретами мастерства и рассказал, какие приемы и подходы оправданы при создании интерфейсов в казуально-мультяшной стилистике.

Рассмотрим на примере окно выхода из гринда:

Проанализируем изображение.

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

Изображение высокодетализированное, подробное, отсутствуют выраженный мазок CG кисти и какие-либо живописные приемы в принципе. Для интерфейса, как для некой игровой сущности, это крайне важный момент, потому как интерфейс не терпит “скетчевости” в отличие от живописных игровых фонов - UI элементы должны быть максимально проработаны и отполированы. Безусловно, это не аксиома и, в зависимости от стилистики проекта, изобразительные приемы могут кардинально отличаться, но если говорить об общепринятой mainstream практике, то дела обстоят именно так. UI элементы объемные, присутствуют перспективные искажения, а некоторые элементы, например, золотые уголки, имеют относительно сложную геометрию.

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

Далее перейдем к проектированию основного UI элемента под кодовым названием Container. Обычно контейнер состоит из 9 тайлов, и это всем известный факт. И хорошо, если в интерфейсе центральный тайл решен в виде локальной заливки, которую можно растянуть как душе угодно. Но в рассматриваемом нами примере текстура дерева накладывает существенные ограничения — текстура древесины прекрасно тянется вдоль волокон и очень плохо против направления волокон (артефакты неизбежны).