Компания
1 671,72
рейтинг
27 сентября 2013 в 12:35

Разработка → Проектирование интерфейсов в MMORPG Skyforge

Здравствуйте, я Антон Кругляков, руководитель команды User Interface проекта Skyforge. В этой статье я расскажу о нашем опыте проектирования дизайна интерфейса. Я старался максимально уменьшить теоретическую часть, но, глядя на финальный результат, понимаю, что не особо преуспел в этом.

Уникальные отличия



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

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



Вкратце их можно описать так:
  • карьеристы (achievers) — всегда в поисках достижений;
  • исследователи (explorers) — «роют носом землю» ради информации;
  • социофилы (socialisers) — формируют сообщества, получают удовольствие от разговоров;
  • киллеры (killers) — стремятся самоутвердиться за счет окружающих.

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

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



У игровых интерфейсов, в отличие от офисных, есть и другие задачи. Если интерфейс PowerPoint спроектирован так, чтобы максимально облегчить путь пользователя к цели, то задача игрового не только удобно транслировать игроку его цель, но и передавать атмосферу игры. Часть элементов может быть стилизована под мир игры, а часть — выполнена абстрактно. Некоторые группы элементов могут быть внесены в мир игры и доступны только посредством персонажа, а некоторые — напрямую пользователю. Вариантов реализации достаточно много, и все они влияют на удобство, уровень погружения в атмосферу игры и другие нюансы.

Наблюдаемо персонажем Наблюдаемо только игроком Метаощущения
В пространстве игры интерактивные объекты геометрические элементы интерфейса пространственные ощущения персонажа
Вне пространства игры метаобъекты индикаторы собственные ощущения персонажа


Элементы интерфейса

Объекты в мире игры, наблюдаемые персонажем и игроком



Объекты, которые видите вы на экране монитора и ваш персонаж в игровой вселенной. Это может быть карта галактики в пространстве мира игры, на которой отображаются планеты и информация о них.

Плюс:
  • передача информации без отрыва от мира игры.

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


Объекты вне мира, наблюдаемые персонажем и игроком



Скевоморфные к миру игры двухмерные или трехмерные интерфейсы, существующие вне мира игры. Наглядный пример — карманный компьютер персонажа, который игрок не может видеть в пространстве игры.

Плюсы:
  • передача информации без отрыва от мира игры;
  • быстрый доступ к информации;
  • игрок взаимодействует с интерфейсом напрямую.

Минус:
  • ограничения по оформлению информации, связанные с атмосферой игры.


Объекты в игре, невидимые персонажу



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

Плюсы:
  • пространственная привязка;
  • игрок взаимодействует с интерфейсом напрямую.

Минус:
  • портит картинку с художественной точки зрения.


Объекты вне пространства игры, невидимые персонажу



Любые интерфейсы, не связанные с атмосферой и находящиеся вне пространства мира игры.

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

Минус:
  • при чрезмерном использовании быстро низводит игру до таблицы.


Метавосприятие в пространстве мира игры



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

Плюс:
  • пространственная привязка.

Минусы:
  • ограниченное применение;
  • большая степень абстракции.


Метавосприятие вне пространства игры



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

Плюс:
  • заметность.

Минусы:
  • ограниченное применение;
  • большая степень абстракции.


MMORPG — это просто и понятно

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



При всей простоте критерия большинство разработчиков MMO продолжают об него спотыкаться. Не так-то просто взять и внести все необходимые индикаторы в мир. Но есть игры, в которых сделано именно так. К сожалению, такое решение имеет два основных недостатка:
  1. Индикаторы принимают все ограничения, связанные с миром игры.
  2. Доступ к такому индикатору усложняется.

В случаях, когда нельзя пожертвовать удобством, приходится возвращаться к старым добрым индикаторам. В общем же случае дизайнеры игры готовы пожертвовать удобством примерно… никогда. Чтобы избежать этого, мы выработали три простых правила:
  1. HUD — бой, целеуказание.
  2. Интерфейсные окна — стратегическое планирование (выбор новой цели, ситуация вокруг игрока).
  3. Интерфейсы в мире игры — тактическое планирование, информация о мире.

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

HUD

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



  1. Важное, срочное, с максимально емкой подачей:
    • состояние персонажа;
    • возможные действия;
    • урон;
    • контроль состояния врагов и дружественных персонажей поблизости;
    • оповещения от game-мастеров.
  2. Средней важности, не срочное, с детализацией:
    • обновление состояния заданий;
    • выполнение заданий;
    • получение предметов;
    • события, требующие решения игрока (приглашение в группу).
  3. Маловажное, не срочное, с детализацией:
    • оповещения от разных игровых механик (аукцион, ремесло);
    • социальные функции.

  4. Важное, не срочное, с максимальной полнотой:
    • механики игры, относящиеся к долгосрочным целям: развитие персонажа, ремесло и т. п.

