6 мая 6 мая 4 230

Один ромб и девять итераций: как менялся главный элемент интерфейса Intersectio

+2

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

Хотелось поэкспериментировать, проверить несколько идей и заодно довести до релиза игру, пусть даже небольшую. Так появилась Intersectio.

После джема мы не забросили проект. Несколько месяцев игру постепенно дорабатывали, выпустили на itch.io, а позже начали развивать её дальше. Сейчас с демо можно познакомиться в Steam, а полная версия постепенно приближается к релизу.

Но в этой статье хочется рассказать не столько о самой игре, сколько об одном конкретном элементе, что претерпел очень много изменений в процессе разработке

Ромб - он же контролер механики Фокусировка. Скрин из движка игры (Godot)
Ромб - он же контролер механики Фокусировка. Скрин из движка игры (Godot)

Основа механики

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

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

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

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

Первая версия была вообще не ромбом

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

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

Когда разработчикам всё понятно, а игрокам — нет

Первая версия была минималистичной и вполне понятной для нас.

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

  • «А огонёк можно было переставлять?»
  • «Я не понимаю, куда его двигать»
  • Были и другие реакции. Кто-то просто ставил точку куда попало и смотрел, что произойдёт. Кто-то пытался игнорировать систему и играть как получится.

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

В итоге игра начинала казаться не сложной, а неудобной.

Первая попытка исправить ситуацию

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

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

Почему мы не оставили подсказки навсегда

Самым простым решением было оставить светящиеся точки в интерфейсе на постоянной основе. С точки зрения UX это действительно работало.

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

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

Когда механика игры меняет интерфейс

По мере развития Intersectio в игре появился отдельный режим под названием Бесконечные терзания.

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

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

И именно здесь появилась новая задача для интерфейса.

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

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

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

Почему эта история вообще показательна

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

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

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

Финальный вариант, который в игре. Символы по краям ромба - это "Крайности" - механика, работающая в сюжетном режиме и влияющая на концовки
Финальный вариант, который в игре. Символы по краям ромба - это "Крайности" - механика, работающая в сюжетном режиме и влияющая на концовки

PS

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


Лучшие комментарии

Как по мне не с того начали пост. Опишите что за проект, как он работает. И уже потом, что вы хотели получить и как к этому шли. (Если хотите рассказать про уникальную механику)
А то сейчас как то странно: У нас свой уникальный контролер! Но мы вам его не покажем, он классный, вот как мы его создали.

Спасибо за обратную связь!

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

Или вы про структуру поста, чтобы в начале было описание об игре что это такое, зачем и почему?)) В принципе, причина та же. Сделали короткий контекст об игре в середине поста

Понятно. Но в любом случае сам пост имеет плохую структуру. Посмотрите на коллег с Хабра, они там одни и те же посты по 40 раз выкладывают, но рассматривают новые грани проблемы из призмы личного опыта.

Вам тогда тоже нужно было притвориться что говорите не о своей проблеме или решаете какую то проблему. Сейчас пост не имеет ценности, так как не дает новых знаний и компетенций. Как коллега инди разработчик, я бы изменил структуру в сторону разбора механики перекачки характеристик из одной характеристики в другую. (Кст. как по мне у вас плохо вышло, все равно ничего не понятно. Лучше бы заменили кристаллы на иконки: Сила (Иконка Бицепса), Ловкость (Лук), Выносливость (Сапог) и Интеллект (Эта забавная шапка студента)). Ну как то так. В целом у вас не понятно, какая характеристика на что влияет, так что так и можно было подписать: Дальность полета, Сила удара, Точность, что то еще?

Например можно было сказать:

Задача: Разбор механики перекачки характеристик как механика боя.

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

В качестве референсов, можно взять известные проекты:

1) Morphling (Dota 2), классическая перекачка базовых атрибутов (Силы в Ловкость и обратно)

2) Управление пулом Очков Действия (AP) или энергии, например, перенаправление энергии систем корабля в FTL. Игрок манипулирует общим резервом: можно перевести все очки в дальность перемещения для рывка к укрытию, либо влить их в радиус обзора и точность выстрела, полностью пожертвовав мобильностью на текущий ход.

Спасибо за рекомендации по улучшению постов в будущем.

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

Так что ещё раз, признательны. А пока что, мы озаботимся тем, что игра вышла в релиз))

И вам хорошего дня

Читай также