![](https://habrastorage.org/getpro/habr/upload_files/9dc/df3/895/9dcdf389519fb1bf0d0c4f8794fda375.png)
Привет! Я Виталий, ведущий 2D-художник, аниматор и специалист по эффектам в мобильной tower-defence игре Rush Royale студии IT Territory. Сегодня я расскажу об одной довольно важной части нашего проекта — эмодзи. Именно благодаря им игроки могут выразить свои эмоции в жарких боях за башни.
Чтобы достичь текущего качества эмодзи, мы проделали большой путь. Но обо всем по порядку.
В чем суть
Эмодзи выражают наши эмоции во время боя. Сначала они были совсем простыми — радость, злость, смех. Но впоследствии стали куда более изощренными и креативными.
![Драфты самых первых эмодзи Драфты самых первых эмодзи](https://habrastorage.org/getpro/habr/upload_files/b2e/4b5/7fb/b2e4b57fbf9cba8f62668bbe23fa4c41.jpeg)
Выполняя задачу «показать что-то прикольное», мы хотели, чтобы один игрок мог донести какую-то мысль или эмоцию до другого во время боя — причем это может быть как PvP-, так и PvE-бой. За достаточно короткий период времени нужно показать яркую анимацию и сделать это так, чтобы мы сильно не отвлекались на нее. Отсюда родилось негласное правило делать эмоции сжатыми и емкими по смыслу.
В основе эмоций мы стараемся использовать 12 принципов анимации Диснея, поэтому все движения у нас гипертрофированные и нарочито преувеличенные. Подготовка, сжатие и растяжение, асинхронность движений и т.д. — все это мы стараемся задействовать у себя в игре.
![](https://habrastorage.org/getpro/habr/upload_files/953/89b/a6f/95389ba6fe66c2fa8d3b7922700432dd.gif)
Если персонаж открывает глаза, мы не просто переключаем стейты анимации, а доанимируем открытый глаз, используя принцип сжатия и растяжения. Все движения персонажа происходят с инерцией, нет «сухой» амплитуды движения объекта. Это придает дополнительную динамику, персонаж получается более живым.
![](https://habrastorage.org/getpro/habr/upload_files/182/296/0b9/1822960b9cb5163b579be6722c3cc948.gif)
Кроме того, в некоторых случаях мы косвенно рассказываем какую-то историю наших персонажей или показываем их особенности. Так, например, в эмодзи с Инквизитором игроки узнали, кто скрывается под его шлемом.
![Вид Инквизитора в игре... Вид Инквизитора в игре...](https://habrastorage.org/getpro/habr/upload_files/0d9/f1b/b9d/0d9f1bb9d568cad0b8b2bd2c30b46dfb.jpeg)
![…и разоблачение тайны его личности. He is a she! …и разоблачение тайны его личности. He is a she!](https://habrastorage.org/getpro/habr/upload_files/ece/864/c16/ece864c160df7c96c8a405c19f79fd2f.gif)
Эмодзи: выработка идеи
Ну а теперь разберем создание таких эмодзи с чистого листа.
Все начинается с того, что художник получает задание на эмодзи для какого-то события. Из условий может быть указан, например, конкретный персонаж (лучник, охотник на демонов, электромаг) или тематика (лето, Новый год, Хэллоуин).
Дальше происходит создание набросков и основных идей. Художник делает пару-тройку скетчей, из которых мы выбираем что-то одно для финального рендера. Затем художник связывается со мной, и мы выбираем, какую нарезку нужно сделать для анимации этой эмодзи.
![](https://habrastorage.org/getpro/habr/upload_files/26c/c41/9ea/26cc419ea59bdf80e823b799dd9ae5a7.png)
![](https://habrastorage.org/getpro/habr/upload_files/f80/cd3/d81/f80cd3d81969109578097a6b7b0d40cf.png)
После финального согласования идеи художник связывается со мной и обсуждает концепцию анимации эмодзи. Например, здесь мы обсуждали, что после того, как шаман просвистит, в экран должна ворваться собака и вытолкнуть его из кадра:
![](https://habrastorage.org/getpro/habr/upload_files/121/1d4/94b/1211d494b4d6344a0849045125ceac66.png)
К аниматорам эмодзи приходят в виде раскадровки движений и нарезки отдельных фрагментов персонажа:
![](https://habrastorage.org/getpro/habr/upload_files/d6f/7a3/5fb/d6f7a35fb42570eee65f4b51d9aceff5.png)
Все это заливается в проект, после чего нужно сформировать UI-префаб для эмодзи. Выглядит он так, как показано на картинке ниже. Помимо самой анимации, существуют стандартные элементы, которые есть почти на всех наших эмодзи — это белый баббл и золотая рамка редкости (иногда бывает, что она выключается из кода).
![](https://habrastorage.org/getpro/habr/upload_files/b6e/003/436/b6e0034368c968c55c6d2dcfeb81d944.png)
Для анимаций мы используем стандартный компонент Unity Animation без каких-либо плагинов и улучшений. Конечно, в нем нет ригов и весов, но это нам не мешает.
Для каждой эмодзи у нас назначены две анимации, которые практически дублируют друг друга:
![](https://habrastorage.org/getpro/habr/upload_files/847/73a/897/84773a897f39dd5c342e5294f6777d07.png)
Но у них есть свои особенности:
Emoji_Hunter_UI — это анимация эмодзи в интерфейсе, где показывается только ее превью. В таком случае эмодзи останавливается на первом кадре, а после тапа проигрывается анимация, которая затем снова останавливается на первом кадре. Поэтому в нем нужно максимально выразить смысл анимации.
Emoji_Hunter — эмодзи, которую мы показываем непосредственно в бою. Тут тоже есть своя особенность: происходит старт скейла из нуля, и после окончания анимации скейл тоже уходит в ноль. Таким образом мы добиваемся, чтобы эмодзи появлялась «из ниоткуда» и исчезала «в никуда».
![](https://habrastorage.org/getpro/habr/upload_files/210/3d2/486/2103d2486b9556ebfb96901e6877a622.gif)
Создание анимации
Сначала на таймлайне мы выставляем общее время эмодзи — например, 3 секунды на всю анимацию целиком, с открытием и закрытием. Анимация должна быть не слишком короткой и не слишком длинной. Оптимальное время — как раз-таки 3-5 секунд: этого хватит, чтобы рассказать какой-то простой сюжет.
![](https://habrastorage.org/getpro/habr/upload_files/831/6ea/8f9/8316ea8f9581335c61b1b28cd6cf527c.png)
Затем мы анимируем появление и исчезновение баббла. Когда все готово, мы задаем анимации самого персонажа внутри него. Делаем это так, чтобы инерция после появления баббла перешла в персонажа — это придает эмодзи динамичности. Сам персонаж от этого получается более мультяшный, но в то же время и более живой. Кроме того, при скалировании эмодзи создается некая иллюзия маленького мирка внутри игры.
![](https://habrastorage.org/getpro/habr/upload_files/c8d/9f9/91d/c8d9f991d54b261de4aee8c27a6af892.gif)
Когда у нас уже есть основа для анимации, можно начинать делать наброски самой анимации, обозначив ее основные моменты. Например, как здесь, ниже: персонаж подносит трубку к губам, потом набирает воздух в грудь и дудит. Для большей комичности можно добавить одинокое облачко, будет вырываться из трубки (своеобразный финальный пшик) и медленно таять в воздухе.
После всех внесенный правок и улучшений получаем такой результат:
![](https://habrastorage.org/getpro/habr/upload_files/386/f19/797/386f197973791077f59125841cd75f32.gif)
Но этого недостаточно. К тому же, пока все движения выглядят скудно, как будто не живые. Персонаж двигается как робот — схематично и монотонно. Нужно добавить некоторые акценты: анимацию усов, бровей, движение головы. Можно привнести какие-то микродвижения, которые добавят живости персонажу. Также при смене спрайтов глаз мы делаем небольшой «прискей» — сжатие и вытягивание или элемент «сквош», — чтобы переключение спрайтов не выглядело сухо. Это добавляет анимации той самой необходимой нам живости.
Получаем следующее:
![](https://habrastorage.org/getpro/habr/upload_files/5d6/847/f9d/5d6847f9d243036ddfede308bc8900a9.gif)
Так уже гораздо милее и симпатичнее, согласитесь? Но нужно еще добавить движение головы и трубки, раздувающиеся щеки. Можно еще в начале анимации приподнять Охотнику бровь.
Чем больше мы добавляем и анимируем новых элементов, тем сложнее становится наша эмодзи. И начинает выглядеть это так:
![](https://habrastorage.org/getpro/habr/upload_files/5f4/502/d65/5f4502d65f6f7d1029b0f11bded6315f.png)
Или так:
![](https://habrastorage.org/getpro/habr/upload_files/c48/376/4a6/c483764a68b42f01b7728babf094d1f3.png)
Не самая сложная анимация, но уже сейчас при ее редактировании нужно сначала брать и редактировать отдельные элементы, смотреть их кривые и править, а потом уже смотреть на все вместе в сборе и в движении.
Добавляем последние штрихи:
![](https://habrastorage.org/getpro/habr/upload_files/1a7/ce0/b2c/1a7ce0b2ca08fa97454a77716f932963.gif)
Так мы получаем финальную эмодзи с нашим дудящим в горн Охотником.
Вроде как, все довольно просто. Но есть небольшой нюанс: в игре у Охотника появились таланты, и в таланте «Сезон охоты» он призывает кабанов, которые бегут по линии противника. Такая вот аллегория, призывающая нас к действиям. Так мы стараемся делать во всех эмодзи — опираться какие-то нюансы в нашей игре.
Так выглядит пайплайн, согласно которому мы делаем все наши эмодзи. Одни бывают сложнее, другие легче. Но все они здорово помогают разнообразить контент, который наполняет нашу игру.
Напоследок — ссылка на Behance мой и моего коллеги Игоря Архипова — мы вместе работаем над артом в Rush Royale.
К слову, прямо сейчас в команду IT Territory нужна пара художников и не только. Подробнее почитать о том, кого мы ищем и что предлагаем, можно здесь.