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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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