25 сентября 25 сент. 0 170

В Dark coffee интерфейсы — тоже часть комикса

+3

С интерфейсами у нас была отдельная задача: они должны были вписаться в стиль игры.

Всем привет!
Сегодня мы бы хотели поделится историй о работе над интерфейсами для нашей игры.
Если уж Dark Coffee выглядит как старый бумажный комикс, то и меню, настройки, диалоговые окна и всякие кнопки должны существовать по тем же правилам.

Поэтому рамок стало много. Очень много.

Небольшой взгляд за «кулисы»: так в нашей игре выглядят диалоговые окна.
Небольшой взгляд за «кулисы»: так в нашей игре выглядят диалоговые окна.

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

Где-то элементы даже специально выглядят немного «тяжёлыми» и грубоватыми
В обычном современном интерфейсе мы, скорее всего, пытались бы всё это упростить: сделать тонкие рамки, использовать простые формы и прозрачные подложки, отказаться от скроллов и дополнительных подложек под кнопками, использовать органичные шрифты без дополнительных эффектов.
Здесь же получилось наоборот: чем сильнее интерфейс напоминал что-то напечатанное и вырезанное из бумаги, тем лучше он вписывался в игру.

Из таких элементов собирается большая часть интерфейса игры.
Из таких элементов собирается большая часть интерфейса игры.

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

Вот так сейчас выглядит главное меню игры. Мы его уже несколько раз переделывали и наверняка переделаем еще несколько раз.
Вот так сейчас выглядит главное меню игры. Мы его уже несколько раз переделывали и наверняка переделаем еще несколько раз.

Префаб в Unity - это готовый элемент, который можно сохранить отдельно и потом использовать снова. Например, один раз собрать рамку, кнопку или подложку для окна, а затем просто добавлять её на нужные экраны и при необходимости немного менять. Все такие элементы хранятся отдельно в проекте и служат чем-то вроде конструктора для интерфейса. Сначала пришлось потратить время, чтобы разобраться как это все работает, зато потом это сильно ускорило сборку новых окон. Например, когда понадобилось сделать несколько вариантов окна рецептов, мне уже не пришлось каждый раз собирать всё с нуля. Я взял заранее подготовленные префабы с подложками и рамками и на их основе быстро собрал нужные варианты.

Так выглядит префаб книги рецептов.
Так выглядит префаб книги рецептов.

BAM! Clank! Clank! Clank!

Но одних только рамок и подложек оказалось недостаточно, чтобы передать эффект комикса. Чтобы усилить погружение игрока в атмосферу книжек с картинками, мы добавили множество «звуковых эффектов», которые появляются во время взаимодействия с различными элементами игры. Например, когда игрок выключает свет, появляется надпись Click!

Некоторые примеры комиксных эффектов.
Некоторые примеры комиксных эффектов.

Шурх, шурх… Страница перевернулась. 

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

Такие детали нужны не для того, чтобы кричать: «Смотрите, у нас бумажный интерфейс!», а чтобы вся игра ощущалась одной цельной картинкой.

Позже мы вернёмся к вам с новыми материалами по игре. Возможно, кого-то заинтересует, как проект выглядит изнутри, как он живёт и развивается.

Спасибо, что дочитали. Сладостной ночи!

Steam: https://store.steampowered.com/app/5202820/Dark_Coffee/


0

Лучшие комментарии

Читай также