Покадровая анимация походки.

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284
Покадровая анимация походки.

 

По просьбе Оксаны, сделал небольшой урок по анимации. Сразу говорю что опыта создания уроков у меня практически нету, так что приму конструктивную критику Smile Итак приступим. Будем рассматривать прямо ходячих персонажей. О четвероногих братьях наших можно создать отдельную тему...Походка персонажа определяет его характер и в первую очередь бросается в глаза зрителю. Многие считают анимацию походки сложным занятием, но на самом деле это не совсем так. Разумеется для каждого персонажа нужен свой подход. Малейшая ошибка в одном кадре испортит всю анимацию.  Тем не менее следуя определённому алгоритму можно избежать этих ошибок. 

Немного скучной теории Smile В большинстве случаев походку можно представить в виде комбинации четырёх состояний: контакт, отрыв, проход и высшая точка.  В каждом из этих состояний у персонажа меняется положение рук и ног, а так же изменяется высота персонажа. В состоянии "высшей точки" голова персонажа находится в наивысшем положении а в состоянии "отрыва" в самом низком. Говорят начинать рисовать цикл нужно с "контакта" иначе неизбежно появятся проблемы. Очевидно, что когда правая нога находится в заднем положении то левая рука выходит вперёд и наоборот. Такие положения называются conterpose. Отдельное название данной позе придумали не с проста. С  её помощью в анимации походки достигается равновесие (обе стороны тела уравновешиваются).  Любая анимация без равновесия выглядит неестественно.  В состоянии "проход" видна только одна рука, расположенная почти параллельно туловищу. Анимация походки может быть выполнена двумя способами: когда персонаж марширует на месте, а сдвигается фон, и когда он смещается по экрану. Первый способ более универсальный, но бывает сложно подобрать скорость фона и вписать его в окружение. Теперь о анимации на слайдах. Обезьяны - это мой первый опыт покадровой анимации. Используя алгоритм, была получена не плохая анимация походки гориллы. С анимацией бега в моём случае получилось немного сложней. Во первых добавилось количество ключевых кадров с 8 до 22. Чем больше промежуточных кадров, тем плавнее анимация. И тут еще учитывались движения ушей и языка, дыхание и т. д. Ну  а на самом деле, анимацию бега тоже можно уместить в 8 кадров. Бороздя просторы интернета я нарыл множество раскадровак анимации, которые с каждым днём пополняют мою коллекцию. Вот одна из них:

Чудесно не правда ли? Присоединив ту теорию к данным рисункам можно оживить своего персонажа и придать ему настроение. Когда я делал баннер с пандой у меня не было этой картинки. Я наблюдал  за бегающими детьми во дворе, заставлял брата бегать туда-сюда, смотрел мультики Smile И всё делал методом проб и ошибок (мой любимый метод). Об анимации походки можно ещё много рассказывать, например как быть когда нужно анимировать персонажа изображённого не в профиль и высветлять многие другие проблемы. Но зная те основы и добавив немного воображения и физики можно добиться неимоверных результатов.Надеюсь, что статья получилась не очень занудной. И так же надеюсь что у вас анимация получится лучше и плавнее, чем у меня. Если я упустил какой-то важный момент и у вас есть что добавить - милости просим. Все недочёты и промахи (если таковые найдутся) постараюсь исправить в следующем уроке посвящённом скроллингу фона во флеш с помощью as3.

 

Аватар пользователя LeeTovetz
LeeTovetz
Не в сети
Регистрация: 24.08.2012
Баллы: 401

http://www.biomotionlab.ca/Demos/BMLwalker.html
когда то попал на этот ресурс. тоже рекомендую.
походка разная, для толстых, для худых, быстрая и медленная.
Вопрос как бы с этой походки видео снять. Тогда можно было бы во флеш загнать. И по точкам уже своего персонажа рисовать. Кто знает как видео с экрана заснять. Кастом Студией?

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя LeeTovetz
LeeTovetz
Не в сети
Регистрация: 24.08.2012
Баллы: 401

Еще не очень в тему, но почти тоже урок. Потому что походка в чистом виде почти не нужна. Может для игры. и то обычно там бег используется. Вот еще ссылка с уроками по физике и по драке ))