Для разных групп используется разный подход к визуализации и разное место на экране. Мы разделили экран условно на 3 вида зон:



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

Зона 2. Используется для группы «Средней важности, не срочное, с детализацией». Эта область хорошо заметна в спокойном состоянии, но в бою игрок может попасть в «поток», который характеризуется сужением области зрения, концентрацией на основной задаче. К примеру, если вы играете в интересную игру и ваш персонаж умирает, рядом могут ограбить банк, но вы этого не заметите. Чтобы привлечь внимание игрока к этим областям, нужно приложить больше усилий. Мы с этой целью применяем:
  • простые анимации. Они работают плохо, так как баннерную слепоту еще никто не отменял.
  • «анимированные хлебные крошки», когда показываем какую-то сущность в зоне 1 компактно и связываем анимацией с областью в зоне 2, где даем дополнительную информацию.

Зона 3. Используется для группы «Маловажное, не срочное, с максимальной полнотой». Это та информация, которую игрок может спокойно прочитать вне боя, в безопасной для персонажа зоне.

Окна

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



Полноэкранные интерфейсы и интерфейсы в мире игры

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

Системность

Недаром есть поговорка «Встречают по одежке ...». В нашей жизни огромную роль играют системы кодировок. Возьмем, к примеру, одежду. Это кодировка социального статуса. В игровом интерфейсе мы применили три основных вида кодировки: цветом, формой и стилистикой.

Кодировка цветом наиболее простая. Она используется, чтобы обозначить отношение цели к игроку (агрессивное, нейтральное или дружественное) и полезность предметов.



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



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

Заключение

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

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

Если вам интересно узнать о технической стороне процесса и о том, как мы делали UI в Adobe Flash и на ActionScript 3 на 160 тысяч строк кода, напишите об этом в комментариях, и мы подготовим ещё одну статью. Удачи!

Другие материалы можно посмотреть на сайте разработчиков Skyforge и в нашем сообществе Вконтакте.
Автор: @bandures

