Как в играх появляются рычаги

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

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

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

Рычаг\стержень\тянучка с гифки сверху, например, на этом этапе выглядел вот так:

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

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

Как в играх появляются рычаги

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

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

Как в играх появляются рычаги

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

Как в играх появляются рычаги

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

Движение стрелочек

  • Чтобы они двигались зациклено еще нужно было сделать шейдер;

  • В коде нужно задать параметры скоростей для обоих состояний;

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

Подмигивание

  • Тут нужно подобрать время подмигивания – не слишком быстро, чтобы не выглядело как поломанное, но и не медлить, чтобы игрок вообще заметил переход. Люди все-таки привыкли реагировать на что-то быстрое, а не наоборот;

  • А еще переход между цветами. Вообще просто взять и "сделай мне цвет между этим и этим на 30%" обычно не работает и для этого нужны градиенты. Собственно, у меня на гифке ниже отлично видно, что получилось не очень;

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

Выглядело это все вот так:

Получилось в итоге не очень. Нет, оно лучше прототипа в разы, бесспорно. Но все равно далеко от идеала. Тут я задумался, что вообще-то стрелочки играют роль call to action-а для игрока и указывают, куда нужно тянуть предмет. Так что можно отключать их движение в момент включения, мол тянуть уже не надо, ты справился. Опять же, это не значит, что нужно резко сменить скорость, снова нужно подбирать кривую и время анимации.

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

Как в играх появляются рычаги

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

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

В итоге скрипт для анимации стрелочек выглядит примерно так:

Как в играх появляются рычаги

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

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

3333
10 комментариев

Комментарий недоступен

3
Ответить

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

2
Ответить

Классная идея и игра, успехов вам чуваки

2
Ответить

Крутая статья, очень интересно читать как происходит внутрянка и процессы создания чего-то в игре
Удачи вам, красавчики 😎

1
Ответить

Спасибо!

А ты правда зарегался специально чтобы откоментить нам статью? 👉👈

1
Ответить

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

1
Ответить

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

1
Ответить