анимация бега персонажа по кадрам
Основы создания 2D персонажа в Unity 3D 4.3. Часть 2: бегущий персонаж
Всем привет. Продолжаем дело, начатое в первой части. Сейчас у нас есть платформа и стоящий на ней персонаж с анимацией покоя. Настало время научить нашего персонажа бегать вправо-влево по платформе.
Загрузим сцену из первой части. Напомню, что в прошлый раз мы импортировали несколько спрайтов в папку Assets — Sprites. На всякий случай, внизу поста еще раз приведу ссылку на спрайты. Среди них должен быть спрайт под названием Run. Мы будем использовать его для создания анимации бега. Для этого нам надо проделать те же действия по превращению одиночного спрайта в коллекцию, как и при создании анимации покоя. Вкратце напомню: выделяем спрайт, в окне Inspector устанавливаем свойство Sprite Mode как Multiple, нажимаем ниже Sprite Editor, нарезаем изображение в режиме Grid или Automatic.
Теперь в окне Hierarchy выбираем Character и переходим в окно Animation. Нажимаем на поле с анимацией Idle и выбираем Create New Clip, чтобы создать анимацию бега. Сохраним файл анимации в папке Assets — Animations под именем Run.
Новая созданная анимация Run стала текущей в окне Animation. Разворачиваем спрайт Run в окне Project, выделяем все фалы Run_0… Run_9 и перетаскиваем в окно Animation. Установим пока значение Sample равное 24.
Все это мы уже делали в первой части, а теперь будет нечто новое. Перейдем в окно Animator. Сейчас там отображены три анимации: Any State, Idle и Run. Нам предстоит задать условия перехода из анимации Idle в анимацию Run, то есть из состояния покоя в состояние бега. В нижнем левом углу есть поле Parameters. Нажимаем на плюсик, выбираем Float и называем новый параметр как Speed. Тем самым мы создали параметр типа число с плавающей запятой, обозначающий скорость перемещения персонажа. Именно в зависимости от значения этого параметра будет происходить переключение из анимации покоя в анимацию бега. Теперь нажимаем правой кнопкой мыши на анимацию Idle, выбираем Make Transition и нажимаем левой кнопкой мыши на анимацию Run. Между анимациями появится линия со стрелкой. Передвиньте мышкой прямоугольники анимации, если плохо видно. Кликнем по линии со стрелкой. В окне Inspector отобразятся свойства перехода между анимациями. Обратим внимание на низ окна, в раздел Conditions. Кликнем на параметр Exit Time и поменяем его на Speed. Второе поле Greater оставим без изменений, а в третьем введем значение 0.01. Мы создали условие перехода из анимации покоя в анимацию бега — оно происходит, когда значение параметра скорости становится немногим больше нуля.
Теперь нужно сделать обратный переход — из Run в Idle. Делаем все с точностью наоборот: Make Transition от Run к Idle, выделяем переход, в Conditions устанавливаем Speed — Less — 0.01.
Теперь у нас есть две анимации и условия перехода между ними. Но пока ничего работать не будет, потому что все что мы сделали нужно «оживить» при помощи скрипта. Давайте перейдем в окно Project и создадим в папке Assets подпапку Scripts. Добавим в нее новый C# Script, назовем его CharacterControllerScript и откроем на редактирование.
Я приведу полный листинг скрипта с подробными комментариями, а ниже еще поясню, что в нем происходит.
Итак, мы завели несколько переменных: для задания максимальной скорости перемещения, для определения направления (вправо/влево) и для работы с компонентом Animator. Почти все действия происходят в методе FixedUpdate. В нем мы получаем значение оси Х, которое меняется при нажатии на клавиатуре клавиш влево-вправо или A-D (если не меняли соответствующие настройки проекта!). Затем устанавливаем это значение параметру Speed компонента Animator. Обратите внимание, что мы берем модуль этого значения при помощи метода Mathf.Abs, так как при создании условий перехода между анимациями покоя и бега мы сравниваем значение параметра с положительным числом 0.01. Нам здесь не важно, в какую сторону бежит персонаж. Важно лишь величина значения. Далее задаем скорость перемещения по оси Х в соответствии со значением максимальной скорости. И, наконец, проверяем, в какую сторону бежит персонаж, и в какую сторону он в этот момент повернут. Если он бежит вправо, а повернут влево — разворачиваем его вправо путем инвертирования его размера по оси Х. И наоборот. Этим нехитрым способом мы избавились от необходимости делать две анимации вместо одной: для бега вправо и для бега влево.
Сохраняем скрипт. В Unity перетаскиваем его на нашего Character в окне Hierarchy. Запускаем игру, нажимаем влево-вправо или A-D.
Капитан Коготь теперь умеет бегать! Скорость анимации получилась быстроватой. Ее можно снизить путем уменьшения значения Sample в окне Animation для анимации Run (значение 12 будет нормально). Если одновременно с игрой у вас видно окно Animator, то вы увидите, что во время покоя работает анимация Idle (бегает синий прогрессбар), а во время бега происходит переход на анимацию Run, и, соответственно, работает она.
На этом пока все. Нам осталось разобраться с прыжками… и узнать при этом еще несколько новых вещей!
Ссылка на спрайты.
Анимация бега персонажа по кадрам
“A walk is the first thing to learn. Learn walks of all kinds, ‘cause walks are about the toughest things to do right.”
Костя Ченчиков, Animation Director в Playrix, крупнейшей игровой компании в СНГ, рассказал, как разработать полноценный цикл стандартной походки для любой игры: будь то Homescapes с миллионным DAU, созданная профессиональной командой Playrix, или обычная казуалка, сделанная любителем.
Всем привет! Сегодня мы пошагово построим базовый шаблон, который лежит в основе любой походки.
Походка персонажа — одна из сложнейших задач для аниматора. Ведь всего лишь один цикл может содержать в себе почти все принципы анимации и раскрывать характер героя. Разумеется, в реальности стандартных походок не бывает: каждая по-своему уникальна. В качестве основного референса возьмем вот такой пример:
Важное о циклах
Если мы анимируем цикл (в случае с походкой — последовательность из двух шагов), то нужно избегать любых движений, которые будут выделяться на фоне всего остального, будь то более быстрые перекатывания с пятки на мысок для одной из ног или моргание глаз. За это может цепляться взгляд, потому что движение будет каждую секунду ритмично мелькать в одном и том же месте.
Если нужно сделать походку разнообразной (например, для уникальной сцены или видеоролика), то стоит вообще избегать использования циклов, так как живой человек никогда не делает подряд два одинаковых шага. В этом случае можно сделать хотя бы десять уникальных шагов и зациклить этот промежуток.
Идем по порядку
Походка — это серия контролируемых падений. Мы наклоняемся вперед и начинаем падать, но не падаем. С каждым шагом мы выбрасываем ногу перед телом так, чтобы поймать себя и предотвратить падение. Затем нога принимает наш вес и выталкивает тело вперед и вверх, начиная новое падение.
Начнем с положения ног и бедер. Не зря в большинстве школ анимации походки изучаются на примере «шарика с ножками». Именно этот треугольник (две ноги и бедра) — основа любой походки.
Обратимся к знаменитой схеме Ричарда Уильямса:
Контакт (Contact)
Построение походки мы начинаем с контактных позиций для каждой ноги. В этот момент передняя нога выбрасывается максимально вперед и пятка достигает поверхности. Передняя нога прямая, задняя немного согнута.
Промежуточная позиция (Passing Position)
Затем выставляем промежуточное положение, брейкдаун между контактами, момент переноса веса с одной ноги на другую. Обратите внимание, что опорная нога в этот момент выпрямляется. За счет этого тело и голова поднимаются чуть выше, чем в контактных позициях.
Уже на основе этих трех ключевых положений (первый контакт, промежуточная позиция и второй контакт) можно получить представление о тайминге и характере будущей походки. Однако этого недостаточно, чтобы показать вес персонажа. Поэтому идем дальше.
Крайнее нижнее положение (Down)
Далее следует крайнее нижнее положение, когда стопа полностью опустилась на поверхность, передняя нога приняла массу тела и согнулась в колене. Именно крайнее нижнее и крайнее верхнее положения позволяют показать вес. Обратите внимание, что в этот момент задняя нога максимально уходит назад и ее мысок все еще касается земли.
Крайнее верхнее положение (Up)
Теперь можно выставлять крайнее верхнее положение. В этот момент пятка задней ноги начинает отрываться от поверхности. Мы выталкиваем свое тело вперед и вверх, достигая самой высокой точки. Поднимаемся немного выше и замедляемся перед тем, как «упасть» вперед.
Зеркально повторив эти позиции для второй половины цикла, мы получаем тот самый минимум информации, необходимый для блокинга, который помогает передать суть абсолютно любой походки.
Судя по референсам, в реальной жизни амплитуды заметно меньше, чем на приведенной выше схеме. Тем не менее, если мы будем придерживаться абсолютного реализма при работе над анимационным персонажем, то нужный эффект не будет достигнут: вес персонажа не «прочитается».
Тайминг
Цикл стандартной походки почти любого человека длится приблизительно одну секунду. Конечно, это не строгое правило, но большинство нейтральных походок попадает под это значение.
Давайте рассчитаем тайминг для блокинга ключевых поз походки при 24 FPS и при частоте 24 кадра в секунду.
1, 13-й кадры — Контакт (Contact)
4, 16-й кадры — Крайнее нижнее положение (Down)
7, 19-й кадры — Промежуточное положение (Passing Position)
10, 22-й кадры — Крайнее верхнее положение (Up)
25-й кадр — Контакт. Здесь повторяется первый кадр. Мы просто выкидываем этот кадр из цикла после проработки всей походки. Это нужно для того, чтобы избежать заметного подтормаживания из-за повторения одного кадра дважды.
Обратите внимание, что промежутки между ключевыми положениями должны быть равны, иначе разница в длительности шагов (даже в один кадр) будет заметна.
Позвоночник
Не забывайте наклонять персонажа во время походки. Позвоночник очень редко бывает абсолютно прямым! И чем быстрее движение, тем сильнее мы наклоняемся вперед.
Позвоночник человека крайне подвижен, и походка не исключение. Он заметно изгибается в противоположную от передней ноги сторону, чтобы сохранить устойчивость.
Здесь хорошо виден принцип contrapposto. Бедра наклоняются в сторону при переносе веса на опорную ногу, а линия плечей компенсирует положения бедер, наклоняясь в противоположную сторону. Опять же, для сохранения баланса.
Движение корпуса и центр тяжести
Во время походки бедра перемещаются не только вверх-вниз, но и из стороны в сторону, смещаясь в сторону опорной ноги для сохранения устойчивости. Чем быстрее движение, тем эта амплитуда сильнее.
Кроме того, бедра всегда поворачиваются в сторону движения ног. Не забывайте, что таз — это цельный элемент. Поворот одной стороны следом за движением ноги всегда влечет за собой поворот другой стороны назад.
Верхняя же часть тела поворачивается в противоположном направлении, в сторону передней ноги, компенсируя движение бедер.
Поворот бедер и их перемещение вверх-вниз не должны происходить одновременно. Между этими движениями также происходит оверлаппинг, так как максимально сильно бедра поворачиваются на контактных положениях, а крайнего высокого и крайнего нижнего положения они достигают до и после момента контакта.
Движения рук
В стандартной походке руки всегда перемещаются противоположно ногам: для сохранения баланса правая рука движется вперед одновременно с левой ногой, и наоборот.
Как правило, крайних положений руки достигают не в момент контакта ноги с поверхностью, а позже — во время крайнего нижнего положения. Это позволяет показать необходимое сквозное движение и избавиться от синхронности.
Движение рук можно сравнить с маятником: они замедляются в крайних положениях и ускоряются по мере движения между этими точками. Траектория движения представляет из себя дугу или «восьмерку».
Не забывайте, что руки почти никогда не двигаются параллельно корпусу и, как правило, сгибаются в сторону тела при движении вперед.
Полировка
Нужно проверить, чтобы движение тела вверх-вниз не было линейным по скорости. Во время походки мы замедляемся по мере достижения самой высокой точки и ускоряемся по мере «падения» вниз.
Как правило, нога максимально выпрямляется непосредственно перед контактом. Очень важно показать момент фиксации ноги в полностью выпрямленном положении (locked knee) хотя бы на пару кадров, чтобы он успел «прочитаться».
Кроме того, акцент на выпрямленной ноге помогает нам показать вес на контрасте с последующим сгибанием ноги.
Зафиксируйте стопы. Как только подошва полностью опустилась на поверхность, она остается на месте без малейших сдвигов, пока пятка не начнет отрываться от земли.
Моменты отрыва и приземления стопы стоит тщательно прорабатывать, не полагаясь на компьютер. Во время отрыва от поверхности мысок ноги не отрывается от земли вплоть до полного переноса веса на опорную ногу. А во время приземления стопа опускается на поверхность с заметным ускорением буквально в пару кадров, что позволяет почувствовать «удар» при контакте.
Между контактом и крайним нижним положением находится момент «перекатывания» с одной ноги на другую, когда пятка задней ноги поднимается вверх, а передняя стопа опускается с пятки на всю подошву. Очень важно прочувствовать этот отрезок.
Важно отследить траекторию движения ступни, которая выглядит не как аккуратная дуга, а скорее вот так:
В реальности мы едва отрываем ногу от земли, максимально экономя энергию, так как походка — это наиболее эффективный способ передвижения. Но, опять же, в анимации мы преувеличиваем такие вещи для лучшего восприятия.
Различия между мужской и женской походкой
Между женскими и мужскими походками существует ряд отличий, обусловленных в первую очередь эволюцией. Походка мужчины более линейна и эффективна, где главной целью является перемещение из точки A в точку B. Женская походка также служит для этой цели, но при этом она выполняет дополнительную функцию — быть привлекательной. В целом, женщины грациозны и аккуратны, в то время как движения мужчин более резкие и тяжелые.
Важно понимать, что в реальности и мужчина может ходить не как мачо и не все женщины перемещаются как модели на подиуме. Здесь мы поговорим о стандартных, усредненных отличиях.
Ширина. Женщины идут практически по одной линии, располагая стопы ближе или даже пересекая друг друга. Мыски больше повернуты внутрь. Мужчины же склонны расставлять ноги шире, выворачивая мыски в стороны.
Длина. У женщин шаги короче, чем у мужчин, и эта длина может дополнительно сокращаться из-за ограничений одежды (юбка, каблуки). Помимо этого, амплитуда движений корпуса из стороны в сторону у женщин меньше из-за более коротких шагов и склонности держать ноги ближе друг к другу.
Амплитуды движений. У женщин они, как правило, не такие контрастные, что важно для сохранения элегантности. В отличие от мужчин, которые ходят более размашисто.
Бедра и плечи. У женщин бедра ведут движение, а верхняя часть тела менее подвижна. У мужчин движение идет от плеч, которые поворачиваются с большей амплитудой. Бедра, наоборот, находятся в зажатом состоянии.
Положение рук. Мужчины широко расправляют плечи, у женщин они чуть сильнее прижаты к телу. Поэтому руки у мужчин скорее согнуты внутрь, а у женщин — выгнуты наружу.
Что делать, если что-то пошло не так
Убедитесь, что верхнего и нижнего положения тело достигает в нужных местах.
Посмотрите, зафиксирована ли передняя нога в выпрямленном положении перед позицией контакта и читается ли этот момент.
Посчитайте количество кадров между ключевыми положениями. Оно должно быть одинаковым для каждой ноги.
Проверьте, чтобы все пары ключевых поз точно соответствовали друг другу по амплитудам и положению частей. Если смотреть на походку сбоку, силуэты должны быть почти идентичны. Однако с такой идентичностью нужно быть внимательнее: при очень быстрых походках и беге совпадение силуэтов может привести к эффекту стробоскопа.
Убедитесь, что персонаж не поворачивается/не наклоняется в одну сторону больше, чем в другую.
Проверьте наличие ускорений и замедлений. Мы замедляемся при достижении верхней точки и разгоняемся по мере падения.
Убедитесь, что задняя нога не начинает отрываться от земли до того, как передняя приняла вес.
Проверьте, чтобы подошва опорной ноги была четко зафиксирована на поверхности, начиная от крайнего нижнего положения и вплоть до начала отрыва пятки от земли.
Советы
Найдите и внимательно изучите видеореференс подходящей походки. Это позволит не только найти необходимые нюансы, которые можно применить в стандартном шаблоне, но и прочувствовать природу походки.
Отключите руки, прорабатывая основное движение. В походке руки, как правило, имеют второстепенную роль, следуя общему движению тела, поэтому имеет смысл заняться их анимацией позже. Первым делом нужно сосредоточиться на движении ног и корпуса.
Иногда бывает полезно скрывать любой лишний элемент и аккуратно отслеживать движение каждой части по отдельности.
Делать цикл походки «на месте» не всегда удобно. Приходится придумывать хитрости для того, чтобы стопы не проскальзывали, когда персонаж будет перемещаться вперед. Иногда удобнее сделать два «честных» шага в пространстве, а уже после отредактировать анимацию, убрав перемещение вперед.
Еще раз отмечу, что в этой статье мы разбирали именно основные принципы двуногой походки. Но в жизни такого понятия как «стандартная походка» не существует. Вы не найдете двух людей, которые ходят одинаково.
Поэтому при создании походки аниматору непременно нужно учитывать не только базовую механику, но и характер персонажа. Но это уже тема для отдельной статьи.
Циклическая анимация бега для игр (Maya)
Меня зовут Валера, я 3D Character Animator в Plarium Kharkiv. За 3 года работы в компании я создал десятки разных анимаций бега и хочу поделиться с вами уже проверенными решениями.
В начале у меня не было определенной схемы работы, я находился в постоянном поиске наиболее удобного варианта. Курс iAnimate открыл для меня создание циклических анимаций с помощью Layered Animation, и жизнь стала намного легче.
В статье расскажу, какие подготовительные шаги я выполняю до того, как приступить к самой анимации в Maya. Обратите внимание, что это работает только со способом построения анимации слоями – Layered animation.
Лимиты
Особенностью игровой анимации являются числа. Обычно баланс игры предусматривает определенные лимиты для скорости передвижения, прыжков, радиуса атаки и так далее. А когда есть ограничения, делать анимацию немного сложнее.
Для анимации в статье я задал следующие параметры:
Настройка сцены
Перед началом работы проверьте, что в настройках сцены указаны правильные единицы измерения. У нас скорость в метрах в секунду, соответственно, выбираем метры. Затем выберите частоту кадров – для игровой анимации она обычно составляет 30 fps.
Также учитывайте, на каком расстоянии от камеры будет находиться персонаж и под каким углом его будет видно. Амплитуда движения в мобильных играх должна быть больше, чем в играх на ПК, потому что экран гораздо меньше и мелкие движения будут незаметны. Для этого желательно создать себе вторую камеру, имитирующую игровую.
Дальше ставим значения для главного контроллера. В нашем случае на 30 фрейме это 0,4 метра. Тангенты должны быть линейными.
Сбор референсов
Сначала определите, какой тип бега вам нужен (спринт, расслабленный, неуверенный и т. д.), а затем уже ищите подходящие референсы. Не стоит копировать найденный пример один в один – так не получится выработать свой стиль и рост в изучении анимации будет минимальный. Проанализируйте работу и уловите главное для себя.
Для статьи я взял готовую модель звездного воина. Решил, что он должен бежать уверенно и атлетично, ведь ему неведом страх, он хочет максимально быстро попасть в центр событий.
Так как анимацию мы делаем для мобильного проекта, движения будут размашистые, с большой амплитудой, чтобы читался силуэт, и довольно рывковые, чтобы передать энергию персонажа. В итоге мне подошел такой референс:
Я уже давно веду свою библиотеку референсов и сначала всегда ищу примеры в ней. Если у меня нет ничего подходящего, в ход идет поисковик. Также я использую как референс следующую картинку – в ней есть всё, что нужно знать о беге.
Настройка анимации
Когда референсы подобраны, можно приступать к поиску скорости анимации и длины шага. Из-за наличия точной скорости бега мы становимся ее заложниками, если, конечно, хотите, чтобы ноги не проскальзывали.
В начале не стоит думать о позе анимации, можно полностью сосредоточиться на длине шага. Выставляем примерное количество фреймов, длину шага и смотрим, скользят ли при этом ноги (тангенты главного контроллера по оси Z мы выставили линейно и для ног по оси Z пока тоже поставим их линейно для полного соответствия). Здесь нужно экспериментировать: менять количество фреймов и длину шага, пока опорная нога не начнет оставаться на месте до момента, когда эту роль не возьмет на себя вторая нога.
После у нас остается небольшая область для маневрирования. Можно сделать шаг шире (при этом будет больше фреймов) или наоборот, уменьшить шаг (при этом ускорится анимация). В любом случае следим, чтобы опорная нога оставалась на месте.
Теперь можно включать Mute для оси Z главного контроллера, чтобы персонаж оставался на месте и мы могли приступать непосредственно к самой анимации. В дальнейшем можно будет пользоваться Mute, чтобы проверять, как будет смотреться бег во время передвижения.
В Graph Editor в контроллере ноги по оси Z нас интересует прямая графика в тот момент, когда нога находится на земле. Другую часть можно менять по усмотрению.
Пожалуй, на этом заканчивается техническая часть подготовки, и теперь можно начинать делать анимацию в свое удовольствие.
Непосредственно анимация
Циклическую анимацию можно делать двумя способами: блокингом и слоями. После всего описанного выше я с трудом представляю, как можно продолжить работу через блокинг. Всю циклическую анимацию я делаю с помощью Layered Animation. Суть этого способа заключается в том, что анимацию нужно начинать делать от бедер и двигаться дальше по иерархии. Если задать правильный ритм анимации бедрам, то дальше всё пойдет логично и просто – это дело практики.
Я начинаю анимацию с оси перемещения Y, потом с оси X и дальше по осям вращения. С осью перемещения Z нужно быть очень осторожными – она легко может испортить вам всю работу. Лучше ее вообще не трогать, по крайней мере, пока вы не будете уверены в своих силах.
Я не буду описывать дальнейший процесс создания анимации, потому что это уже творческая часть и ее лучше показывать видеозаписью, да и обучающие видео можно найти в интернете. Оставлю несколько полезных напоминаний:
Используемую мной модель можно скачать бесплатно. Развивайтесь и получайте удовольствие от своих работ.