Анимируем персонажей игры для реакций внутри боя.Я Виталий, ведущий 2D-художник, аниматор и специалист по эффектам в мобильной tower-defence игре Rush Royale студии IT Territory. Сегодня я расскажу об одной довольно важной части нашего проекта — эмодзи. Именно благодаря им игроки могут выразить свои эмоции в жарких боях за башни.Чтобы достичь текущего качества эмодзи, мы проделали большой путь. Но обо всем по порядку.В чем сутьЭмодзи выражают наши эмоции во время боя. Сначала они были совсем простыми — радость, злость, смех. Но впоследствии стали куда более изощренными и креативными.Драфты самых первых эмодзиВыполняя задачу «показать что-то прикольное», мы хотели, чтобы один игрок мог донести какую-то мысль или эмоцию до другого во время боя — причем это может быть как PvP-, так и PvE-бой. За достаточно короткий период времени нужно показать яркую анимацию и сделать это так, чтобы мы сильно не отвлекались на нее. Отсюда родилось негласное правило делать эмоции сжатыми и емкими по смыслу.В основе эмоций мы стараемся использовать 12 принципов анимации Диснея, поэтому все движения у нас гипертрофированные и нарочито преувеличенные. Подготовка, сжатие и растяжение, асинхронность движений и т.д. — все это мы стараемся задействовать у себя в игре.Если персонаж открывает глаза, мы не просто переключаем стейты анимации, а доанимируем открытый глаз, используя принцип сжатия и растяжения. Все движения персонажа происходят с инерцией, нет «сухой» амплитуды движения объекта. Это придает дополнительную динамику, персонаж получается более живым.Кроме того, в некоторых случаях мы косвенно рассказываем какую-то историю наших персонажей или показываем их особенности. Так, например, в эмодзи с Инквизитором игроки узнали, кто скрывается под его шлемом.Вид Инквизитора в игре...…и разоблачение тайны его личности. He is a she!Эмодзи: выработка идеиНу а теперь разберем создание таких эмодзи с чистого листа. Все начинается с того, что художник получает задание на эмодзи для какого-то события. Из условий может быть указан, например, конкретный персонаж (лучник, охотник на демонов, электромаг) или тематика (лето, Новый год, Хэллоуин). Дальше происходит создание набросков и основных идей. Художник делает пару-тройку скетчей, из которых мы выбираем что-то одно для финального рендера. Затем художник связывается со мной, и мы выбираем, какую нарезку нужно сделать для анимации этой эмодзи.После финального согласования идеи художник связывается со мной и обсуждает концепцию анимации эмодзи. Например, здесь мы обсуждали, что после того, как шаман просвистит, в экран должна ворваться собака и вытолкнуть его из кадра:К аниматорам эмодзи приходят в виде раскадровки движений и нарезки отдельных фрагментов персонажа:Все это заливается в проект, после чего нужно сформировать UI-префаб для эмодзи. Выглядит он так, как показано на картинке ниже. Помимо самой анимации, существуют стандартные элементы, которые есть почти на всех наших эмодзи — это белый баббл и золотая рамка редкости (иногда бывает, что она выключается из кода).Для анимаций мы используем стандартный компонент Unity Animation без каких-либо плагинов и улучшений. Конечно, в нем нет ригов и весов, но это нам не мешает.Для каждой эмодзи у нас назначены две анимации, которые практически дублируют друг друга:Но у них есть свои особенности:Emoji_Hunter_UI — это анимация эмодзи в интерфейсе, где показывается только ее превью. В таком случае эмодзи останавливается на первом кадре, а после тапа проигрывается анимация, которая затем снова останавливается на первом кадре. Поэтому в нем нужно максимально выразить смысл анимации.Emoji_Hunter — эмодзи, которую мы показываем непосредственно в бою. Тут тоже есть своя особенность: происходит старт скейла из нуля, и после окончания анимации скейл тоже уходит в ноль. Таким образом мы добиваемся, чтобы эмодзи появлялась «из ниоткуда» и исчезала «в никуда».Создание анимацииСначала на таймлайне мы выставляем общее время эмодзи — например, 3 секунды на всю анимацию целиком, с открытием и закрытием. Анимация должна быть не слишком короткой и не слишком длинной. Оптимальное время — как раз-таки 3-5 секунд: этого хватит, чтобы рассказать какой-то простой сюжет.Затем мы анимируем появление и исчезновение баббла. Когда все готово, мы задаем анимации самого персонажа внутри него. Делаем это так, чтобы инерция после появления баббла перешла в персонажа — это придает эмодзи динамичности. Сам персонаж от этого получается более мультяшный, но в то же время и более живой. Кроме того, при скалировании эмодзи создается некая иллюзия маленького мирка внутри игры.Когда у нас уже есть основа для анимации, можно начинать делать наброски самой анимации, обозначив ее основные моменты. Например, как здесь, ниже: персонаж подносит трубку к губам, потом набирает воздух в грудь и дудит. Для большей комичности можно добавить одинокое облачко, будет вырываться из трубки (своеобразный финальный пшик) и медленно таять в воздухе. После всех внесенный правок и улучшений получаем такой результат:Но этого недостаточно. К тому же, пока все движения выглядят скудно, как будто не живые. Персонаж двигается как робот — схематично и монотонно. Нужно добавить некоторые акценты: анимацию усов, бровей, движение головы. Можно привнести какие-то микродвижения, которые добавят живости персонажу. Также при смене спрайтов глаз мы делаем небольшой «прискей» — сжатие и вытягивание или элемент «сквош», — чтобы переключение спрайтов не выглядело сухо. Это добавляет анимации той самой необходимой нам живости.Получаем следующее:Так уже гораздо милее и симпатичнее, согласитесь? Но нужно еще добавить движение головы и трубки, раздувающиеся щеки. Можно еще в начале анимации приподнять Охотнику бровь. Чем больше мы добавляем и анимируем новых элементов, тем сложнее становится наша эмодзи. И начинает выглядеть это так:Или так:Не самая сложная анимация, но уже сейчас при ее редактировании нужно сначала брать и редактировать отдельные элементы, смотреть их кривые и править, а потом уже смотреть на все вместе в сборе и в движении.Добавляем последние штрихи:Так мы получаем финальную эмодзи с нашим дудящим в горн Охотником. Вроде как, все довольно просто. Но есть небольшой нюанс: в игре у Охотника появились таланты, и в таланте «Сезон охоты» он призывает кабанов, которые бегут по линии противника. Такая вот аллегория, призывающая нас к действиям. Так мы стараемся делать во всех эмодзи — опираться какие-то нюансы в нашей игре.Так выглядит пайплайн, согласно которому мы делаем все наши эмодзи. Одни бывают сложнее, другие легче. Но все они здорово помогают разнообразить контент, который наполняет нашу игру.Напоследок — ссылка на Behance мой и моего коллеги Игоря Архипова — мы вместе работаем над артом в Rush Royale. К слову, прямо сейчас в команду IT Territory нужна пара художников и не только. Подробнее почитать о том, кого мы ищем и что предлагаем, можно здесь.Виталий ОзорновСтарший художник, IT Territory
Какая жалость, что сама игра максимально вторичная и просто ворует весь геймплей и идею с другой игры (не буду показывать пальцем)
А с какой игры? Я чёт не в теме
Интересная статья, спасибо)
Интересны пару вопросов (как моушн дизайнеру) - Unity Animation в каком виде выводит финальную анимацию? Интерфейс и логика анимации похожа на AE :)
Подумываю, имеет ли смысл потыкать Юнити, может пригодится в дальнейшем)
не очень понял вопрос. Скорее всего похоже с AE да. По тыкай юнити хорошая штука, если шаришь за анимацию там всё легко и наглядно будет.
Сначала удивился, что у Supercell есть блог на DTF, потом увидел, что это подражатели
Игра с шикарным артом, эмодзи получаются очень живыми, ребята молодцы!)