Gamedev Артемий Леонов
8 637

Дизайн интерфейса Destiny

История создания и советы от дизайнера интерфейсов игр Bungie.

В закладки

Мы выбрали самое важное из выступления Дэвида Кэндлэнда — дизайнера интерфейсов, работавшего в том числе над тремя частями Halo, — в рамках GDC. В нём он рассказывает о создании интерфейса для первой Destiny, о проблемах, с которыми ему пришлось столкнуться в процессе разработки, и о методах их решения.

Свободный курсор

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

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

Во-вторых, как утверждает Дэвид, интерфейс с анимированными интерактивными элементами, по которому можно свободно перемещаться при помощи курсора, выглядит «сексуально».

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

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

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

Наши карты выглядят естественно. Если бы вы захотели переместиться, например, из Skywatch в Mothyards, локацию, которая находится от нас строго по диагонали, то у вас был бы пятидесятипроцентный шанс угадать: «Мне нужно нажать вниз или направо?».

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

Дэвид рассказывает, что Джейсон Джонс (сооснователь Bungie и руководитель разработки Destiny) поддержал эту идею, но поставил перед командой несколько задач относительно курсора. Прежде всего он попросил Дэвида «потратить на это столько же времени, что и на автоприцеливание». Дело в том, что со времён Halo в Bungie уделяется огромное внимание автоприцеливанию; тому, чтобы оно ощущалось в точности так, как необходимо.

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

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

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

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

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

Иконки снаряжения

Когда дело дошло до дизайна иконок снаряжения, Джонс снова поставил перед командой несколько задач. Во-первых, каждая иконка должна была очень чётко отображать сам объект —чтобы игрок мог понять, что это такое, даже при беглом взгляде на неё. Во-вторых, они должны были казаться «реальными», «осязаемыми».

Мы очень быстро поняли, что с таким огромным инвентарём у нас не получится показывать игроку всё, чем он владеет, на одном экране. Поэтому нам пришлось отображать реальные предметы иконками. Если вместо модели оружия ты получаешь просто иконку, это не приносит приятных ощущений —если мы (разработчики) отдельно об этом не позаботимся. Иконки должны выглядеть «осязаемыми» и вызывать восторг, когда ты их видишь.

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

И, наконец, иконки должны были быть достаточно маленькими, чтобы игрок мог видеть всю свою коллекцию на одном экране (но в то же время достаточно большими, чтобы каждую можно было узнать «даже при беглом взгляде»). И их должно было быть очень много —«тысячи уникальных иконок». По словам Кэнлэнда, здесь было над чем поработать.

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

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

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

Интерфейс и локализация

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

Во-первых, для каждой надписи он рекомендует оставлять «40-процентный буфер». Этого свободного места должно быть достаточно, чтобы локализаторам не приходилось страдать от того, что их перевод не умещается в отведённое для текста пространство.

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

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

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

Каждая строчка на этой картинке состоит из одинакового количества символов — двадцати одного. Если вы скажете автору, что он может использовать до двадцати одного символа, то он теоретически может выйти за границы кнопки — в зависимости от того, сколько он будет использовать заглавных W, M и пробелов. Так что лучше делать ограничение расплывчатым, но стремящимся к меньшему количеству символов. Например, в этом случае я бы сказал «где-то между 18 и 23 знаками».

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

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

Карта

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

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

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

У нас много игроков, которые просто приходят и говорят: «Я просто хочу пострелять в кого-нибудь, вот и всё! Куда мне обратиться?». А на нашей карте сложно было быстро что-нибудь найти. Нам пришлось задуматься о Пьяном Тодде и попытаться сделать так, чтобы он мог играть в нашу игру, как ему хочется.

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

С тех пор карту переделывали около десяти раз.

В определённый момент от неё вообще решили отказаться — вместо карты в игре осталось меню, в котором всё было распределено по категориям: «кампания», «награда», «рейд недели» и так далее. На этом варианте и было решено остановиться, и именно он был запущен в производство.

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

Дэвид Кэндлэнд
дизайнер интерфейсов в Bungie

Первым то, что разработчики «заблудились» в попытке создать идеальную карту (которую уже сложно было назвать «картой»), заметил Джейсон Джонс. Ему спешно пришлось добавить ещё несколько условий к предыдущим трём: теперь Дэвиду и его команде нужно было «создать ощущение места», а также «показать игрокам прошлое и будущее», «достижения и вдохновение». Иными словами: карта должна была постоянно напоминать игроку о том, чего он уже достиг, и о том, что ждёт его впереди.

Всего за несколько месяцев до релиза команде пришлось создавать полностью новый прототип, стилизованный под древние карты, и воплощать его в жизнь. Как считает Дэвид, эта напряжённая работа оправдала себя.

#destiny

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