Комментарии (32)

  • +28
    Чего всем так нравится этот скриншот из ВоВа? Обычный рейдовый интерфейс. Рейд-фрейм, окно чата, DPS-метр, трит-метр, таймеры кулдаунов на абилки, таймеры абилок босса, бафы, дебафы, скилы, сумки, шорткаты на предметы из инвентаря и на профы, миникарта, часы, power auras, портрет с хелсбаром. Практически ничего лишнего.
    • +9
      Напоминает фото из кабины авиалайнера. Для стороннего человека — мешанина, для тренированного пилота — только самое нужное и на своих местах :)

      Порог вхождения и все такое :)
      • +3
        Сам играл в WoW и по себе знаю, во время рейда «втягивает» не то как твой персонаж красиво мечем машет, а взаимодействие игроков, огромное количество информации которую нужно обработать и просчитать, и все это в короткое время! Как раз таки интерфейс превращаться в подобие кабины пилотов истребителя, в которой пилот не любуется облаками, а следит за показаниями приборов и руководит машиной.
        • +1
          Мы до сих пор говорим про игру? В том самом смысле? :-)
          • 0
            Вот-вот; и я о том же. Иногда кажется, что чтобы привлечь миллион людей к выполнению уймы тяжелой рутины забесплатно достаточно просто облечь эти рутинные действия в «игровой» антураж. Интересно, а современные ММОРПГ — просто игры, или разработчики уже используют «хомячковые» технологии для каких-то неведомых целей… ;)
            • 0
              В голову приходит только один пример — «развитие патриотизма» игрой в танки :-). Только танки не наши, зато «патриотизм» местного пошиба. Конечно можно бы и корейцев приплести, но там просто бизнес, за счет «обмена» виртуальных богатств на реальные деньги, но не то.
    • +1
      Это всё же гиперболизированная картинка. Вся эта информация игроку не нужна. Если посмотреть современный интерфейс рейдера (кого-нибудь из Method), то там минимально необходимый функционал.
    • +4
      Сравните с этим, по некоторым аддонам я бы поспорил о их нужности, например дпс метр и крафтовые адоны в рейде. Интерфейс можно сделать проще и удобнее. Например так:

      image
      • 0
        Мдя, ВоВ… Прям ностальгия взяла, первые несколько часов после установки или обновления настраиваешь аддоны)
        • +1
          Curse client делает синхронизацию аддонов между машинами, а так же их обновление после патчей делом легким и приятным.
        • +1
          я бы сказал первую неделю после установки/обновления…
      • 0
        Дпс-метр очень нужен в набранном с пугами рейде. Так видно совсем уж вагонов. Когда рейд вайпается на берсерке, сразу понятно, кого выгонять. Ну и для РЛ-а, чтобы вовремя бить по голове всяких слакеров (как-то неприлично, когда хил дамажит больше дд).

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

        С этой точки зрения, лично для меня наиболее сбалансированным кажется тот же ElvUI. Немножко докрутить руками по вкусу — и интерфейс становится и красивым, и функциональным с сохранением достаточной универсальности.
        • 0
          В знакомой мне гильдии специально запрещали рекаунт всем, кроме РЛ, чтоб не гнались за красивыми цифрами в ущерб тактике. Но это конечно если мы говорим о прогрессе в героиках.
          • 0
            Оригинально.
            И какое было место по миру?
            • 0
              По миру не помню, давно было, но на сервере топ 10 точно были
          • 0
            Да, слышал про подобное. Хотя люди, которые понимают, что мертвый дд не дамажит — на вес золота )
    • 0
      Это отличный пример плохого интерфейса в вов ведь, перегруженного аддонами и с низким разрешением. А вообще хорошие интерфейсы в ВоВ весьма легковесные.
    • +1
      Видимо, причина в том, что у человека, никогда не игравшего в WoW вызывает недоумение, зачем разбираться в таком огромном объеме ниформации, (даже одно ваше перечисление заняло более двух строк) и сосредотачиваться на таком количестве параметров, если тебе не только не платят за это деньги, но еще и ты отдаешь свои деньги за эту игру. Плюс огромное количество времени, потраченное ради достижения этих навыков и «карьерных» высот в игре. Как бы принято считать, что игры — это отдых, а отдых должен расслаблять хоть в каком-то смысле…

      Пилоты авиалайнеров (которых тут уже упомянули) зарабатывают мягко говоря немало.
    • +1
      Ага, продолжение идеи смотрите в MoO3. Тоже ничего лишнего :)
    • 0
      Как Вовер со стажем, могу сказать, что в данном интерфейсе большая часть информации — бесполезный мусор и даже с таким разрешением экрана можно сделать хороший и удобный интерфейс. Хотя, конечно, он не будет вызывать Вау! эффекта у непосвященных.
    • 0
      Ну это я вообще-то как-бы с некоторой иронией. Хотя в каждой шутке есть доля правды. Я тоже бывший вовер. Могу сказать, что после очередной потери конфигурации тщательного настроенного интерфейса, он (интерфейс) в итоге начинает выглядеть именно как на картинке.
  • +3
    Насколько мне известно, на AS3 и Adobe Flash в частности пишутся интерфесы в Scaleform. А каким способом соединения флеш и 3Д контента пользовались вы? Интересно посмотреть на техническую сторону процесса, почитать о преимуществах и недостатках использования выбранных инструментов разработки.

    И да, спасибо за статью, очень занимательно
    • +1
      Всё верно, используем Scaleform. Тема там богатая, от способов использования и проблем интеграции, до особенностей виртуальной машины, которая сильно отличается от Adobe-овской. Обязательно поделимся в той или иной форме.
  • +3
    У вас будет возможность писать свои интерфейсные аддоны как в WOW на LUA? Будет ли какое API?
    • 0
      Lua нет, а вот на AS3 вполне может быть. Во всяком случае идеология нашей системы аддонам не противоречит.
      • 0
        Главное дайте игрокам свободы побольше в этом плане — сами допишут чего им надо (см. выше пример из вов-а).
      • –1
        Это такая своеобразная профессиональная деградация? LUA всё-таки какой никакой стандарт, ан нет, давайте забьём на это и, если и дадим, то на совершенно другом языке… Это в мэйл.ру так промывают мозг или… на этом мысль обрывается.
        • +1
          Интеграция Lua имеет смысл только в 3-х случаях:
          — Интерфейс реализован с применением Lua
          — Язык, на котором написан интерфейс, сложно изолировать в sandbox
          — Язык, на котором написан интерфейс, слишком сложен

          В нашем случае интерфейс уже реализован на AS3, Scaleform позволяет делать несколько виртуальных машин и через это аддоны можно изолировать. По сложности обучения сказать не могу, по личному опыту зная 1 язык, перейти на другой для написания чего-то простого — вопрос 2-3 дней.
          • +1
            Ах вон оно что… не программер, но игрок, при чем в одну из подконтрольных мэйл.ру игр, у которой плагины как раз на LUA, да и про другие игры слышал, что популярен.

            Что ж, спасибо за разъяснение.
  • +1
    Ни одна игра кроме вова и д3 не дает забиндить скилы на кручение колеса мыши — а ведь это самые удобные кнопки из всех.
    Возьмите себе на заметку.
    • 0
      И конечно возможность масштабирования размера шрифта и размеров иконок в большинстве игр сделана крайне плохо.
      Надо делать честные -50...+200%

      И не только на чат, но и на любую иконку/текст в игре.
      • 0
        В ВОВ вообще едва ли не эталон по возможностям кастомизации интерфейса.

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

Самое читаемое Разработка