http://bbexp.ru/blog/_stuff/speedlines.swf

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя djz
djz
Не в сети
Регистрация: 23.08.2012
Баллы: 22

Такую же бы штуку для четвероногих ещё.

 

Для записи видео юзаю HyperCam

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

ух ты! специально для  flash-animated..)) нет слов, спасибо большое за урок)

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Анимация походки - источник

контакт, отрыв, проход и высшая точка (CONTACT, RECOIL, PASSING and HIGH-POINT)

Контакт( CONTACT) - вид сбоку и спереди:

Отрыв (RECOIL) - вид сбоку и спереди:

Ключевые кадры походки через весь экран (across the page):

:

Используем 2 впомогательные параллельные линии для ступней - так мы контролируем место

соприкасания ступни с землей:

 

Важно следить, чтобы походка выглядела волнообразно (линия движения головы):

..но не переусердствовать:

 

 

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Примеры анимации походки

  На месте:

Через экран (across the page):

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

LeeTovetz пишет:

http://www.biomotionlab.ca/Demos/BMLwalker.html
когда то попал на этот ресурс. тоже рекомендую.
походка разная, для толстых, для худых, быстрая и медленная.
Вопрос как бы с этой походки видео снять. Тогда можно было бы во флеш загнать. И по точкам уже своего персонажа рисовать. Кто знает как видео с экрана заснять. Кастом Студией?

Отличный ресурс, спасибо!

Аватар пользователя skvozn
skvozn
Не в сети
Регистрация: 24.08.2012
Баллы: 45

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

И еще наглядный урок по созданию походки. Взято отсюда.

Аватар пользователя skvozn
skvozn
Не в сети
Регистрация: 24.08.2012
Баллы: 45

Вот это вещь !!!!  Спасибо Оксана возьму на заметку очень нужная штука

Аватар пользователя LeeTovetz
LeeTovetz
Не в сети
Регистрация: 24.08.2012
Баллы: 401

Да. Мне тоже понравилось. По сылке перешел там еще много мультиков интересных. Персонажи не сложные, но очень круто анимированы, конечно. Чувствуется движение, физика. Дядька супер.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

Всем спасибо за ценнейшие ссылки. Смотрю не налюбуюсь)))

LeeTovetz пишет:

Кто знает как видео с экрана заснять. Кастом Студией?

Можно и с её помощью. Програм в сети предостаточно. Например camtasia, но она платная Smile

Oksana пишет:

ух ты! специально для  flash-animated..)) нет слов, спасибо большое за урок)

Да ладно Smile Всегда пожалуйста!

Аватар пользователя Renderdoll
Renderdoll
Не в сети
Регистрация: 24.08.2012
Баллы: 43

ого, столько всего и сразу! Ну все, сегодня сон точно отменяется, пойду учиться уму-разуму, как красиво шагающих персов рисовать! Огромное спасибо за ценнейший материал! Smile

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Renderdoll пишет:

ого, столько всего и сразу! Ну все, сегодня сон точно отменяется, пойду учиться уму-разуму, как красиво шагающих персов рисовать! Огромное спасибо за ценнейший материал! Smile

на здоровье! пользуйтесь-учитесь, и приносите что-то свое интересное:)

Аватар пользователя belarusdds
belarusdds
Не в сети
Регистрация: 09.10.2012
Баллы: 2

Аватар пользователя belarusdds
belarusdds
Не в сети
Регистрация: 09.10.2012
Баллы: 2

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Ваши наработки по анимаци переносите, пожалуйста, в раздел - "Ваши работы"

Аватар пользователя Renderdoll
Renderdoll
Не в сети
Регистрация: 24.08.2012
Баллы: 43

Надеюсь, что выкладываю видео в ту тему... если что не так - подскажите, перенесу. Smile

Вот нашлось на просторах инета интересное видео анимации бега, сделанной во флеше...И осторожно, там голые девушки! Wink))

 

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

Божественно, спасибо)) Это сколько же времени надо потратить, чтобы каждую косточку прорисовать? Все движется, учтена физика. Мастер класс. 

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

класс!

Пожалуйста, оставьте ваш комментарий. Спасибо!

Для комментирования войдите или зарегистрируйтесь