Поиски Appealing на Match-3 поле, или как сделать анимацию элементов привлекательной
Я мог бы начать эту статью с перечисления 12 принципов анимации, но не буду — вы их знаете или легко найдете в два клика с примерами. Скажу только, что на Match-3 поле уместны не все, а иной раз применяются уникальные решения, которые в эту дюжину не входят.
Мне кажется, что принципы — это инструменты. Что-то применимо в готовом виде, что-то просто разработано для другого, а некоторые вырабатываются самостоятельно. Выбор того, что использовать, а что — нет, обусловлен характером жизни на М3 поле. Анимации тут короткие, происходят очень часто (и успевают надоесть), и несут откровенно служебный характер, направленный на усиление восприятия механики. Критерий успеха — игрок воспринимает поле не как набор отдельных анимированных элементов, а как живой цельный объект — анимированное поле. Хорошие анимации очень скоро перестают замечать. Они растворяются в непрерывном, вечно текущем процессе игры.
Стиль анимации от игры к игре отличается. Камни могут быть упругими или, наоборот, — резиновыми. Но принципы реализуемы везде, хоть и в разной степени. Поделюсь своим арсеналом:
Squash & Stretch
Элементы поля — камни, бустеры и прочие сущности, как правило, самой формой созданы, чтобы их сжимали и вытягивали. Из нашего опыта, камень, который падает 10 кадров, а приземляется за 20, не будет ощущаться физическим объектом, если его не сжимать/сплющивать. В коротких таймингах Match-3 игры такие сжатия не делают объект резиновым, но дают полезное ощущение веса.
Anticipation
Пусть 2-4 кадра, но найдите для него место. Если перед коллапсом сущности в Destroy клипе вам нужно увеличить объект, и у вас нет на это кадров, пусть в первом кадре он уже будет увеличенным. Работает на уровне ощущения, но из десятка таких ощущений полотно игры и сшито.
Exaggeration
Очень важный инструмент. В коротких таймингах часто просто не понятно, что происходит. Преувеличивайте сжатия, делайте очень крутыми анимационные кривые. Скорее всего у вас будет буквально одна ключевая поза и пара-тройка кадров, чтобы что-то гипертрофировать. Так что не ограничивайте себя. Пусть в этих двух кадрах ракеты будут неприлично вытянуты, осколки в два раза больше, чем им положено быть. В реальности все не так, как на самом деле, и без этого утрирования все будет слишком плоским и невыразительным.
Response
Камни работают под кончиками пальцев игрока. Иллюзия, что это он двигает их, должна быть 100%. Если по результатам playtest'ов поле кажется вязким, то это надо исправлять, какие бы принципы анимации изложенные выше это не нарушало.
Onfield
Элементы Match-3 поля не существуют вне этого поля. Работая над ними поставьте кусок поля себе фоном (выключайте его, если он отвлекает вас своей пестротой, но всегда включайте, отсматривая результат работы). Замечательный разрыв камня, который так нравился вам и команде на сером фоне, будет восприниматься иначе на красочном поле игры.
Fluidity
Жизнь на M3 поле динамичная, но плавная. Одни камни уничтожаются только за тем, чтобы на их место осыпались новые. Бустеры просятся, чтобы их запустили каскадом. Как можно раньше загрузите свои анимации в движок. Восприятие много сразу изменится. Близкий к реалистичному тайминг разрыва бомбы начнет раздражать своей чрезмерной длиной. И понять это на этапе работы в редакторе практически невозможно.
Анимация элементов М3 поля на нашем проекте создается в Spine. Одной из сильной сторон soft’а является возможность взять текстуру в двумерную сетку и деформировать ее. Так можно создавать иллюзию 3D поворотов, что существенно повышает правдоподобность и сочность анимации.
Однако, этот прием имеет существенные недостатки:
- Будучи плохо выполненными, псевдо 3D повороты делают ассет только хуже. Их надо или делать очень правдоподобными, или не делать вовсе, ограничиваясь более традиционными для 2D трансформациями.
- Это довольно трудоемко. Для разворота даже сравнительно примитивной формы у вас уйдет в разы больше времени, чем если бы вы делали все в 3D пакетах.
Внедренный нами pipeline выглядит следующим образом:
1. Создаете очень простую (буквально из примитивов) модель в удобном для вас редакторе по форме близкую к вашему объекту.
2. Поворачиваете ее под углом, под которым расположен ваш 2D объект. Делаете скрин сетки (даже не обязательно рендер).
3. Опираясь на полученный референс строем 2D mesh в Spine.
4. Если поворот совершается под небольшим углом, то этого достаточно. Делаете анимацию в Spine, опираясь на «трехмерную» сетку вашего объекта.
В борьбе за увеличение динамики при активации бустером мы пришли к необходимости раскрутить его вдоль продольной оси, сделав несколько оборотов. Вращение даже цилиндрического тела вдоль оси на полный оборот задача вполне реализуемая в Spine, но трудоемкая.
Альтернативой,особенно при быстром вращении, может стать покадровая анимация. Spine позволяет комбинировать ее с анимацией mesh.
В нашем случае достаточной иллюзии даст анимация этикетки.
Каждый кадр займет место в атласе, но, учитывая скорость вращения и motion blur, можно уменьшить изображение вдвое.
В разработке игры очень редко бывают окончательные 100% готовые итерации (если бывают вообще). Но эта — не финальная, анимация с промежуточным, драфтовым, эффектом (также сделанном в Spine) мне нравится. Короткая, бодрая, взрывная.