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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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