company_banner
11 июля в 12:23

Pathfinder: как мы делаем интерфейс для CRPG

image


Привет, Хабр! У нас в компании уже около года существует направление экспериментальных игровых разработок, и сегодня хотим рассказать об одной из них. Мы Owlcat Games, и в рамках кикстартерной компании разрабатываем игру Pathfinder: Kingmaker — это однопользовательская CRPG с изометрической графикой (привет, олдскульщики!). В этом посте расскажем о том, как мы делаем интерфейс для нашей игры.


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


Для реализации принципа «погружение» до начала работы над оформлением интерфейсов мы смотрим на реальные вещи той эпохи, которая ближе всего подходит к Pathfinder: Kingmaker. Это могут быть старые книги, свитки, сундуки, поясные кошельки и книги, письменные инструменты и кафедры, карты и походные журналы. Все это находит отражение в интерфейсах.


image



Для реализации принципа «удобство» нам помогают UX-исследования и правильно построенный pipeline производства.


Итак, давайте поговорим о том, как же мы ведем нашу работу. Каждый интерфейс — от больших, насыщенных окон до маленьких тултипов — проходит несколько этапов и итераций.


image


Мы придерживаемся следующей схемы работы. Вначале тщательно анализируем будущий контент и делаем первые наброски, которые представляем команде. Далее разрабатываем схемы взаимодействия и на основе этого создаем первые static wireframes, т. е. фактически «чертеж» интерфейса, чтобы понять, как он будет выглядеть, оценить информативность и компоновку элементов. Как правило, за этим следует горячее обсуждение. Например, наш геймдизайнер хочет видеть больше цифр, ВЕЗДЕ, чем больше цифр — тем лучше. При этом технический художник упорно настаивает на том, чтобы интерфейс был максимально атмосферным, а с информацией — как пойдет. И отказать ему бывает сложно. В общем, лавируя между мнениями, как Одиссей между Сциллой и Харибдой, мы находим удовлетворяющий всех баланс. Далее — реализация функционала, арт и плейтесты, после них — снова доработка функционала и арта. И так до того момента, пока результат не удовлетворит всю команду и игроков на фокус- и UX-тестах.


Внутри команды иногда бывает сложно оценить результат работы. Специально для этого мы проводим UX-исследования в нашей UX-лаборатории, привлекая и активных членов сообщества Pathfinder Society, и людей, которые просто любят игры в целом и CRPG в частности. Исследования помогают нам реализовывать принцип «удобство». Для первого тестирования в начале марта этого года мы пригласили своих коллег и друзей, отчасти — чтобы похвастаться, отчасти — для экспертной оценки. И хотя версия была довольно сырой и неполной, мы смогли получить много материала для анализа.


image
Heat map интерфейса Rest


image
Eye tracking в диалоге


image
Heat map боевки


По результатам последнего исследования был составлен отчет на 66 страницах. При его разборе появилось более сотни уникальных задач. Часть из них выявила очевидные проблемы, а часть показала, что наши решения не всегда работают так, как мы ожидали. Например, при анализе интерфейса Rest мы обнаружили следующие проблемы (см. Heat map интерфейса Rest). Респонденты не понимали:


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

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


image
Скетч журнала


image
Поиски


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


image


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


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


image


Но на деле все оказалось несколько сложней. Поиски были долгими и нелегкими.


image


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


image


И вот что у нас получилось в конце. Кажется, неплохо.


image


Но работа не заканчивается никогда, всегда есть возможность улучшить как арт, так и UX в целом.


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


image


В итоге мы остановились на Book Antiqua. Он нам показался компромиссом между всеми требованиями.


image


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

Автор: @Barka
Mail.Ru Group
рейтинг 601,60
Строим Интернет

Комментарии (12)

  • +2
    По поводу книжки: понятно, что выводить текст текстом проще, однако несоответствие геометрии текста и книги очень ломает мозг. Если уж выбрали изометрический вид — стоит хотя бы сдвигом строк текст немного подогнать под положение книги, а лучше отрендерить на текстуру и по честному её трансформировать.
    • 0
      Да, так и есть, в игре подгонял под положение книги.
  • +2
    В первые же дни поддержал на KS. Надеюсь игра будет на уровне Проклятых Земель. Но хотел бы больше подробностей, а то почти вся статья — это тексты их прошлых апдейтов )=
    • 0
      Спасибо огромное за поддержку! И да, это статья оригинал, который был подроблен для двух апдейтов. У нас сейчас закончитсья KS и мы планируем активно начать писать на хабр.
    • 0
      на мой вкус Проклятые земли это не то к чему надо стремиться, может быть я в них мало играл…
      • 0
        А на мой взгляд ровно наоборот, великолепная RPG, проходил до дыр.
  • +1
    Любопытно. Не одни мы с UI мучаемся и переделываем по несколько раз. До heatmap не доводили, впрочем.
    Почему про самое интересное, то есть про собственно игровой интерфейс, ничего?

    Картинки «финального» варианта в жутком мыле «чтобы не украли»? В гифах четкий текст, а в финальном варианте все расплывается из-за качества jpg.
    • 0
      Оригиналы картинок
      https://owlcatgames.com/images/ks_update_ui_art/Fonts.gif
      https://owlcatgames.com/images/ks_update_ui_art/Journal_gif.gif
      https://owlcatgames.com/images/ks_update_ui_art/Journal_semi_final.jpg
      https://owlcatgames.com/images/ks_update_ui_art/Refs.jpg
      https://owlcatgames.com/images/ks_update_ui_art/UI_Prod_Workflow_simple.png
      https://owlcatgames.com/images/ks_update_ui_art/font_book_antiqua.png
      https://owlcatgames.com/images/ks_update_ui_art/journal_mock_fullscreen_02.jpg
      https://owlcatgames.com/images/ks_update_ui_art/kingmaker_dialogue_eye_tracking.jpg
      https://owlcatgames.com/images/ks_update_ui_art/kingmaker_heat_map_battle.jpg
      https://owlcatgames.com/images/ks_update_ui_art/kingmaker_heat_map_rest.jpg
  • 0
    Например, при анализе интерфейса Rest мы обнаружили следующие проблемы...

    Такой основательный подход, конечно, достоин похвалы, но что касается именно картинки интерфейса Rest, то там с первого взгляда, по моему, понятно что интерфейс так себе. Я бы даже наоборот сказал: с первого взгляда вообще непонятно что от игрока хочет этот интерфейс, выглядит неинформативно и пари этом перегруженно. Имхо

  • 0
    Спасибо за статью!
    Слышал о Вашей кампании на Кикстартере, выглядит интересно.
    А вот чего я не знал, что Owlcat Games — часть mail.ru, удивился… А после дополнительной проверки оказалось, что Вы и к Nival имеете отношение. Портфолио у Вас хорошее, надеюсь, и в этот раз всё получится )
  • 0
    Курьёзно получается в правильно построенном pipeline на стадии Implementation на вопрос Repeat? No — возвращаемся и повторяем. Yes — продолжаем.
  • 0
    Заинтересовали. Когда релиз? Не понимаю слишком большое нагромождение информации на экране, портит атмосферность.

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

Самое читаемое Дизайн