Редизайн Titan Quest під смартфони та планшети

titan

Все потрібно було (пере)створювати, але я і моя команда були неймовірно мотивовані подолати складнощі та компроміси, які неминуче виникали. Ми жодного разу не засумнівалися, що Titan Quest стане чудовою мобільною грою, і завжди вірили, що вона заслуговує на своє місце на мобільних платформах.

Я не міг вносити зміни до оригінальної гри, тому для реалізації мобільної версії багато елементів мали еволюціонувати. Завдання, що стояло переді мною, було значним…

UX: спрощуємо керування, залишаємо тільки необхідне

Як отримати з цього (Мал. 1) ось це (Мал. 2)?

редизайн

У яку б hack'n'slash-гру ви не граєте, ви завжди чекаєте, що на екрані буде безліч елементів: заклинання, еліксири, зброя, вихованці і т.д., коротше все те цікаве, що є в цьому жанрі. Факт у тому, що у вашій подорожі кожна кнопка має важливу та чітко задану роль. Однак, тут є певна складність, тому що кожен гравець може налаштувати свій «набір кнопок» залежно від класу та розвитку персонажа. На ПК це зробити просто – персонаж переміщається мишею, а клавіші клавіатури виконують дії. Але при грі на сенсорному екрані гравець має лише пальці! Для зручності люди зазвичай грають великими пальцями на повернутий горизонтально мобільний пристрій.

Пам'ятаючи це, можна зрозуміти, що ідеальним місцем для групування основних кнопок дії буде нижня частина екрану. Верхня частина містить ігрову інформацію: смужки здоров'я та мани, портрет персонажа, карту, кнопку паузи тощо.

titan

Крім того, у такій грі, як Titan Quest, переміщення персонажа торканням екрана не застосовується, тому що пальці гравця не повинні закривати ігрове поле. Натомість великі пальці гравцяпостійно «приклеєні» до екрану, переміщуючи персонажа та активуючи дії. Тут ідеальним вибором став віртуальний джойстик. Він добре відомий гравцям, такий пристрій ми вбудовували в безлічі наших ігор, тому що він не займає багато місця. І, зрозуміло, інтерфейс має бути досить вузьким, щоб не знижувати видимість.

quest

У Titan Quest найчастіше використовуються кнопки для заклинань, зброї, еліксирів та порталу телепортації. Тому я розташував їх так, щоб вони були доступними і щоб зменшити відстань, на яку пальці переміщаються по екрану.

редизайн

Я розмістив кнопку порталу та кнопку підняття/відображення лута зліва, поряд з віртуальним джойстиком. Це дозволяє гравцеві пробігати над предметами землі і легко піднімати їх. Крім того, відсутність цієї кнопки в бою не дозволяє персонажу піднімати предмети тоді, коли він повинен атакувати. Ці кнопки не обов'язкові в бою, до того ж пальці гравця залишаються завжди поряд з віртуальним джойстиком.

quest

Постійно видно чотири заклинання, кожне з них можна налаштувати, утримуючи протягом двох секунд потрібну кнопку. Відкривається меню з доступними заклинаннями. Торкнувшись потрібного заклинання, можна налаштувати кнопку. Під колом дій знаходиться кнопка перемикання заклинань. У Titan Quest є вражаюча кількість заклинань, тому ми не хотіли обмежувати гравців всього чотирма. Натомість я створив два набори з чотирьох заклинань (у наборі А знаходяться заклинання 1-4, а в наборі Б - 5-8). Натискаючи кнопку перемикання заклинань, гравець може перемикатися між наборами А та Б.

Під час розробки у нас виникла пов'язана із заклинаннями проблема: деякі заклинання націлені на одного ворога, інші впливають на область. наПК гравець просто повинен натиснути на піктограму заклинання, націлити курсором і лівою клавішею активувати заклинання. Але для сенсорного екрану такий варіант не підходить. Наприклад, якщо для активації заклинання потрібно торкнутися значка, а потім ворога чи області, то як скасувати дію? Тому ми вигадали для заклинань інший підхід: гравець просто перетягує заклинання зі значка і «кидає» його на потрібного ворога чи область. До того ж, для зручності прицілювання ми додали пунктирну лінію, яка показує гравцю, куди він цілиться. Деякі бої досить напружені, тому ми додали ефекту сповільненої дії при прицілюванні.

quest

