Это вторая часть из моей серии «Как мы не вкатились в геймдев». Первую можно прочитать кликнув вот сюда — клик.

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

Справедливости ради надо отметить, что шло всё более чем хорошо и в график — времени хватало и на заказы с фриланса, и на диплом, и на сами пары (что ещё шли в первое полугодие финального курса).

На руках уже имелись: все необходимые инфографики, три нарисованные локации, один анимированный персонаж, ряд концепт‑артов и РПЗ в 60+ страниц.

Что было ещё было необходимо сделать: экраны главного меню, интерфейс, логотип игры, а также тизер‑трейлер. В финале всё необходимо оформить под вид презентации и подготовится к защите.

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

Экраны главного меню

Каждый раз, когда я думаю о хорошем интерфейсе — я думаю о его диегетическом исполнении в серии игр «Dead Space». Мне очень нравится эта идея о стирании барьера между игроком и игрой путем различных стилистических и визуальных решении. Потому, когда пришла пора работать над интерфейсом в своей игре — очень захотелось сделать что‑то хотя бы отдаленно похожее.

Да, индикаторов здоровья или патронов в нашем квесте нет, однако есть само меню и можно попытаться придумать что‑то с ним. К примеру — сделать страницы главного меню не просто набором кнопок и экранов, но чем‑то более личным для главной героини и самого игрока. Чем‑то, что завлекало бы в сюжет с самых первых секунд запуска игры и являлось неотъемлемой частью выдуманного нами мира.

По этой причине мы добавили на экраны предметы Сони, сделав их ключевыми элементами взаимодействия с игрой. Этими предметами стали: личный дневник, плеер, карманный фонарик и билет на автобус из лагеря.

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

Выше — результат с одной оговоркой относительно страницы настроек. Сейчас добавлю чуть подробнее про каждый из экранов, а также о самой оговорке.

Главный экран

Для главного экрана была выбрана данная композиция со следующей задумкой — каждый раз, когда главная героиня в ходе истории знакомится с новым персонажем, олицетворяющий его предмет появляется на столе рядом с дневником.

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

Сохранения

Желая начать или продолжить свое приключение, игрок открывает дневник Сони. Внутри — слоты сохранении и последние скриншоты, стилизованные под вид фотокарточек.

Мне очень нравится, как всё в итоге получилось — страницы ощущаются фактурными, а кнопка‑закладка играет на общее погружение. Фотокарточки вклеены скотчем под углом, добавляя пару баллов к ощущению «ручной работы». Довершает вид очень милая иллюстрация, которую выполнила Настя. Мне кажется, она особенно хорошо попала в стиль «зарисовок на полях» и без ее вклада страницы выглядели бы скучнее.

Настройки

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

А дальше, когда до часа «икс» оставались считанные дни, мы с Джереми поняли, что нынешний результат нас не устраивает.

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

Как итог — второпях и жертвуя сном, но мы учтём все недостатки предыдущей версии и поменяем эту страницу.

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

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

Выход

Если с дневником, плеером и фонариком всё было понятно с самого начала, то насчёт идеи для страницы выхода пришлось подумать чуть больше. Это мог быть ключ, открытая дверь или обратная сторона дневника — но все эти варианты казались скучными, неподходящими.

А затем — меня осенило. Если автобус привозит главную героиню и игрока в мистический лагерь, то пусть обратный билет и будет выходом из игры.

Вопрос о выходе и два варианта ответа. Немного, но больше вроде и не нужно.

Интерфейс внутри игры

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

Вообще, здесь было очень большое количество идей — внести инвентарь, личный дневник с альманахом и «записками», маркеры квеста и многое другое.

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

Иконки интеракции и окно для текста

При нахождении рядом с интерактивным предметом должна возникать иконка. Требования к ней просты: ее хорошо видно на любом фоне, она визуально объясняет к чему приведет взаимодействие, а также отображает кнопку ее активации (на случай если объектов несколько, или же к одному объекту применимо несколько действии).

Тоже самое распространяется и для текстового окна, в котором всплывает описание объекта или мысли главной героини относительно него — высокий контраст, легкое чтение содержания.

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

