{ "author_name": "Евгений Апель", "author_type": "self", "tags": [], "comments": 0, "likes": 4, "favorites": 1, "is_advertisement": false, "section_name": "default", "id": "3082", "is_wide": "" }
Евгений Апель
177

Разработка Titan Quest для мобильных платформ

Креативный директор компании DotEmu Стефан Перес, в своем блоге на портале Gamasutra, опубликовал статью о разработке Titan Quest для мобильных платформ.

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

Ниже приведен перевод данной статьи.

Поделиться

В избранное

В избранном

Как адаптировать Titan Quest, классическую hack ’n slash игру, полюбившуюся целому поколению PC-геймеров, для планшетов и мобильных устройств? Это было испытание, которое потребовало почти 20 месяцев размышлений, итераций и разработки, чтобы правильно перезапустить этот удивительный тайтл для армии поклонников.

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

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

UX: упрощение управления без лишних движений

Как перейти от этого (рис. 1) к этому (рис. 2)?

Рис. 1 - Оригинальный Titan Quest; рис 2. - Версия Titan Quest для iPad

Вне зависимости от того, в какую hack ’n slash игру вы играете, игрок всегда ожидает увидеть большое количество элементов интерфейса вокруг игрового экрана: заклинания, зелья, оружие, призываемые существа и т.д. — одним словом, все самое интересное, что присутствует в данном жанре. Дело в том, что на протяжении всей игры каждая кнопка имеет важную, четкую функцию. Тем не менее, каждый игрок может настроить игровой интерфейс в зависимости от класса и прокачки своего персонажа, что вызывает некоторые трудности при адаптации игры для мобильных устройств. Это просто сделать на PC — мышь отвечает за перемещение персонажа, а действия назначаются на кнопки клавиатуры. Но при игре на сенсорном экране у вас есть только ваши пальцы! И ради комфорта, люди, как правило, используют свои пальцы с мобильным телефоном, перевернутом в горизонтальное положение.

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

Элементы интерфейса версии Titan Quest для мобильной платформы

Кроме того, перемещение персонажа по нажатию пальцем не является хорошим выбором для такой игры, как Titan Quest, потому что вы не захотите, чтобы конечности игрока были прикованы к дисплею и скрыли все происходящее на экране. Виртуальный стик стал здесь идеальным выбором: он хорошо известен игрокам, и его мы использовали во многих наших проектах, так как он не требует много места. И, конечно же, HUD должен быть достаточно емким, чтобы не поставить под угрозу видимость игрового процесса.

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

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

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

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

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

В нижней части экрана, между кнопками портала и «смены оружия» (которая так же, как в PC-версии, позволяет игроку перейти от набора оружия 1 к набору 2), расположена полоска опыта. Она показывает игроку, как близко он находится к переходу на следующий уровень.

Построение нового интерфейса, используя оригинальные элементы и стиль

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

Я также создал различные иконки для кольца действий таким образом, чтобы игрок получал визуальную обратную связь от каждого выбранного действия. Поэтому необходимо было не только создать иконку для каждого типа оружия (мечи, луки, посохи), но и для двух видов предлагаемых действий: иконка подбора/взаимодействия и иконка «диалога с NPC». Для этих действий я вдохновлялся искусством Древней Греции, в частности, изображением человека на рисунках различных фресок и чаш, которые зачастую представляют из себя черные символы с контуром цвета охры.

Иконки разных типов оружия и действий

Адаптирование вкладок

Инвентарь, раздел навыков и журнал квестов также были изменены. В PC-версии все эти разделы открываются в окне, и игра не ставится на паузу, когда игрок открывает их. Но для мобильной версии мы решили представить эти разделы в полноэкранном варианте и приостановить игру в фоновом режиме. Также было необходимо перегруппировать разные пункты на каждом экране, потому что мы хотели расположить как можно больше информации, почти как на мониторе компьютера. Например, мы выбрали выпадающее окно со списком, чтобы отобразить всю статистику игрока; в версии для PC это делается с помощью двух отдельных вкладок. Для управления инвентарем персонажа, в PC-версии используется простое перетаскивание для того, чтобы либо назначить вещь в качестве "активного снаряжения", либо выбросить. Сенсорный экран позволяет реализовать тот же подход. Для выбрасывания ненужных вещей я внедрил простую систему значка мусорного ящика.

Инвентарь из оригинальной и мобильной версий

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

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

Модуль распределения очков во вкладке навыков был добавлен в мобильную версию

Новая иконка

Сейчас мы подошли к одному из самых важных элементов мобильной игры: главной иконки запуска.
Когда PC-версия Titan Quest была выпущена, иконка была расположена только на рабочем столе пользователя. Но на сегодняшнем «умном» рынке иметь лаконично-простую и легко-узнаваемую иконку игры имеет решающее значение — в основном, чтобы выделиться среди миллиона приложений и игр, которые заполонили виртуальные витрины магазинов, вроде ITunes и Google Play.

Я решил, что спартанский шлем был хорошим выбором для иконки, так как он соответствует значку PC-версии. После нескольких итераций, окончательный вариант, который я выбрал, очень похож на древнегреческое изображение. Шлем сильно стилизован, включая черный цвет на фоне, который появляется в виде трещин, повреждая светлую стену цвета охры. Кроме того, значок подчеркивается границами повторяющихся геометрических узоров, характерных для исторического периода игры.

Чему я научился в данном проекте?

Много чему. Я узнал, что даже несмотря на то, что адаптация PC-версии hack ’n slash игры на мобильные устройства является непростой задачей, это очень интересно. Погружение в существующие рамки, безусловно, ограничило мои возможные варианты дизайна, но при этом помогло расширить границы моего творчества, позволив достигнуть более существенных результатов, чем если бы я начал с нуля.

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

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

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Узнавайте первым важные новости

Подписаться
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-549065259", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxeub&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&puid32=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } } ]