Внутриигровые эмодзи: как мы создаем анимации для Rush Royale

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!

Привет! Я Виталий, ведущий 2D-художник, аниматор и специалист по эффектам в мобильной tower-defence игре Rush Royale студии IT Territory. Сегодня я расскажу об одной довольно важной части нашего проекта — эмодзи. Именно благодаря им игроки могут выразить свои эмоции в жарких боях за башни.

Чтобы достичь текущего качества эмодзи, мы проделали большой путь. Но обо всем по порядку.

В чем суть

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

Драфты самых первых эмодзи
Драфты самых первых эмодзи

Выполняя задачу «показать что-то прикольное», мы хотели, чтобы один игрок мог донести какую-то мысль или эмоцию до другого во время боя — причем это может быть как PvP-, так и PvE-бой. За достаточно короткий период времени нужно показать яркую анимацию и сделать это так, чтобы мы сильно не отвлекались на нее. Отсюда родилось негласное правило делать эмоции сжатыми и емкими по смыслу.

В основе эмоций мы стараемся использовать 12 принципов анимации Диснея, поэтому все движения у нас гипертрофированные и нарочито преувеличенные. Подготовка, сжатие и растяжение, асинхронность движений и т.д. — все это мы стараемся задействовать у себя в игре.

Если персонаж открывает глаза, мы не просто переключаем стейты анимации, а доанимируем открытый глаз, используя принцип сжатия и растяжения. Все движения персонажа происходят с инерцией, нет «сухой» амплитуды движения объекта. Это придает дополнительную динамику, персонаж получается более живым.

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

Вид Инквизитора в игре...
Вид Инквизитора в игре...
…и разоблачение тайны его личности. He is a she!
…и разоблачение тайны его личности. He is a she!

Эмодзи: выработка идеи

Ну а теперь разберем создание таких эмодзи с чистого листа. 

Все начинается с того, что художник получает задание на эмодзи для какого-то события. Из условий может быть указан, например, конкретный персонаж (лучник, охотник на демонов, электромаг) или тематика (лето, Новый год, Хэллоуин). 

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

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

К аниматорам эмодзи приходят в виде раскадровки движений и нарезки отдельных фрагментов персонажа:

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

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

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

Но у них есть свои особенности:

  • Emoji_Hunter_UI — это анимация эмодзи в интерфейсе, где показывается только ее превью. В таком случае эмодзи останавливается на первом кадре, а после тапа проигрывается анимация, которая затем снова останавливается на первом кадре. Поэтому в нем нужно максимально выразить смысл анимации.

  • Emoji_Hunter — эмодзи, которую мы показываем непосредственно в бою. Тут тоже есть своя особенность: происходит старт скейла из нуля, и после окончания анимации скейл тоже уходит в ноль. Таким образом мы добиваемся, чтобы эмодзи появлялась «из ниоткуда» и исчезала «в никуда».

Создание анимации

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

Затем мы анимируем появление и исчезновение баббла. Когда все готово, мы задаем анимации самого персонажа внутри него. Делаем это так, чтобы инерция после появления баббла перешла в персонажа — это придает эмодзи динамичности. Сам персонаж от этого получается более мультяшный, но в то же время и более живой. Кроме того, при скалировании эмодзи создается некая иллюзия маленького мирка внутри игры. 

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

После всех внесенный правок и улучшений получаем такой результат:

Но этого недостаточно. К тому же, пока все движения выглядят скудно, как будто не живые. Персонаж двигается как робот — схематично и монотонно. Нужно добавить некоторые акценты: анимацию усов, бровей, движение головы. Можно привнести какие-то микродвижения, которые добавят живости персонажу. Также при смене спрайтов глаз мы делаем небольшой «прискей» — сжатие и вытягивание или элемент «сквош», — чтобы переключение спрайтов не выглядело сухо. Это добавляет анимации той самой необходимой нам живости. 

Получаем следующее:​

Так уже гораздо милее и симпатичнее, согласитесь? Но нужно еще добавить движение головы и трубки, раздувающиеся щеки. Можно еще в начале анимации приподнять Охотнику бровь. 

Чем больше мы добавляем и анимируем новых элементов, тем сложнее становится наша эмодзи. И начинает выглядеть это так:

Или так:

Не самая сложная анимация, но уже сейчас при ее редактировании нужно сначала брать и редактировать отдельные элементы, смотреть их кривые и править, а потом уже смотреть на все вместе в сборе и в движении.

Добавляем последние штрихи: 

Так мы получаем финальную эмодзи с нашим дудящим в горн Охотником.

Вроде как, все довольно просто. Но есть небольшой нюанс: в игре у Охотника появились таланты, и в таланте «Сезон охоты» он призывает кабанов, которые бегут по линии противника. Такая вот аллегория, призывающая нас к действиям. Так мы стараемся делать во всех эмодзи — опираться какие-то нюансы в нашей игре.


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

Напоследок — ссылка на Behance мой и моего коллеги Игоря Архипова — мы вместе работаем над артом в Rush Royale. 

К слову, прямо сейчас в команду IT Territory нужна пара художников и не только. Подробнее почитать о том, кого мы ищем и что предлагаем, можно здесь.

Источник: https://habr.com/ru/company/mygames/blog/648171/


Интересные статьи

Интересные статьи

Discord - это чат-приложение, которое позволяет миллионам пользователей по всему миру обмениваться сообщениями и общаться голосом вживую в сообществах, называемых гильдиями (guilds) или серверами. Dis...
В любой нетривиальной мультипликации существуют двигающиеся персонажи. Для их создания требуется отображать элементы ходьбы. В принципе, известно простое решение этой проблемы с помощью ключевых кадро...
Хочу поделиться опытом автоматизации экспорта заказов из Aliexpress в несколько CRM. Приведенные примеры написаны на PHP, но библиотеки для работы с Aliexpress есть и для...
Частично из-за популярности Minecraft, в последнее время наблюдается рост интереса к идее игры, действие которой происходит в состоящем из кубов мире, построенном из 3D-рельефа и заполненного т...
Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, ...