Так игрок точно видел с чем взаимодействует, если объектов слишком много. А ещё — изначально идеи иконок интеракции и внешней линии даже ставились друг‑другу в контру, однако оказалось, что их лучше попросту совместить.

Диалоговое окно

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

Я перерисовывал портрет детализированной Сони из раза в раз, пока не достиг результата на изображении сверху. Лица — вообще не моя стихия, но благо упрощенная стилистика помогала не утонуть в тонкостях анатомии.

А вот само оформление диалогового окна было удобным. Этот способ позволял нам показать игроку чуть более проработанный облик персонажей и тем самым рассказать о них больше. Ещё — передавать мимику говорящего и его состояние.

Немного про айдентику: иконка для рабочего стола и логотип

Иконка

У Сони было много «лиц», но тех, что использовались в качестве иконки для рабочего стола у нас набралось три.

Первая иконка устарела с того момента, как мы поменяли облик главной героини.

Вторая — очень нравилась нам, однако с большого расстояния читалась не так хорошо.

Третья была вырезанным элементом с более проработанного рисунка Сони и оказалась лучшим вариантом.

Она хорошо работала сразу по нескольким причинам: рыжие волосы и бежевая кожа делили квадрат на две равные половины по диагонали, создавая приятную комбинацию цвета и форм. Глаз, изображенный на иконке должен был сработать как «психологический крючок», из соображения о том, что именно в глаза мы смотрим при встрече с кем‑либо. Ее мы и оставили.

Логотип

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

Мне хотелось последовать примеру и стилизовать логотип, но при этом не искажать его слишком сильно. Все надписи заголовков и названии у нас уже были закреплены за строгим и ровным шрифтом «Bebas Neue». Его решили придерживаться и в дальнейшем.

Я представлял, как будет выглядеть этот логотип при публикации материалов по игре где‑либо, а потому выдал ему линии‑рамки, дабы можно было легко добавлять текст как сверху, так и снизу. Стилизовал букву «О» под глаз Сони и постарался продолжить ощущение движения слева‑направо добавив ресницы на букву «А».

Сейчас наработки по диплому опубликованы на Artstation‑е, где мне удалось увидеть задумку с рамкой‑линиями вокруг логотипа в действии. По‑моему, выглядит неплохо.

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

Логотип нашей банды

А вот с логотипом для нашей маленькой команды получилось чуть интереснее. Сделать мы его решили для поднятия боевого духа и более солидной атмосферы. Чтобы потом, аки крупные ребята продемонстрировать название своей «студии» в трейлере.

Сама концепция была следующей — каждый из участников выбрал свой объект‑талисман, а после всё объединилось в одном образе и названии. Настя выбрала моль (Moth), Джереми выбрал кота (Cat), я — шляпу (Hat). Пару раз встряхнув буквы и убрав повторяющиеся — получили «Mohat».

За визуальное воплощение задумки в жизнь взялась Настя, создав ряд очень милых, динамичных и приятных скетчей

Итак, с ее разрешения я публикую первоначальные зарисовки далее.

Мы попытались провести выбор через обычное обсуждение, но правда в том, что нам нравилось всё. Всё, увы, выбрать было нельзя. Пришлось устраивать голосование с постепенным «выбыванием», которое привело к победе номера восемь. Но даже сейчас, спустя время, мы все ещё не уверены в том, что же из списка действительно лучше.

Далее скетч был передан мне на переработку в вектор. В процессе я всеми силами старался уберечь шарм и сказочность оригинала. Надеюсь, у меня получилось.

Промежуточные итоги

Данный промежуток работы над дипломным проектом выдался довольно спокойным и в какой‑то мере даже однообразным. Если в самом начале я имел дело с написанием большого объема текста и изучением новых программ и техник, то сейчас просто занимался тем же, чем и на фрилансе — рисовал скетчи, утверждал их, а затем превращал в полноценные страницы.

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

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

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

Надеюсь, читать данную статью было интересно. Большое спасибо за ваше внимание и спасибо за поддержку под предыдущей статьей!