​Как создается игровой интерфейс

Друзья!

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

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

От дизайна до релиза

С первых минут в Skyforge игрок постоянно пользуется интерфейсом: начиная с кнопки «Вход в игру» и заканчивая окошком улучшения экипировки. Практически каждая новая «фича» (от английского feature — «особенность») нуждается в интерфейсной поддержке: графических элементах и меню, логике и связях с другими системами.

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

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

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

На этом этапе мы стараемся продумать все возможные сценарии поведения игрока. Дизайнер интерфейсов плотно общается с автором «фичи» и программистами. Важно не просто найти решение для каждого случая, но и убедиться в том, что оно реализуемо в рамках существующих технических ограничений и сроков разработки. Учесть все мелочи в дизайн-документе бывает сложно, так что некоторые параметры (например, какое максимальное количество знаков будет в определенном текстовом поле через год) уточняются прямо по ходу разработки.

Набросок интерфейса карточки приключения с описанием всех элементов и механики их работы.

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

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

Концепт-арт интерфейса столицы.

Команда вновь собирается, чтобы обсудить финальный вариант интерфейса. Затем либо вносятся необходимые правки, либо дизайн считается утвержденным и фиксируется на странице проекта со всеми необходимыми описаниями. Ссылку на эту страницу получают все члены команды — каждый может прокомментировать или задать вопрос. После этой процедуры нередко всплывают шероховатости, которые стоит поправить. Когда все учтено, дизайн отдается на реализацию программистам. Они пишут код, подключают графику и заставляют интерфейс работать. В процессе подключения программисты обращаются к дизайнерам, задают вопросы и уточняют тонкости работы будущей «фичи». Разработчик интерфейсов помогает с версткой.

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

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

Когда все заинтересованные удовлетворены результатом, интерфейс отдается команде QA для тестирования. Они выявляют проблемы и шероховатости, которые стремительно исправляет команда интерфейсов. В конце концов новая «фича» появляется на сервере вместе с очередным обновлением. Довольные игроки начинают пользоваться интерфейсом. Пишут восторженные отзывы, которые запускают весь этот процесс заново.

Постоянная работа

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

Нельзя просто так взять и переделать интерфейс. На скриншоте — один из отклоненных вариантов оформления.

Почему только при доработке? Эта тема достойна отдельного упоминания. Дело в том, что на данный момент в Skyforge более 250 экранов и две цветовые схемы. Внося изменения, затрагивающие все интерфейсы, мы очень рискуем. С большой вероятностью что-то может пойти не так: где-то появятся белые надписи на светлом фоне, кнопки станут малозаметными или найдутся другие ошибки. Просчитать все наперед не представляется возможным, поэтому второй вариант интерфейса значительно увеличивает количество работы для дизайнера и команды QA — нужно рисовать и тестировать в 2 раза больше. В приоритете у разработчиков всегда вариант оформления, установленный по умолчанию. Его используют 98% игроков, так что проблемы с ним устраняются быстрее.

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

Поддержать альтернативный вариант интерфейса, а не другую цветовую схему, еще сложнее. Нужно написать новую логику работы, продумать, как сохранить всю имеющуюся механику. Необходимо проверить читабельность всех текстов, оценить внешний вид отдельных элементов и удобство использования обновленных меню. Это огромный пласт работы программистов, дизайнеров и QA. Конечно, выбирая между этой задачей и созданием новых экранов для разрабатываемых «фичей» либо доработкой старых по просьбам игроков, мы выберем второе. Так, например, недавно мы ввели систему улучшения экипировки и продолжим заниматься ею в ближайшее время, чтобы ее работа не вызывала вопросов, а игроки активно использовали новые возможности Skyforge.

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

Консоль и геймпад

Еще на этапе разработки игры мы мечтали реализовать поддержку геймпада и запуститься на консолях. И когда мы все же решились — это был настоящий вызов. Skyforge стал нашим первым проектом, который вышел на PS4 и поддерживает геймпад на PC.

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

Скорость курсора

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

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

На скриншоте набросок интерфейса, на котором объясняется, как модуль будет работать на консоли.

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

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

Сравнение размеров надписей PC-версии Skyforge c разными консольными играми. При сравнении шрифтов в схожих ситуациях стало понятно, насколько нужно увеличить размер надписей.

Удобство — это главное

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

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

Крошечное главное меню на PC и его полноэкранный аналог для PS4. Здесь можно перемещаться по всем разделам интерфейса, а также менять класс персонажа.

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

На этом все! Появились вопросы? Хотите предложить новую тему для рассказа? Напишите об этом в комментариях.

Вам может быть интересно:

Похожая публикация:

Как создаются классы в Skyforge

Похожая публикация:

Знакомство с командой: Quality Assurance