Написать
{ "author_name": "Артемий Леонов", "author_type": "editor", "tags": ["destiny"], "comments": 34, "likes": 53, "favorites": 22, "is_advertisement": false, "subsite_label": "gamedev", "id": 14500, "is_wide": false, "is_ugc": false, "date": "Thu, 11 Jan 2018 14:26:00 +0300" }
{ "id": 14500, "author_id": 3792, "diff_limit": 1000, "urls": {"diff":"\/comments\/14500\/get","add":"\/comments\/14500\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/14500"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

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

Популярные

По порядку

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

Ух ты! Да это же GDC двухлетней давности. Когда постмортем по Half-Life?

Ответить
2

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

Кстати, в No Man’s Sky интерфейс ну очень уж похож. Совпадение?

Ответить
2

В AC Origins похож тоже, и курсор есть. Вот бы все уже начали так делать.

Ответить
0

вот бы в ведьмаке 3 так

Ответить
1

Да, вот там-то я чаще всего вспоминал курсор из Дестини, ибо это ад был)

Ответить
1

Это я странный, или интерфейс первой игры гораздо круче сиквела?

Ответить
2

Он такой же

Ответить
0

Дизайн интерфейса как игрового, так инвентаря мне показался приятнее, нежели во второй части.
Но всё это уже вкусовщина, так они, по функционалу, одинаковы.

Ответить
–6

Осталось только отказаться от геймпадов и наконец сделать клавомышь стандартным устройством ввода.

Ответить
3

Потом расширить область действий и назвать это ПеКа.

Ответить
2

Ну вот как раз нет.
Геймпад не накладывает требований по твоему расположению.
КлаваМышь требует стола, нормального коврика и вот это все.

Да, я знаю, что есть беспроводные клавы-мышки. Но вы сами то пробовали?) Все это дичь и годится разве что для запуска сериала на компе. В остальном это боль.

Ответить
1

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

Ответить
0

А у меня мышь на стуле , клава на коленках)

Ответить
0

а можно тройку игор в которых это удобно?

Ответить
0

ведьмака3 так прошел
пока что все, я на тв играю недавно

Ответить
0

а чем плохо играть за столом?

Ответить
2

Ничем. Просто после 9 часов на работе за столом хочется как-то сменить позу :)

Ответить
–1

-Прдключили мышь к PS4
-Подвигали курсором и перенесли управление на геймпад с помощью Xpadder
-Назвали инновацией

Ответить
1

Ну вот не надо. Интерфейс в Destiny совсем не под мышь создавался

Ответить
0

Но и называть это громкой инновацией довольно смешно. Я этой инновацией пользовался пару лет назад когда ради прикола вывел C&C Generals на телевизор, поменял управление под боксовский геймпад двигая курсор мыши стиком и вполне получал удовольствие.

Ответить
3

Они называют это инновацией? Просто кейс, как делается приятный интерфейс. Но именно под геймпад, с мышью это говно, а не управление
P.S. Из C&C - Dune 2 была на Sega, тоже вполне классический курсор мыши, управлялся геймпадом.

Ответить
0

в смысле говно? дестини 2 плохо управляется мышью или где?

Ответить
–1

Интерфейс порта Destiny 2 не адаптировали к мыши, просто перенесли "как есть"
Если хотите примеры - выбор эмоута. У меня есть 4 эмота, какой из них я сейчас устанавливаю? Как заменить остальные? На какие, бл*дь, клавиши эти эмоуты вызываются? На геймпаде особо вариантов нет, потому там найдешь их быстро, но на клавиатуре их ~70. За ответами на все эти вопросы надо лезть в настройки и на форумы - потому и говно.

Ответить
0

Еще бы контент во вторую часть завезли.

Ответить
0

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

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

Удачным решением было бы оставить как есть и добавить управление через стрелки.

Ответить
1

а на мышке нет такой проблемы

Ответить
0

Так они под PC и сделали :)

Ответить
0

они не делали под PC, просто мышь более приспособлена к тому интерфейсу, который они организовали https://dtf.ru/14500-dizayn-interfeysa-destiny

Ответить
0

Статья нравится, интерфейс Destiny - нет. Он слишком графичен и аскетичен. Хотелось бы увидеть какой-то голо-куб, хотя бы в виде альтернативного интерфейса или пусть в другой игре.

Ответить
0

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

Ответить
0

Не сомневаюсь, но хотелось бы увидеть варианты от пользователей. Моды UI для шутеров.

Ответить
0

Полезно, спасибо!

Ответить
0

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

Ответить
0

Спасибо, интересное чтиво. Из данных -> в информацию, плюс скорость (важно, что читать можно гораздо быстрее, чем смотреть).

Ответить
0

Прямой эфир

[ { "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" ], "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" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
EA анонсировала DLC для DLC
для аддона для спин-оффа
Подписаться на push-уведомления