Gamedev Дмитрий Мучкин
4 660

Читаемость превыше всего: создание интерфейса в Into the Breach

Разработчикам потребовалось два года, чтобы создать функциональный UI.

В закладки

Into the Breach — это тактическая пошаговая стратегия от Subset Games, авторов FTL. В ней игрок проходит миссии, управляя тремя огромными роботами. Ему доступно очень много информации: что собирается делать каждый персонаж, как его действия повлияют на состояние карты, а также что находится на каждой клетке и в каком оно состоянии.

Все эти данные передаются игроку через интерфейс. Как рассказали дизайнеры игры Мэттью Дэвис (Matthew Davis) и Джастин Ма (Justin Ma) в беседе с Rock Paper Shotgun, создание понятного и функционального UI потребовало у них много сил и времени.

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

Какое-то время в игре была возможность атаковать в радиусе трёх клеток вокруг героя, но потом мы обнаружили, что если показывать радиусы атак всех противников, то карта превращается в бардак.

Джастин Ма
дизайнер Into the Breach

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

Один из прототипов Into the Breach

Индикаторы урона заполняли всю карту. Мы-то знали, что они означают, но как только за игру садился тот, кто её никогда не видел, становилось понятно, что нужно всё упрощать.

Мэттью Дэвис
дизайнер Into the Breach

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

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

Один из прототипов Into the Breach

Into the Breach объясняет, как работает оружие, с помощью подсказок. Они тоже подверглись изменениям в ходе разработки: сначала это были текстовые пояснения с заранее заготовленными картинками. Плейтесты показали, что такой подход не очень хорошо работает.

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

Джастин Ма
дизайнер Into the Breach

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

Один из прототипов Into the Breach

Ещё одна составляющая интерфейса — это эффекты на клетках. К примеру, если робот покрыт пылью, он не может стрелять, горящие юниты получают урон со временем, покрытые A.C.I.D. персонажи получают двойной урон и так далее.

Эффекты взаимодействуют с миром согласно логике, и все варианты этих взаимодействий разработчикам пришлось иллюстрировать и продумывать. Как вспоминают дизайнеры, каждый новый вид клеток или новый эффект порождал ещё десяток вопросов вроде: «Что происходит, если юнит закован в лёд, и его толкают в огонь с помощью A.C.I.D.-атаки?».

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

Один из прототипов Into the Breach

Полтора года назад Into the Breach была забита иконками. Мы добавляли их каждый раз, когда плейтестеры не замечали важную информацию. В конце концов пришлось вырезать многие из них. Мы всегда были готовы пожертвовать крутыми идеями ради читаемости интерфейса. Если что-то можно было изобразить максимально понятно, то мы это добавляли.

Мэттью Дэвис
дизайнер Into the Breach

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

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

Джастин Ма
дизайнер Into the Breach

#инди #intothebreach #игры

{ "author_name": "Дмитрий Мучкин", "author_type": "editor", "tags": ["\u0438\u0433\u0440\u044b","\u0438\u043d\u0434\u0438","intothebreach"], "comments": 23, "likes": 60, "favorites": 30, "is_advertisement": false, "subsite_label": "gamedev", "id": 17475, "is_wide": false }
{ "id": 17475, "author_id": 6322, "diff_limit": 1000, "urls": {"diff":"\/comments\/17475\/get","add":"\/comments\/17475\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/17475"}, "attach_limit": 2, "max_comment_text_length": 5000 }

23 комментария 23 комм.

Популярные

По порядку

Написать комментарий...

Victor Traskovsky

10

на мобилку бы...

Ответить

Funashimi

Victor
10

Идеальная игра для портативных устройств, да.

Ответить

zblrk

Victor
6

ну FTL от той же студии вышел на iOS. так что и эту тоже портируют.

Ответить

Oleg Beloshevich

zblrk
0

на андроид увы так и не вышла

Ответить

Vladislav Khromov

1

Хорошая игра, но почему-то после 10 часов в ней желания включать больше нет. До FTL не дотягивает, как по мне.

Ответить

Tikhon

Vladislav
2

Там нет такого дикого рандома, сложности и разнообразия как в FTL (особенно с модом арсенал), да и мелодии скучные, быстро надоедают. Главная особенность ITB её же и хоронит: шахматная стратегия.

Ответить

t!ntom

Vladislav
0

10 часов для такой игры нормально, тем более у нее хорошая реиграбельность

Ответить

Кирилл Костромин

Vladislav
0

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

Ответить

Funashimi

1

Для меня единственным непонятным местом в интерфейсе были двигающиеся платформы на четвёртом острове(со стрелочками). Сначала подумал, что они до конца двигают юнит, а оказывается только на 1 клетку...
В остальном интерфейс простой и функциональный, загляденье.

Ответить

Antony Sumin

Funashimi
0

А я каким-то юнитом перекрывал стрелочку с направлением движения. Не критично, но все же недоделка.

Ответить

Константин Рогов

1

"Также пришлось отбросить идею необычных видов атак — например, по площади в виде звезды или треугольника. Разработчики не хотели, чтобы игра превратилась в упражнение по мысленному вращению фигур"

Плохому танцору известно что мешает. В Disgaea почему-то все норм работает с ударами по площади.

Ответить

Jack Cade

Константин
0

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

Ответить

Antony Sumin

0

FTL бесплатно досталась за покупку "Into the Breach".
Запустил, потыкался, не понял, в чем прикол. Полез ролики смотреть - чуть не заснул.
А вот Into the Breach зашла отлично. Боевые шахматы. Так что даже хорошо, что жанры настолько разные.

Ответить

Funashimi

Antony
0

У меня с FTL был тот же самый опыт, но через некоторое время решил дать второй шанс, так как уж слишком все расхваливали игру. И после наверное третьего часа, когда я понял что к чему, игра для меня открылась и вот уже почти 50 часов наиграно в стиме и это только начало!

Ответить

Paul Prospero

0

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

Ээ, чего? И оружие, метающее булыжники, и оружие с уроном/защитой по крестообразным областям, и атака вообще любой клетки на поле - все это есть в игре.

Ответить

Дмитрий Мучкин

Paul
0

Как я понял, оружие с булыжниками стреляет «навесом», как артиллерия, а не по прямой, как в ранних прототипах.
А по поводу трёх типов не знаю: так в оригинале написано, а сам я не играл :(

Ответить

Paul Prospero

Дмитрий
0

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

Ответить

Antony Sumin

0

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

В целом, отличная игра и отличный интерфейс. Я всего раз или два за 60 часов игры проглядел из-за дыма / огня, что клетка под ударом или из неё вылазит зерг.

Ответить

Arjuno

0

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

Ответить

AFountaine

Arjuno
0

Приоритет стоит на alt

Ответить

Arjuno

AFountaine
0

Спасибо!

Ответить

Paul Prospero

Arjuno
0

На первом же скриншоте в статье, слева от "Victory in 2 turns" изображение Века с надписью "Attack Order" (вот и хваленый читабельный интерфейс)

Ответить

Arjuno

Paul
0

Спасибо! Узнал бы раньше...

Ответить
0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "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": "createAdaptive", "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-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]