UI, который сам обучает игрока управлению

[Прим. пер.: в играх с нестандартными элементами управления разработчикам нужно научить игроков пользоваться всеми возможностями. Одним из вариантов решения этой проблемы стал реализованный студией Juicy Beast играбельный UI игрового меню.]

В мае 2013 года мы участвовали в геймджеме ToJam и за три дня создали игру. Так родилась оригинальная версия Toto Temple.

Примерно год спустя и после множества изменений, мероприятий и даже заключения партнёрского соглашения с Ouya игра Toto Temple эволюционировала в более качественную и отточенную Toto Temple Deluxe!

Правила игры

Если вы не играли в неё, то вот короткие правила геймплея:

1. Схватите козу и таскайте её на голове, чтобы зарабатывать очки
2. Побеждает первый игрок, набравший 3000 очков
3. Если у тебя нет козы, то укради её!
4. Украсть козу можно, ударив в рывке её нынешнего владельца (это важно)

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

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

Ну вот и всё, теперь вы знаете, как играть в Toto Temple. С тех пор мы добавили гораздо больше контента, но основы остались неизменными.

Первый концепт UI (версия для геймджема)

Прежде чем рассказывать о новой системе UI, используемой в Toto Temple Deluxe, давайте посмотрим, с чего мы начинали. Первым (и единственным) меню в версии для джема было такое:


Всё очень просто. Игрок нажимает «A», чтобы присоединиться к игре, а когда в ней есть хотя бы два игрока, появляется опция «press start» и можно начинать игру. Заметьте, что нет опции «выбора цвета». Игрок просто нажимает «A» и узнаёт, какой цвет ему достался, в зависимости от выбранного контроллера.

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

Участие в мероприятиях: жди проблем

В ноябре 2013 года оригинальная версия Toto Temple выставлялась на Gamercamp, небольшом уютном мероприятии, проходившем в Торонто.


Между версией для геймджема и версией, представленной на Gamercamp, мы внесли множество изменений в геймплей: более плавное управление, балансировку системы очков и т.д. Но мы не вносили никаких изменений в систему UI. Зачем менять то, что не сломано?

Во время мероприятия лучше всего обычно позволить игрокам разобраться с игрой и управлением самостоятельно. Это позволяет тратить меньше усилий и является хорошим признаком того, что игра (или UI) имеет качественный дизайн.

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


Мы снова и снова повторяли: «Чтобы сделать рывок, нужно нажать кнопку X И направление, в котором вы хотите сделать рывок. Например, чтобы сделать рывок вверх, нужно одновременно нажать „вверх“ на левом джойстике и кнопку X. Можно совершать рывки во всех четырёх направлениях, даже последовательно влево-вверх-вверх-вправо, если захотите».

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

Обратно к чертёжной доске

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

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


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

Выбор персонажа: первый урок

Чуть позже, собрав всю эту новую информацию, мы продемонстрировали Toto Temple на небольшом игровом мероприятии в Монреале под названием The Prince of Arcade. Это была хорошая возможность для усовершенствования методов обучения игроков и проверки их в действии.

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


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

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

Deluxe-преображение

Вскоре после тестирования нашего играбельного меню мы познакомились с отличными ребятами из Ouya и нам удалось заключить партнёрский договор на создание более масштабной и качественной версии игры.

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


Первая версия на основе нового видения почти не отличалась, но вместо скучных и плоских коробок персонажи находились в наружных сооружениях (см. выше).

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

Странные поведения

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

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

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

Мы подумали, что игроки не привыкли влиять на UI, играя своим персонажем. Они просто не понимали, что их действия меняют параметры игры.


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

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

Больше контента, больше проблем

Новая функция выбора персонажа уже была готова и работала, но нам по-прежнему требовались новые меню для нового контента версии Deluxe (уровней, режимов и т.д.). Честно говоря, мы особо не думали об этом, когда делали первый экран играбельного меню.

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

Первым новым меню был экран выбора уровней, и с этого момента всё стало немного сложнее.

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

Мы уже встречались с этой проблемой в первой версии, но просто использовали кнопку «Start» для запуска игры. Это было довольно простое исправление.

Выбор уровней: больше обучения

Следующим нам потребовался экран выбора уровней. Мы думали создать для версии Deluxe 5-6 новых уровней (или храмов), поэтому нам нужен был способ выбора одного из них.

По-прежнему стремясь к целостности функционала, мы создали первую итерацию, в которой для выбора уровня использовались кнопки «влево» и «вправо»:


При создании эскиза нового экрана мы думали: «О, а ведь это отличная возможность научить игрока чему-то ещё!»

На этом экране мы могли научить его ещё двум аспектам управления:

1. Можно делать рывок не только вверх, но и влево и вправо
2. Кнопки слишком высоко? Тогда игрок догадается, что можно сначала прыгнуть, а потом сделать рывок!

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

Вот, что сработало:

• Мы заметили, что многие игроки просто выбирают уровень по умолчанию, при первом плейтесте сразу нажимая кнопку Start. Мы решили, что это вполне нормально, потому что играя впервые, игрок обычно не знает ни одного уровня (а первый ничуть не хуже всех остальных). Они видели, что есть и другие уровни, поэтому понимали, что их можно выбрать вручную.
• Большинство игроков узнавало кнопки и понимало, что нужно подпрыгнуть, чтобы ударить по ним, как они делали это на предыдущем экране.

А вот, что не сработало:

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

«Так, подождите. Какие кнопки? Как мне тут...», — жёлтый игрок

