Описание урока
Сложность: для начинающих
Продолжительность: средняя
(то, что мы будем создавать)
На этом уроке по фотошопу мы займемся тем, что создадим цикл анимации бегущего на месте человечка. Для того, чтобы превратить наше творение в киноролик, достаточно будет лишь добавить, прокручиваемый справа налево, фон. Анимировать шагающих и бегущих персонажей – не самая простая задача, но, тем не менее, это очень занимательный процесс!
1. Анимация персонажа
Шаг 1
Начнём с добавления на холст направляющих линий, эмитирующих плоскость основания. При создании анимации как бега, так и шага, я предпочитаю обозначать плоскость основания отдельно для каждой ступни. Так походка получится более реалистичной.
Анимация бега и шага во много схожа. Когда персонаж идет, то его голова оказывается в наивысшей точке в “переходный” момент переступания с ноги на ногу. Затем, персонаж опирается на другую ногу, и слегка приподнимается уже на ней.
Когда персонаж бежит, он, в какой-то момент, отрывается от земли обеими ногами, тогда как при обычном шаге земли всегда касается хотя бы одна из ног.
Шаг 2
Начнем рисунок с показанной ниже позы, когда одна из ног пяткой вступает в контакт землей.
Подобные рисунки я, обычно, выполняю в свободной, непринужденной манере. Кроме того, прежде чем добавлять руки, я советую проработать позы и саму анимацию.
Шаг 3
Располагаем вторую ногу. Обратите внимание: на рисунке ниже ступня дальней от нас ноги полностью касается земли. Ближняя к нам нога (правая нога персонажа), в этот момент вот-вот начнет смещаться вперед. Заметьте, как правая нога перекрывает, в процессе своего движения, левую ногу.
Шаг 4
Начинаем работу над нашим третьим по счету рисунком. С учетом того, что мы работаем над циклической анимацией, и бежать наш персонаж будет оставаясь на месте, то его левая ступня (та, что полностью касается пола) должна “скользить” назад, в то время как правая нога будет перемещаться вперед.
Шаг 5
Рисунок – 4: правая нога выносится вперед.
На рисунке ниже вы можете увидеть как я на наши первые четыре рисунка наложил остальные “этапы” бегового цикла. Первые рисунки обозначены черным цветом. Обратите внимание на изменение формы и положения ступни, “проскальзывающей” назад. Именно это и создает иллюзию бега на одном месте. В последующем, к данной анимации можно добавить прокручивающийся фон.
Шаг 6
Рисунок – 5: взмываем вверх! Обе ноги отрываются от земли.
Обратите внимание на то, что на рисунке-5 персонаж расположен выше чем на представленном далее рисунке-6.
Шаг 7
На рисунке 6 персонаж по-прежнему находится в воздухе, но вот-вот коснется земли вынесенной вперед ногой.
Шаг 8
На рисунке-7 нога персонажа, наконец, касается земли (сначала пяткой). Далее, мы просто повторяем только что анимированное движение, только уже для другой ноги персонажа.
Шаг 9
Здесь вы видите, что ближняя к нам ступня полностью опустилась на пол, и опирается на него всей поверхностью подошвы. Постарайтесь добиться того, чтобы каждый рисунок был достаточно хорошо сбалансированным, иначе будет казаться, что наш персонаж падает, лишенный равновесия.
Шаг 10
Точно так же, как ранее в случае с правой ногой, вы можете наблюдать на рисунке-9, что дальняя от нас левая нога персонажа начинает движение вперед. Рисуйте непринужденно! Не бойтесь нарисовать даже то, как левая нога соединяется с нижней частью туловища персонажа, хотя на самом деле мы этого видеть не можем.
Шаг 11
Отрыв от пола. На рисунке – 10 опорная нога толкает персонажа вверх. То есть мы снова повторяем проделанный ранее процесс, но уже в отношении другой ноги.
Шаг 12
На рисунке – 11 персонаж снова полностью отрывается от плоскости пола.
Шаг 13
На рисунке – 12 персонаж еще в полете, не несколько смещен вперед и вниз. А так как мы создаем циклическую анимацию, то при ее проигрывании, за рисунком – 12 сразу последует рисунок – 1. Отличная работа!
Мы неплохо потрудились. Давайте посмотрим, как выглядит наша анимация на данном этапе. Мне кажется, отлично!
Здесь я выделил ближнюю к нам ногу красным цветом, так, чтобы вы более наглядно смогли видеть движение каждой из ног.
2. Анимация рук
В процессе анимации правая рука, как правило, перемещается вперед, одновременно движением вперед левой ноги. Затем, когда вперед начинает перемещаться правая нога, левая рука так же выносится вперед.
Шаг 1
Итак, добавим персонажу руки. Дальняя от нас нога впереди, так же как и ближняя к нам рука. Ближняя к нам нога в крайнем заднем положении, точно так же как и дальняя от нас рука.
Не беспокойтесь из-за деталей. Работайте в стиле наброска пока полностью не закончите с анимацией. Проработку деталей можно оставить на потом. В моем случае руки стилизованы простыми черточками.
(добавляем руки на рисунок-1)
Шаг 2
В тот момент, когда одна нога перекрывает другую, руки так же находятся где-то в серединной стадии их движения. Здесь они как будто встречаются, максимально приближаясь к туловищу с различных направлений.
(руки добавлены на рисунок-2)
Шаг 3
Активнее работаем руками!
Левая рука начинает свое движение вперед, одновременно с правой ногой, так же выносимой вперед. В этот же момент ближняя к нам рука (правая) отводится назад синхронно со “скользящей” назад дальней от нас ногой.
(добавление рук на рисунок - 3)
Шаг 4
Продолжаем! Работаем в прежней свободной манере. Обратите внимание, на положение ближней к нам руки, которая отведена еще больше назад, вместе с дальней от нас ногой, которая находится в крайнем заднем положении.
(руки, добавленные на рисунок - 4)
Шаг 5
У вас отлично получается! Не останавливайтесь!
(добавляем руки на рисунок - 5)
Шаг 6
Заканчиваем с руками
(руки добавлены на рисунок - 6)
(руки на рисунке - 7)
(руки на рисунке - 8)
(рисунок – 9 с руками)
(рисунок - 10 с пририсованными руками)
(руки на рисунке - 11)
(руки на рисунке - 12)
Давайте посмотрим, как выглядит наша анимация с добавленными анимированными руками. На мой взгляд, прекрасно!
3. Симпатичные детали
Теперь, когда работа над движениями персонажа закончена, мы можем подчистить наши рисунки, обозначив окончательный контур четкой черной линией. Здесь уже можно уделить детализации больше внимания. Я, например, добавил глаза. Они не обязательно должны быть очень уж детализированными. Достаточно, если они будут просто узнаваемыми.
Шаг 1
(детализированный рисунок - 1)
Шаг 2
Получается просто замечательно! Для прорисовки моего персонажа я использовал кисть с наконечником среднего размера. Линии не обязательно должны быть совершенно идеальными, вернее, они должны быть несколько небрежными. Так вам удастся подчеркнуть стиль. Некоторые студии работают именно с чернильными линиями, наносимыми при минимальном нажиме. Так, мне кажется, получается даже веселее!
По просьбе Оксаны, сделал небольшой урок по анимации. Сразу говорю что опыта создания уроков у меня практически нету, так что приму конструктивную критику Итак приступим. Будем рассматривать прямо ходячих персонажей. О четвероногих братьях наших можно создать отдельную тему...Походка персонажа определяет его характер и в первую очередь бросается в глаза зрителю. Многие считают анимацию походки сложным занятием, но на самом деле это не совсем так. Разумеется для каждого персонажа нужен свой подход. Малейшая ошибка в одном кадре испортит всю анимацию. Тем не менее следуя определённому алгоритму можно избежать этих ошибок.
Немного скучной теории В большинстве случаев походку можно представить в виде комбинации четырёх состояний: контакт, отрыв, проход и высшая точка. В каждом из этих состояний у персонажа меняется положение рук и ног, а так же изменяется высота персонажа. В состоянии "высшей точки" голова персонажа находится в наивысшем положении а в состоянии "отрыва" в самом низком. Говорят начинать рисовать цикл нужно с "контакта" иначе неизбежно появятся проблемы. Очевидно, что когда правая нога находится в заднем положении то левая рука выходит вперёд и наоборот. Такие положения называются conterpose. Отдельное название данной позе придумали не с проста. С её помощью в анимации походки достигается равновесие (обе стороны тела уравновешиваются). Любая анимация без равновесия выглядит неестественно. В состоянии "проход" видна только одна рука, расположенная почти параллельно туловищу. Анимация походки может быть выполнена двумя способами: когда персонаж марширует на месте, а сдвигается фон, и когда он смещается по экрану. Первый способ более универсальный, но бывает сложно подобрать скорость фона и вписать его в окружение. Теперь о анимации на слайдах. Обезьяны - это мой первый опыт покадровой анимации. Используя алгоритм, была получена не плохая анимация походки гориллы. С анимацией бега в моём случае получилось немного сложней. Во первых добавилось количество ключевых кадров с 8 до 22. Чем больше промежуточных кадров, тем плавнее анимация. И тут еще учитывались движения ушей и языка, дыхание и т. д. Ну а на самом деле, анимацию бега тоже можно уместить в 8 кадров. Бороздя просторы интернета я нарыл множество раскадровак анимации, которые с каждым днём пополняют мою коллекцию. Вот одна из них:
Чудесно не правда ли? Присоединив ту теорию к данным рисункам можно оживить своего персонажа и придать ему настроение. Когда я делал баннер с пандой у меня не было этой картинки. Я наблюдал за бегающими детьми во дворе, заставлял брата бегать туда-сюда, смотрел мультики И всё делал методом проб и ошибок (мой любимый метод). Об анимации походки можно ещё много рассказывать, например как быть когда нужно анимировать персонажа изображённого не в профиль и высветлять многие другие проблемы. Но зная те основы и добавив немного воображения и физики можно добиться неимоверных результатов.Надеюсь, что статья получилась не очень занудной. И так же надеюсь что у вас анимация получится лучше и плавнее, чем у меня. Если я упустил какой-то важный момент и у вас есть что добавить - милости просим. Все недочёты и промахи (если таковые найдутся) постараюсь исправить в следующем уроке посвящённом скроллингу фона во флеш с помощью as3.
Мы уже создали и разметили на временной шкале базовые шаги персонажа для нашей анимации, посмотрим на полученный результат. Пока что мы сфокусируем наше внимание на походке персонажа. Затем он будет подпрыгивать – это уже второй важный момент. Увеличим временную шкалу, на которой наш персонаж идет. Его проход длится в течение первых тридцати четырех кадров. Первым делом мы займемся тем, что создадим промежуточные позы. Мы все еще продолжаем работать только с бедрами и ногами персонажа.
Итак, сейчас мы должны сконцентрировать свое внимание на нижней части туловища персонажа. Затем перейдем к верхней. Когда мы выделяем бедра и ноги, мы видим, что через каждый промежуток, в котором помещается восемь кадров, у нас установлены ключи. Соответственно, эти кадры мы и будем заполнять промежуточными позициями. Перед нами отрезок с первого кадра по девятый. Он занимает восемь кадров, пятый кадр находится посередине этого отрывка. На нем мы и установим промежуточную позицию, которую, иными словами, мы можем назвать переходной (Passing position).
В этом кадре одна нога персонажа перемещается мимо другой. Первым делом мы возьмемся за эту ногу. Перемещается правая нога персонажа. Поэтому мы повернем персонаж этой стороной, чтобы нам стало лучше видно. Вы видите ногу, которая движется. Наша задача сейчас сделать так, чтобы она перемещалась под туловищем персонажа. Но так как эта анимация является мультяшной, мы можем сделать позу немного преувеличенной. Если мы приподнимем ступню, вы увидите, что она упирается в тело. При этом, если мы развернем ее под углом 90 градусов, вы увидите, что пятка расположена выше той точки, где расположено туловище персонажа.
Итак, туловище. На самом деле под персонажем недостаточно места, чтобы переместить под ним ногу. Но есть выход: нам необходимо приподнять тело персонажа, растянуть его. Поработаем над этой позицией. Переключимся на перспективный вид, с этого ракурса вы видите, как пятка персонажа впивается в его тело. Переместим бедро персонажа вверх. Когда мы это делаем, вы можете видеть, как другая нога при этом растягивается.
Это как раз тот момент, когда растягивание и сплющивание персонажа могут изменить ситуацию. Приподнимем персонажа еще чуть выше, чтобы под ним было достаточно места. В Channel Box в канале перемещения вы видите число пять целых девять десятых, округлим его до шести. С целыми числами работать удобнее. Когда мы это сделаем, обратите внимание, как наш персонаж начал двигаться. Как он словно подпрыгивает при ходьбе. Его движения пластичны и мультяшны. Вы видите, как походка персонажа начала пружинить.
Есть одна важная вещь, которую необходимо подчеркнуть. Персонаж движется вперед, поэтому вся его поза должна говорить об этом. Для этого, мы должны наклонить его корпус чуть вперед. Каждый раз, когда персонаж принимает новую позу, мы корректируем расположение его корпуса и наклоняем его в ту сторону, в которую он движется. Эти небольшие изменения добавят направленности его походке. Такие добавочные позы помогают нам усовершенствовать анимацию.
После того, как мы разместили ногу персонажа в момент движения под его туловищем, мы можем еще поработать над дополнительными движениями этой ноги. Сфокусируем наше внимание на ступне. Когда персонаж начинает движение, его пятка должна немного приподняться. Тем самым мы придадим ноге персонажа большую пластичность. Первым делом мы фиксируем правую ступню на одном месте. Далее мы копируем этот кусочек на таймлайне, перемещаемся на пару кадров вперед, затем вставляем то, что скопировали.
Как вы видите, первые пару кадров стопа персонажа полностью стоит на земле. Теперь мы обратим внимание на его пятку. Необходимо приподнять ее выше. В итоге мы получаем следующий результат: когда ступня персонажа начинает отрываться от земли, первым делом поднимается его пятка, и лишь затем носок. Еще раз: устанавливаем ключ на первом кадре, затем на третьем, когда пятка персонажа поднимается. В этом моменте персонаж только начинает перемещать ногу. На пятом кадре он находится на середине действия, нам необходимо обнулить показатели поворота ступни (Rotate X) в Channel Box.
У нас получилось движение. По сути, персонаж поднимает пятку, перемещает стопу и опускает ее в другой точке. Развернем персонажа, чтобы нам было лучше видно. Повторим еще раз: персонаж поднимает пятку, перемещает и опускает. Обратим внимание на промежуточную позу в этом действии. Необходимо подумать о том, как расположен носок ноги при этом. Ступня является гибкой, и она перемещается вслед за основной ногой. При этом пятка и носок должны двигаться особым образом, словно осуществлять взмах. Установим ключ для носка ноги.
Для этого мы выбираем носок ноги персонажа и устанавливаем ключи для него по ходу выполнения движения: в самом начале, затем на третьем кадре. В этом месте, когда ступня персонажа поднята, мы начинаем немного поворачивать носок вниз и назад. Носок ноги должен как бы волочиться вслед за стопой. Запомните, что когда нога движется вперед, то сила инерции будет как бы тянуть назад. И после того, когда нога пошла вперед, я хочу, чтобы ступня здесь стала плоской. Но прежде чем нога окончательно опустится на землю, я хочу развернуть стопу немного вверх, и кроме того направить дополнительно вверх сам носок. Эти действия сделают движение ноги более контрастным и интересным.
Теперь, когда нога поднимается, носок движется самостоятельно. Можно развернуть еще чуть-чуть. Благодаря всем проделанным действиям, ступня персонажа стала более гибкой. Можно продолжить корректировать позы, слегка меняя расположение ступни персонажа. Можно выдвинуть ее чуть больше вперед. Мы проработали один шаг. Дальнейший процесс работы над походкой практически одинаков: мы осуществляем те же действия для каждого шага.
То же самое мы делаем с левой ногой, затем с правой, затем персонаж принимает финальную позу. Как только вы поймёте и научитесь изображать один шаг вашего персонажа, то работа над следующими не представит для вас никакой сложности. Сейчас вы можете попрактиковаться сами, а затем мы вернемся к курсу для получения новых знаний.
написал этот урок, чтобы показать простой и эффективный способ настройки костей ног персонажа для анимации. Подобные уроки встречаются тут и там на просторах интернета, но обычно они довольно сложны и запутаны: показывается жуткая конструкция стопы из десяти костей и такого же количества родительских привязок. Наша задача состоит в снаряжении ноги таким образом, чтобы она могла выполнять свои функции – стоять на земле, когда персонаж приседает, шагать без проскальзывания, приподниматься на носочки и т.д.Урок выполнялся в версии 2.57 . Пора уже, товарищи, отвыкать от родного 2.49 :)
На полных новичков не рассчитан, нужно иметь хотя бы базовые навыки работы в Blender .
Итак, начнем. Для начала быстренько выдавим из куба вот такую вот примитивную ногу (для простоты) и установим на поверхность базовой сетки (это будет как бы поверхность земли). Нам будет достаточно одной ноги. Если есть желание, сделайте две с общим родителем в области таза. Subdivision Surface делать не будем, это нам сейчас ни к чему.
Переходим в вид справа (Нужно, чтобы была ортогональная проекция Right Ortho
) и ставим 3d курсор
в верхнюю часть бедра:
Проследим за тем, чтобы курсор находился посередине бедра так же и в виде спереди. Возвращаемся к виду справа.
Лезем в меню и добавляем кость: Add > Armature > Single Bone
. Чтобы кости были видны поверх модели, идем в панель Object Data
на панели команд и там в группе Display
включаем опцию X-Ray
:
Нажимаем Tab
для включения режима редактирования, затем G
и тащим кончик кости в область колена со смещением немного влево, ближе к коленной чашечке. Нажимаем E
и экструдируем вторую кость до лодыжки. Обратите внимание, что колено должно быть слегка согнуто, чтобы впоследствии программа смогла легко построить IK-цепочку.
Эти кости связаны соотношением родитель – потомок
. Начинаем строить стопу. Приближаем область стопы и ставим 3D курсор
как показано на рисунке.
Добавляем независимую кость с помощью комбинации клавиш Shift+A
. Нажимаем G
и тащим кончик кости влево, так, чтобы он немного выступал за носок ботинка.
Снова нажимаем Shift+A
и тащим кончик кости вправо до сустава лодыжки. Сразу же экструдируем из кости стопы вспомогательную кость пятки, похожую на шпору:
Можно было бы поиграть в чехарду с выравниванием суставов через 3d курсор
, но это мелочи, с которым вы справитесь и сами.
Выделяем сустав лодыжки (большой шарнир) и выравниваем по нему 3d курсор (Shift+S > Cursor to Selected) . Отсюда строим кость, которая будет управлять положением и поворотом всей стопы. Кость будет основным управляющим рычагом, так что делаем ее побольше: Shift+A, G и тащим вниз.
Это все кости, которые нам понадобятся. Переименуем их, чтобы не путаться впоследствии. Имена дадим русские, но латинскими буквами. Нажимаем N
, появляется панель свойств объектов, в которой среди прочих опций имеется область Item
.
Выделяем последовательно кости и переименовываем их, вписывая имена в поле с косточкой. Имена указаны на рисунке:
Закрываем панель свойств (N)
. Начинаем делать привязки. Выделяем кость nosok
, затем, удерживая Shift
, IK_stopa
. Делаем последнюю кость родителем:
Ctrl+P > Keep Offset .
Выделяем кость stopa , затем через Shift кость IK_stopa . Нажимаем Ctrl+P > Keep Offset .
Итак, IK_stopa – родитель костей nosok и stopa . IK_pyatka – изначально потомок кости stopa. Теперь настроим IK цепочку для голени и привяжем ее к IK_pyatka .
Переходим в режим позиционирования Pose Mode .
Выделяем кость golen
. Переходим на панель Bone Constraints
, раскрываем список ограничителей, щелкнув по кнопке Add Constraint
. Выбираем в списке Inverse Kinematics
. Открывается панель настроек IK
. Выставляем в его полях значения, как показано на рисунке:
Здесь Armature
– имя нашего скелета, а IK_pyatka
– цель, на которую будет направлена кость golen
, где бы она не находилась.
Теперь выделите кость IK_stopa , нажмите G и потаскайте ее слегка, чтобы убедиться, что все работает правильно.
Верните кость обратно, и проверьте как вращается кость stopa
. Должно вылядеть так:
Верните ее в исходное положение. Также убедитесь, что нога может приседать, потаскав ее за кость bedro
.
Вернув все на место, займемся привязкой модели ноги к скелету.
Не отключая Pose Mode
для скелета, выделяем ногу, идем в панель Modifiers
в области задач и, раскрыв список Modifiers
, выбираем Armature
. В поле Object
появившейся панели настроек модификатора выбираем объект нашего скелета Armature
:
В окне 3D View
переходим в режим Weight Paint
.
Курсор примет вид круга, определяющего диаметр кисти для раскрашивания вершин. Слева вы видите панель настроек кисти, среди которых свойство Weight
и Radius
представляют особый интерес. Значение свойства Weight
равное 1.000
задает максимальную силу воздействия кисти на вершины. Установите значение Radius
равным примерно 20
(зависит от размера вашей модели), Strength
(сила воздействия) равным 1.000
. Прокрутите панель настроек вниз и раскройте свиток Tool
. Здесь в выпадающем списке выберем режим кисти Mix
, если он еще не выбран. Если в процессе раскрашивания вам понадобится удалить выделение с некоторых вершин, выбирайте режим Subtract
.
Итак, выделяем правым щелчком кость bedro
и начинаем раскрашивать вершины ноги, находящихся в районе кости bedro
. Поворачивайте вид вокруг, чтобы раскрасить вершины со всех сторон. Нажмите Z
, если хотите вдеть, где проходят ребра модели. Приближайте модель так, чтобы удобно было раскрашивать отдельные вершины.
Дойдя до колена, установите в опции Weight
значение 0.5
а затем раскрасьте вершины колена, как показано на рисунке. Максимальное воздействие кисти теперь будет равно половине своей прежней силы. Не забывайте про вершины на другой стороне ноги.
Делаем то же самое для голени, окрашивая колено в половину силы воздействия, а остальные вершины – с максимальным значением Weight
до лодыжки.
Выделяем кость stopa
и красим, как показано на рисунке:
И завершаем раскрашивание вершин с выделенной костью nosok
.
Теперь ухватите кость IK_stopa
потаскайте ее, чтобы убедиться, что нога гнется как нужно. Если отдельные вершины не реагируют на перемещение костей, докрасьте их, выделив соответствующую кость.
Верните модель в Object Mode
и выделив арматуру, переключитесь в режим Pose Mode
.
Продемонстрируем работу скелета на примере анимации одного шага. Примем нулевую позицию оси Z
, на которой сейчас покоится наша замечательная нога, за поверхность земли.
Начнем с того, что повернем кость stopa
примерно на 45 градусов, а bedro
переместим немного вперед, как будто персонаж отталкивается от земли, приподнимаясь на носок.
Обратите внимание, что кость IK_stopa
остается на месте. Выделите все кости, нажав пару раз клавишу A
. Внизу находится панель Timeline
с элементами управления для вставки ключевых кадров и проигрывания.
Нажмите кнопку с изображением красного круга для включения автоматического режима записи. Справа в выпадающем списке Active Keying Set
выбираем LocRot
– будем фиксировать ключи положения и поворота костей. Щелкаем по кнопке с ключиком справа (рядом с перечеркнутым). Этим мы зададим начальные ключи для всех костей ноги (все кости остаются выделенными).
Переместим ползунок в панели Timeline
на 20
кадр. Согнем ногу в колене, переместив вперед и вверх кость – рычаг IK_stopa
. Не забудем вернуть назад повернутую ранее кость stopa
так, чтобы она соединилась с костью IK_stopa
. Ориентируйтесь на рисунок.
Переходим к кадру 40
. Переместим кость bedro
немного вперед и вниз. Когда мы ставим ногу на землю, область таза слегка опускается. Кость IK_stopa
поворачиваем и ставим на землю.
Переходим на кадр 60
и перемещаем bedro
вперед, а ступню поворачиваем и ставим на землю.
В каждой из позиций ключевые кадры были вставлены автоматически. Вернитесь на первый кадр и просмотрите анимацию, нажав комбинацию клавиш Alt+A
. Анимация несколько замедлена, но это лишь для наглядности.
В этом уроке я показал принцип настройки костей и простой анимации ноги. Те же принципы применимы и для настройки рук, если предполагается, что персонаж будет опираться на что-то или двигать большие предметы наподобие ящика. А может быть это будет какое-то животное, ходящее на четырех ногах...
На этом все. Удачи!
