Run kolobok run! Интерфейс и с чем мы его ели

Дедлайн фестиваля близится, а мы почти ничего не рассказали о работе над UI, пора это исправить.

​Часть элементов UI и некоторые экраны будущей игры
​Часть элементов UI и некоторые экраны будущей игры

Пайплайн? Какой пайплайн?

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

Решение полностью переделать его стиль возникло почти одновременно с решением участвовать в фестивале, эти внезапные повороты ограничили наше время и мы нарушили все возможные пайплайны для UI.

Старый интерфейс​
Старый интерфейс​

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

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

Первые наброски. Слишком светлое дерево не подошло​
Первые наброски. Слишком светлое дерево не подошло​

Ура! Стиль найден, что дальше?

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

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

Полная карта экранов появилась во время поисков нового стиля​
Полная карта экранов появилась во время поисков нового стиля​

Вектор или растр, вот в чем вопрос

Для новичков в UI может показаться, что все эти красивые, до блеска вылизанные иконки сделаны в векторе. Когда же у нас зашла речь про внедрение готовых элементов в игру, программисты попросили банальные картиночки в png не самых больших размеров.

Однако при создании интерфейса вектор все-таки использовался. Почему? Так проще, ровнее и спокойнее. Вектор позволяет быстро менять формы и размеры фигур без потери качества, для этого достаточно использовать его только в основных слоях, где требуются четкие и гладкие края. Остальной "марафет" на элементах можно наводить с помощью мягких и твердых кистей.

Для примера, возьмем одну из наших кнопок.

Как видно, две основные фигуры сделаны в векторе.

Run kolobok run! Интерфейс и с чем мы его ели

Затем накладываем на вектор эффекты слоя (если, конечно, этого требует стиль). Важно! При изменении размеров фигуры, размеры накладываемых эффектов не меняются. К примеру, если вы поставите на фигуру обводку в 4 пикселя, то при увеличении самой фигуры она такой же и останется и будет выглядеть тоньше, чем надо. То же самое происходит и при уменьшении фигур. Нужно всегда об этом помнить и вовремя поправлять эффекты, если вам важен единый стиль в оформлении.

Run kolobok run! Интерфейс и с чем мы его ели

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

Run kolobok run! Интерфейс и с чем мы его ели

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

Run kolobok run! Интерфейс и с чем мы его ели

Oops! Подводные камни

​Не пытайтесь повторить!
​Не пытайтесь повторить!

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

Во время сдачи UI выяснилось, что для нормальной интеграции нужны картинки с длиной стороны, кратной 4 (почему об этом не пишут в туториалах?! *гневные рыдания*). Как это сделать в условиях фотошопа и не стать параноиком, будем разбираться уже после феста, так же, как и со второй проблемой - шрифтами.

Шрифта у нас целых два, подбирались они очень долго и кропотливо, такие, чтобы красиво, а еще была бесплатная лицензия и кириллица с латиницей. Потом так же кропотливо к различным надписям в UI подбирались эффекты, а все элементы с надписями выгружались в формате png. Что не получилось? Во-первых, мы планируем перевести игру на несколько языков, а для каждого языка делать свой набор png-картинок будет энерго- и размерозатратным. Во-вторых, аналогичные эффекты на чистый шрифт движок почему-то выдает с дефектами, а про атласы шрифтов мы пока что только слышали.

Дефективная обводка текста​
Дефективная обводка текста​

В итоге, было решено собрать демку из того, что есть, а “как надо” делать, научиться уже после сдачи. Из этого всего мы вынесли для себя урок – почаще общаться друг с другом о нашей совместной работе, делиться советами и задавать вопросы.

1313
Начать дискуссию