Вот, что мы сделали (см. выше):

• Чтобы сделать выбор уровня более удобным, мы добавили небольшую ступеньку, чтобы игрок мог бездумно делать рывок влево или вправо, сосредоточившись на изображении уровня. Теперь этот экран больше не учил последовательному прыжку и рывку, но, по крайней мере, учил прыжкам (они необходимы, чтобы добраться до кнопки) — тому, чего не требовал предыдущий экран.
• Мы добавили значки уровней с одной миниатюрой, чтобы было проще увидеть всю картину (общее количество уровней).
• Мы переместили подсказку «выполните рывок влево / вправо» из верхней центральной части экрана и расположили её по обоим бокам. Кроме того, теперь они стали ближе к каждой из кнопок, поэтому их проще заметить. Также мы сделали их синими, как и сама кнопка X контроллера (в этом случае — кнопка U на контроллере Ouya).
• Это не было особой проблемой, но мы сделали всю коробку меньше по ширине, чтобы рывок от одной кнопки до другой занимал меньше времени.

Выбор режима: последний экзамен

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

Чтобы вкратце объяснить вам идею перемещения по UI, я объясню порядок, в котором игроки проходят через три экрана меню:

1. Выбор персонажа выполняется первым, потому что нам нужно знать, сколько игроков перейдут на следующий этап.
2. Выбор режима идёт вторым, чтобы игроки могли быстро определиться с командами, если они хотели этого изначально. Мы хотели дать игрокам возможность реализовать их выбор как можно быстрее, чтобы им не пришлось ждать и запоминать его.
3. Выбор уровня идёт последним. Если бы мы решили создавать специальные уровни для разных режимов, то на этом этапе фильтр режима уже был бы выбран.

Ранний эскиз всего процесса перемещения по UI

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

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

Мы разместили кнопки сверху и снизу, и экран был почти готов. Затем наступила сложная часть — мы должны были придумать дизайн поля выбора команды (см. ниже).


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

Формирование команд без управляемого джойстиком курсора или подтверждения кнопкой «A» заставило нас пойти по другому пути. Имея в своём распоряжении только небольшое поле с физикой, мы должны были создать простую в понимании и быструю в настройке систему, не требующую использования кнопок контроллера.

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

1. Блоки аватаров находятся на голове игрока, пока он не выбрал команду и автоматически становятся на место, когда он входит в «зону команды»
2. Физический блок «VS» в буквальном смысле разделяет две команды, а также используется как «мёртвая зона», чтобы сделать переход из команды в команду более очевидным
3. Кнопка «рывок вниз» циклически прокручивает список вниз
4. Индикатор «Press start» indicator появляется, когда команды выбраны

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

Подведём итоги по обучению

Итак, ещё до того, как игрок войдёт в игру, он будет понимать (как минимум, подсознательно) следующее:

1. Он должен знать, что кнопку X можно использовать одновременно с джойстиком
2. Он должен знать, что A — это прыжок
3. Он должен знать, что X работает в разных направлениях, в том числе вверх, влево и вправо

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

После выпуска игры: просьбы игроков

Toto Temple Deluxe была выпущена, и вы уже видели бОльшую часть UI, который вошёл в игру. После релиза мы продолжили общаться с игроками на форумах, в комментариях, блогах и т.д…

Чаще всего мы получали два комментария (или просьбы):

1. Я не могу поиграть с друзьями, можете добавить в игру ботов?
2. Я хочу выбирать свой цвет в начале игры! Я знаю, что это ничего не изменит с точки зрения геймплея, но [название цвета] — мой любимый цвет, и я хотел бы играть им.

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

Обновление: уничтожаем экран ради одной возможности

И выбор ботов, и выбор цвета тесно связаны с выбором персонажа, поэтому мы сразу поняли, что это вызовет проблемы, по крайней мере, с точки зрения UI.

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

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


Вот, что изменилось:

• Мы оставили в игре большие статуи. Это не изменение, но мы слишком их полюбили, и не смогли выбросить.
• Теперь у нас есть одно общее поле вместо красивых отдельных колонн (мы всё ещё печалимся из-за их потери).
• Мы добавили бесцветных Toto с номерами игроков над головой, чтобы игроки могли знать, кем они управляют.
• Нужный цвет можно выбрать, ударив в рывке соответствующую кнопку.
• Сменить текущий цвет можно только на ещё не выбранный.
• Красть чужие цвета нельзя.
• У нас пока нет ботов, но этот дизайн позволяет решить, будет ли, например, зелёный персонаж управляться ботом, и т.д. Мы просто разделили кнопку «войти» на две кнопки: «Войти» и «Добавить как бота». По крайней мере, таков план.

Заключение: преимущества и сложности

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

Очевидно, что создание системы играбельного UI — хороший ход, если игре он требуется, но такая система привносит свою долю проблем:

Преимущества:

• Игрок почти не замечает, что учится
• Это намного веселее, чем текстовые и пошаговые туториалы
• Облегчает игрокам знакомство с игровой механикой

Сложности:

• Теперь разработчики не могут использовать все кнопки контроллера
• Сложно найти хороший баланс между эффективностью и понятностью
• Очень легко начать добавлять физические кнопки повсюду, но скоро это начинает сбивать игрока с толку

Игры с очень простой механикой или почти без меню не получат больших преимуществ от подобной системы. С другой стороны, играбельный UI может сохранить вовлечённость игрока в игру и её общую целостность, даже если вам и не нужен инструмент обучения.

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



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