Интерфейс диалоговых окон
Всем привет, с вами Mooshi!
Давайте признаем, интерфейс диалоговых окон далеко не первая вещь, на которую обращает внимание игрок. Сложно вообразить ситуацию, когда два человека встречаются на улице и говорят: «Эй, дружище, ты помнишь, какие чумовые диалоговые окна в игре X?»
Звучит, скорее, как вырезка из фантастического фильма. Скорее, они обсудят атмосферу игры, ее историю, графику, крутой квест или запоминающийся гемплей.
К счастью, игры значительно скакнули вперед в своем развитии, и теперь заядлые геймеры хорошо понимают, что с плохим интерфейсом пройти игру не всегда реально. Ужасный интерфейс может убить погружение и окончательно испортить общее впечатление от игры. И хоть к диалоговым окнам это относится в значительной степени меньше (т.к. претензий к ним, зачастую, меньше), разработчику необходимо обладать исключительным мастерством, чтобы они, хотя бы, не заставляли игроков в агонии выключать компьютер и оформлять рефанд.
Дьявол кроется в деталях
Диалоговое окно (выноска, баллон, баббл или как вам еще хочется) — это графическое средство, используемое внутри игр для иллюстрации вербальных реакций персонажа (актера) на предмет, объект или явление во время игрового процесса.
В зависимости от проекта, баллоны могут являться первостепенной механикой в передачи нарратива внутри игры, поэтому различие в их оформлении и стиле сильно влияет на ту канву, внутри которой строится сюжет. Выражаясь проще — дизайн играет далеко не последнюю роль, а само его проектирование, чаще всего, кроется в деталях, далеко не всегда очевидных. В нашем случае, диалоговые окна — это часть языка, на котором общается игра с игроком.
Попытки классифицировать виды диалоговых окон по стилю неизбежно приводят к разрозненности и чрезмерной вариативности. По факту, любые предложенные формулировки можно свести к трем группам. Временным:
- Те, что отсанавливают время;
- Те, что текут вместе с временем.
Механическим:
- Активный;
- Пассивный.
Здесь подразумевается реализация в разрешении ситуации, либо посредством физически-активного действия, либо пассивного (чаще всего текстовый выбор).
Стилистическим:
- Многослойные;
- Нативные.
Остановись, мгновение! Ты прекрасно!
Несмотря на то, что основной фокус в данном материале хотелось бы сделать именно на стилистике, стоит сказать пару слов о временной группе. Почему о ней важно упомянуть? Так как она в том же числе будет влиять на стиль диалоговых окон.
Один из видов диалоговых окон останавливает игровое время. Это значит, что в момент прохождения игры, человек может спокойно отлучиться от экрана, заняться своими делами и, затем, без потерь вернуться к игровому процессу. В мире игры ничего не изменится, так как время в ней полностью остановилось. Чаще всего в таких играх игроку предлагается самостоятельно управлять диалоговой ситуацией посредством клика/выбора.
Примерами игр с подобной интеграцией диалоговых окон могут служить самые разнообразные тайтлы: OneShot, The Count Lucanor, Pillars of Eternity, Sally Face, Hollow Knight, Night in the Woods, Flutter, Beholder и т.д.
Или даже тот же The Witcher 3, где Геральт может продолжать вести разговор с Весемиром хоть до бесконечности.
Существует также и смешанный тип, когда, например, сами диалоги предоставляют игроку возможность обдумать свое решение, но за короткий промежуток времени, иными словами быстро отреагировать на ситуацию репликой.
В такие моменты пауза практически не ощущается, так как находясь в ситуации выбора затяжное молчание приводит к тем или иным последствиям внутри игры. Здесь хорошим примером выступают любые игры «киношные» игры: Detroit: Become Human, Beyond Two Souls, Wolf Among Us и т.д.
Но, в тот же миг, они грешат останавливать время в момент выбора реплики-реакции.
Или же другой пример, когда у игрок может случайно подслушать сплетни. Чаще всего это происходит не во время диалоговой паузы, а случайно, проходя мимо NPC, как в игре Divinity: Original Sin. Таким образом внутри игры геймер одинаково сталкивается с двумя явлениями — паузности и текучести времени.
Часы бьют. Всех
Примеров игр с протяженными диалоговыми сессиями без пауз гораздо меньше, и, чаще всего, это какие-нибудь экшоновые игры, внутри которых банально нет возможности остановиться и поговорить по душам с NPC. Здесь время и диалог двигаются вместе с игроком и его действиями, а выбор, если и существует, то он либо геймплейных (необходимо физически сделать что-то), либо паузныйва. Как, например, в Borderlands 2, когда интегрирована возможность прослушивать сообщения неписей в момент боя.
В то же время уникальным и любопытным примером ценности каждой минуты выступает игра Мор. Утопия, где весь сюжет разворачивается в режими реального времени, и игрок имеет возможность повлиять на ход событий, не только своим физическим присутствием, но и соответствующей диалоговой сессией. Несмотря на то, что время во время диалоговой сессии останавливается, вступление в нее обыгрывается механически, т.е. вступая в разговор с NPC всегда есть возможность с кем-то поговорить и одновременно в этот же момент кого-то упустить.
Еще один любопытный пример игра Save Koch, где на выполнение задания, а также на разговор с NPC отведено определенное время и есть вероятность их пропустить. Игра не будет ждать, пока игрок попьет чай или посмотрит видео в Интернете.
Красота — страшная сила
Теперь же обратимся, наконец-то, к стилистике. Выбор оформления диалоговых окон внутри своего собственного проекта во многом зависит от аналитических способностей и желаний геймдизайнера. Хочется ли ему, чтобы диалоги ставили игру на паузу? Хочется ли ему, чтобы они казались более естественными? Как этого добиться и какие шаги необходимо предпринять?
Прежде всего, важно составить список всех возможных вариаций диалоговых окон внутри игры.
- Монолог;
- Диалог;
- Выбор;
- Механика (очень ситуативная штука).
Самый банальный и очевидный стартовый этап, с которого стоит начать, поиск референсов. Как уже ранее было упомянуто, с точки зрения стилистики баллоны бывают многослойными (когда окошко накладывается поверх экрана) и нативными (когда окошко интегрировано в игру). Рассмотрим на примерах.
Изображение персонажа/актера возле диалогового окна (либо портрет, либо халфбади). В момент диалога собеседник либо пропадает из виду, либо «затемняется», либо уходит на задний план. Главный герой, зачастую, всегда слева, NPC — справа.
Расположение диалогового окна в классическом варианте внизу экрана, однако, встречаются баллоны и исключительно вверху экрана.
Только имя (имя говорящего выделяется цветом) или же только бокс.
Утяжеленное окошко с фокусом на текст.
Колесо-реакций (внизу экрана).
Приближение камеры на объекте.
Только текст.
Интегрированные окошки это:
Вариации комикс-бабблов и всплывающий текст.
Озвучка вместе с реакцией (чаще всего возле персонажа).
Механическое решение/геймплейное.
Особенности оформления
После составления списка референсов логичным шагом служит переход к особенностям оформления, главное правило которого — не плодить сущностей. Для большинства людей в разработке это вполне очевидные вещи, однако дизайн диалоговых окон, их внешний вид и функциональность, напрямую связаны с нарративом игры.
Например, в игре Pyre игрок выполняет роль Чтеца, поэтому диалоговые окна оформлены в виде пергамента с восковой печатью.
Еще одним примером служит игра Fallout 4, где диалоговые окна имитируют интерфейс старых компьютеров.
Здесь главное помнить, что если сеттинг игры выстроен в эпохе каменного века, то оформление диалогового окна в виде экрана мобильного телефона — неуместное и странное решение, вступающее в конфликт с внутреигровым миром.
Диалоги наглядно отражают взаимодействие между игроком и происходящем на экране и могут показать:
- Степень влияния игрока на процесс;
- Возможность игроком задавать практически любые вопросы о мире.
2. Вариативность развития событий и контролируемость повествования;
- Игрок может выбирать, в каком направлении будет развиваться история.
3. Мысли персонажей вслух;
- Внутренний мир героев и их эмоции.
4. Отношение к окружению;
- Реакция на объекты, предметы, других персонажей и т.д.
5. Нарушение четвертой стены;
- Обращение к игроку.
6. Ограничения.
- Если игрок по каким-то причинам не может куда-то зайти (например, заперта дверь).
Оформление диалогового окна — то вещь, которой не стоит пренебрегать. Существуют стандартные принципы дизайна, когда портрет персонажа или его моделька должны быть хорошо видны для визуализации эмоций, а текст достаточного размера, чтобы не напрягать глаза при чтении. В случае с портретом важно помнить, что ключевой фигурой внутри игровой сцены является персонаж/актер и в момент диалоговой сессии ему, в зависимости от прихоти дизайнера, может доставаться больше или меньше внимания. Если игра завязана на персонаже, то диалоговое окно и его оформление должны делать все для наилучшей его презентации. Если же внутри диалогового окна содержится много побочной информации, к примеру, лорные моменты, тогда внимание с персонажа долго сместиться на текст.
Лучше всего работают окошки нестандартной формы, т.е. не исключительно круглые/квадратные/прямоугольные. При этом сами диалоговые окна не обязательно должны быть связаны с общим интерфейсом (например баллоны и инвентарь персонажа). Это могут быть две разные совершенно сущности, как, например, в игре The Night of the Rabbit.
Но обе они не должны вызывать диссонанса, поэтому лучше всего связывать их нарративом, а если точнее — сеттингом, как в игре Deponia (сеттинг — планета-свалка, оформления — ржавчина).
Интерактив и ситуация
Любой замысел передается через сочетание изображения, текста и способа его подачи. Человек при помощи силы воображения способен интерпретировать и генерировать всеразличные изобразительно-вербальные комбинации, додумывая и достраивая смыслы. Не сложно догадаться, какое из этих изображений, каким именно «голосом» говорит с читателем.
Оформление может подсказать нам, что именно мы сейчас наблюдаем — диалог, монолог или, возможно, внутренний голос главного героя. В мобильной игре City of Love: Paris используется вполне классическое решение для отражения подобных диалоговых переходов переходов.
Но как еще можно показать внутритекстовые взаимодействия персонажей и сделать диалоговое окно более интерактивным, чтобы текст вызывал желание его прочесть?
- Виньетка. В той же City of Love: Paris используется виньетка, когда перед игроком ставится значимый выбор. Получается что-то вроде создания эффекта «концентрации».
- Подергивания хвостика баллона и самого диалогового окна, таким образом оно начинает восприниматься как целостный объект. Самый наилучший пример — игра Persona 5, невероятное качество работы над диалоговыми окнами.
3. Анимация портрета или самого персонажа.
4. Цвет и выделение самого окна рамками — окошко должно быть заметным и видимым при любых условиях, для этого, иногда, затемняют задник.
5. Геймплейно — превратить механику в диалоговую ситуацию или сделать разрозненное управление голосами героев.
Воркшоп. Ошибки делают нас лучше
После рассмотрения такого масштабного количества примеров, всегда хорошо сконцентрироваться и на антипримерах. Возьмем инди-игру под названием The Lost Melody и подробно разберем мокапы.
Так как основной фокус игры сделан на нарратив, то способом подачи диалогов были выбраны именно диалоговые окна. Игра довольно типичная для своего жанра — приключенческая головоломка, прямой наследник восточных JRPG.
Изначально диалоговое окно выглядело так.
Что не так? Данный вид баллона был сделан в качестве заглушки для шоукейса, чтобы не использовать стандартные решения.
Во время тестов окошко показало, что 1) текст плохо читается (кажется, что сливаются буквы, не все, но время от времени критично); 2) окошко «поглощает» персонажа, главный герой и его собеседники как будто бы отходят на задний план, их эмоции рассматривать не интересно — слишком мелко; 3) классическая для нинтендо игр стрелочка внутри баллона путает игроков, и они начинают нажимать не те клавиши, чтобы скроллить диалог; 4) размеры баллона. И еще одна проблема заключалась в том, что по задумке хотелось изобразить в интерфейсе экран мобильного телефона. Несмотря на то, что скин был вполне «обыденным» вариантом, его концепцию стоило пересмотреть.
Художница предложила варианты по идее с мобильным телефоном, получилось следующее:
После этого начался брейншторм на тему, а стоит ли вообще так сильно зацикливаться на идее с мобильным телефоном? В случае с The Lost Melody мобильный телефон, скорее, напоминал лишнюю сущность, ведь главный герой увлекается комиксами и музыкой. При чем тут телефоны и мессенджеры?
Это позволило взглянуть на дизайн по-новому, и команда путем экспериментов пришла к выводу, что нестандартные формы диалоговых окон смотрятся куда интереснее:
Оставалось лишь увязать их с сеттингом игры:
И, несмотря на то, что среди предложенных вариантов явно намечались фавориты, пришлось отказаться от всех, так как картинка брала на себя слишком большой акцент и контрастировала с пиксель-артом.
В итоге самой привлекательной идеей оказалась стилистика под комиксы, над которой последовала более плотная работа. Форма:
Цвет окошка. Данный вариант оказался не подходящим, так как на экране получилось слишком много зеленого.
Поэтому остановились на синем цвете:
Далее проверяли, нужно ли указывать имя говорящих персонажей и как это могло бы выглядеть:
Все варианты сильно перегружали окно, пришлось отказаться от каких-либо имен.
Следующим стал вопрос о том, как указывать выбор внутри окна:
Несмотря на то, что полоска смотрелась неплохо, был предложен вариант с курсором, на котором и сошлись:
Однако, визуально все еще плохо отражался выбор, поэтому его необходимо было выделить цветом:
Чтобы было ясно, как прощелкивать диалоги, добавили кнопку-индикатор для переключения:
И последним штрихом было сделать окошко более интерактивным, то есть как-то анимировать его:
При чем сделать анимацию равномерной, чтобы глазу казалось, будто все диалоговое окно это единое целое. Элементы шевелятся слева, по центру и справа.
На этом все, спасибо за внимание!
Подписывайтесь на мою группу VK: Mooshi Games
Поддержать блог можно тут: https://vk.cc/9vhpwC