"Заклинання зброї" - це ще одна кнопка під колом дій. Вона дозволяє гравцеві призначити постійне заклинання для обраної зброї. Це дає гравцю постійне заклинання зброї, а не просто базову атаку, але вона коштує одиниць мани. Коли смужка мани порожня, заклинання зброї знову перетворюється на базову атаку. У правій частині екрана над колом дій показані еліксири та їх кількість. Ми додали за замовчуванням налаштування автоматичного використання еліксирів, коли здоров'я гравця знижується до певного рівня.

У нижній частині екрана, між кнопкою порталу телепортації та кнопкою перемикання зброї (як і у версії для ПК, вона дозволяє перемикатися між першою та другою зброєю) знаходиться шкала досвіду. Вона показує, наскільки гравець близький до наступного рівня.

Створення нового інтерфейсу із збереженням оригінальних елементів та стилю

При створенні всіх нових кнопок і елементів, які були відсутні у версії для ПК, я надихався художнім стилем Titan Quest. Я використовував кольори охри, піску та каменю, а форми інтерфейсу нагадують стародавні арабески. Для поліпшення зрозумілості таякості було перероблено деякі значки, наприклад, кнопки перемикання зброї та телепортації.

quest

Також я створив різні значки для кола дій, щоб гравець отримував наочний зворотний зв'язок від кожної вибраної дії. Тому було необхідно не тільки створити значок для кожного типу зброї (мечі, луки та палиці), але й два види передбачуваних дій: значок підняття/взаємодії та значок діалогу з NPC. Працюючи над останніми двома діями я надихався мистецтвом Стародавню Грецію, і особливо малюнками людей на фресках і чашах, які часто являли собою чорні фігури з контуром з охри.

quest

Адаптація екранів

Екрани інвентарю, умінь і квестів теж зазнали адаптації. У версії для ПК ці екрани відкриваються в окремих вікнах і гра не зупиняється, коли вони відкриті. Але для адаптації під мобільні пристрої ми вирішили зробити ці вікна повноекранними та призупиняти гру на фоні. Відповідно, необхідно було переналаштувати елементи кожного з екранів, тому що ми хотіли відобразити такий обсяг інформації, що і на екранах ПК. Наприклад, ми вибрали вікно для відображення всієї статистики гравця. У версії для ПК вона відображається у двох окремих вкладках. Для керування предметами в інвентарі у версії для ПК використовувався простий drag'n'drop і для призначення предмета активним екіпіруванням (набір 1 або 2), і для викидання. Сенсорний екран дозволяє використовувати той самий підхід. Для викидання предметів створив просте поле «сміття».

titan

Ще однією інновацією цих екранів стала можливість перемикатися між ними без повернення до основного екрану. Я додав на кожен екран три значки з оригінальної гри. Це просте меню, яке завжди відображається в одному місці,дозволяє гравцям перемикатися між екранами. Я перемалював ці значки у стилі оригіналу, але у вищій роздільній здатності.

редизайн

І, нарешті, для екрану управління «уміннями» я адаптував систему «окулярів», тому що система на ПК була надто маленькою та складною у використанні. Завдяки додаванню в нижню частину екрана модуля розподілу очок гравець може швидко підвищувати рівень заклинань, які хоче використовувати. Усі значки, що належать до вмінь, теж перероблені, щоб краще було видно виділені та невиділені пункти. Для екрану квестів та карти достатньо було простого перекомпонування.

Модуль розподілу очок, доданий на екран «умінь» мобільної версії:

редизайн

Новий значок

Тепер ми переходимо до одного з найважливіших елементів мобільної гри: основний значок.

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

редизайн

Отже, чого ж я навчився під час роботи над Titan Quest? Багато чого: я дізнався, що хоча адаптація комп'ютерної hack'n'slash на мобільні пристрої – складне завдання, вона справді захоплює. Занурення в стилістику, що вже існувала, звичайно обмежувало мої дизайнерські можливості, але й допомагало розширити межі моєї креативності. Воно дозволило створити більш точні та значні результати порівняно з роботою «з нуля».

Також я зрозумів, що на новій платформі можна додатибезліч нових тонкощів та ідей, в той же час зберігаючи неповторний ігровий досвід такої відомої гри, як Titan Quest. Потрібно докладати максимальних зусиль, щоб забезпечити звичність геймплею для гравців на ПК. Але водночас потрібно створити й унікальний сучасний ігровий досвід для нових гравців.

Робота над цією грою значно підвищила колективний досвід кожного співробітника DotEmu. Фундаментальні етапи дизайну, удосконалені нами під час портування цієї гри, заклали надійну основу для майбутніх ПК-ігор, які ми адаптуватимемо для мобільних пристроїв.

А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»