Известный художник-аниматор Adam Phillips, автор Brackenwood (если вы не видели этих мультфильмов, срочно смотреть), расшарил видео с процессом создания анимации одной из сцен мультфильма «The Last of the Dashkin». Эффект летящей 3D камеры с бегущим персонажем.
Полное видео состоит из 33-х частей. Пока что Адам выложил только 20, но в скором времени обещал выложить остальное. Видео очень интересное и познавательное. Очень правильный пример создания покадровой анимации.
Смотрите на работу мастера и учитесь!
Ниже выкладываю первую часть. Остальное видео можно посмотреть здесь.
Гейша – это последний персонаж для игры про ниндзю. Графику я уже закончила, дело осталось за программистом. Когда игра выдет, обязательно вам покажу.
В первом видео я записала процесс создания анимаций ходьбы, атаки и смерти.
Этот персонаж интересен тем, что одет в длинную юбку. С одной стороны это значительно облегчает задачу анимации некоторых движений, а с другой наоборот.
Например для анимации походки мне понадобилось всего 4 кадра (слайды 2,3).
Анимация падения заняла 6 кадров (слайды 4,5) и с юбкой особых проблем не возникло.
А вот с атакой пришлось повозиться.
Атака состоит из выпада ногой вперёд, заноса руки с веером за голову и бросания его вперёд.
И собственно выпад ноги и подкачал. Всё рисовалось исключительно на глаз, но если рассмотреть кадры по отдельности (слайд 10), то складывается впечатление, что у гейши ноги растут не известно от куда, ещё и вывихнуты в трёх местах :о)
Поэтому была предпринята работа над ошибками.
Секрет заключается в том, чтобы сначала сделать скелетную анимацию движений ног, а уже потом поверх нарисовать юбку.
Собственно этот процесс и показан во втором видео.
Конечно, анимировать ноги, а потом ещё и прорисовывать юбку это намного дольше и затратнее по времени. Но лучше учиться на первых этапах делать правильно, чтобы потом меньше совершать ошибок…
Кстати если рассмотреть покадрово (7-9 слайды) движения рук, то вот правой руке с веером я уделила достаточно внимания, а на левую немного забила, по сути рукав там должен по другому летать.
Словом совершенству нет предела :о)
В догонку к предыдущему уроку о беге хочу рассмотреть бег животных на 4-х конечностях. Видео и флешка с иллюстрациями как обысно прилагается.
1. Собака и крыса.
Это враги нашего ниндзи :о) Сначала я сделала видео анимации бега собаки, но по каким-то причинам оно сохранилось не правильно и испортилось. Поэтому я записала видео на примере крысы.
Итак, рассмотрим принципы анимации бега животных:
2. Сначала рисуется покадровая анимация передней ноги.
Если вы внимательно посмотрите на видео, то прежде чем прорисовывать фазы движения ноги, я накидала приблизительные движения простыми линиями с помощью кисточки. Это по сути является фазовкой движения, так сказать черновая анимация, которая сразу задаёт темп движения и делается для того, чтобы потом не пришлось переделывать всё с начала.
3. Затем рисуется покадровая анимация задней ноги.
Хочу отметить, что у животных задние и передние ноги всегда отличаются, поэтому лучше не лениться и на примере передней ноги нарисовать фазы движения для задней.
4,5. Пускаем ноги в разнобой.
Передние и задние ноги дублируются и в них смещаются кадры на 2-3 вперёд или назад в зависимости от типа бега. Например в собаке первая нога отстаёт от второй всего на 1 кадр, а в анимации крысы на 3 кадра. Думаю на иллюстрации понятно что имеется ввиду.
6. Общая анимация тела.
Далее мы переходим на уровень выше и делаем уже с помощью анимации motion движение корпуса, головы, шеи хвоста итп. Во-первых это движение вверх-вниз, т.к животное во время бега немного подпрыгивает (собака больше, крыса меньше), во-вторых шея с головой подаётся немного вперёд, когда животное делает очередной выпад.
Естественно анимация должна быть цикличной. В данных примерах у меня в анимации бега используется 6 кадров. Если у вас игрушка совсем простая и надо экономить каждый килобайт, можно ограничится и 4-мя кадрами, а если наоборот нужно более детальная проработка движений, то лучше использовать 8-12 кадров.
И в заключение: самый лучший учитель – это природа и наблюдение за ней. Чтобы правильно нарисовать бег того или иного животного – посмотрите как он двигается в жизни. Ну а если по близости никого подходящего нет – YouTube вам в помощь!
Я сейчас занимаюсь разработкой графики и анимации для сиквела одной игры для компании Wheemplay и подумала, что возможно будет полезно записывать свой рабочий процесс на видео и выкладывать его в блоге. Ведь именно наблюдая за работой других людей мы учимся её делать сами.
Для записи я выбрала программку Camtasia Studio 6. Если кто-то может посоветовать что-нибудь хорошее и бесплатное – буду премного благодарна. Пока что это мой первый блин, надеюсь что ком не сильно уж большой.
Теперь о персонаже. В swf-ке ниже вы можете посмотреть как выглядит персонаж. Кстати на первом кадре по клику он прыгает. На втором кадре получившийся в результате работы бег, и более подробная раскадровка на третьем. К сожалению откомпилированные движения в ускоренном видео выглядят не естественно, поэтому я и выложила их отдельно.
А вот собственно сам рабочий процесс. Ужала до 7 минут, дабы не слишком вас утомлять
На блоге Flash Enable нашла хороший туториал по работе с косточками во Flash CS4, правда на примере корявенького персонажа, но нам же важна суть, верно?
Часть 1. — Рассказывается о том, как же добавить косточки к нашему персонажу. Часть 2. — Учит как оптимизировать персонажа и косточки перед использованием анимации. Часть 3. — О том, как анимировать персонажа с помощью косточек и ключевых кадров.
А вообще отличные видео туториалы по этой теме есть у Мигеля в блоге: раз и два.
здравствуйте, сегодня я расскажу вам о псевдо-3d анимации персонажей на примере нашей игры.
1. итак, в игре у нас есть маленькие милые цыплята, которые крутятся во все стороны, когда их подкидывают в воздух. когда перед нами стояла задача сделать подобную анимацию мы сразу же подумали об использовании 3д модели. но потом посчитали затраты и решили обойтись малой кровью.
в качестве основной формы для цыплят был выбран круг, т.к он не меняет своей формы, в какую бы сторону его не повернуть. сами цыплята у нас отличались только глазами и причёсками, значит остальные элементы у нас были неизменны.
2. персонаж был проанализирован и разбит на составляющие, как вы видите на втором слайде флешки. планировалось заанимировать цыплёнка так, чтобы не использовать покадровую анимацию, а для причёски и глаз использовать исключительно motion tween, чтобы потом с лёгкостью заменять их.
3. тело сразу же я вынесла в отдельный символ, т.к. если бы пришлось его вращать вместе с цыплёнком, блик и тень тоже вращались бы, а нам этого не нужно.
4. далее я сделала анимацию каждой части тела цыплёнка вокруг оси x с добавлением масок.
т.к это не реальная 3д анимация, а псевдо, то мы первым делом определяем ключевые позиции поворота цыплёнка. в нашем случае их 4: основное положение, когда цыплёнок смотрит на нас и ещё 3 с шагом 90 градусов. наброски этих положений вы видите на соответствующем слайде.
исходя из этих основных позиций делаем промежуточную анимацию. в нашем случае с помощью анимации motion и искажения составляющих элементов. при этом помним, что тело у нас будет находиться ниже, поэтому когда какой-то элемент должен находиться за телом, мы прибегаем к помощи маски.
ниже представлен скриншот таймлайна данного символа (по клику увеличивается)
5. вот собственно как выглядит анимация каждого элемента тела.
да, анимация не идеальна, при покадровой анимации можно было бы добиться лучшего результата, но цыплятки достаточно маленькие, чтобы были видны эти погрешности. тем более во время игры они так быстро крутятся и летают, что этого не заметно.
6. итак, анимация в одном направлении сделана. теперь сделаем обычную motion анимацию нашего мучика с вращающимся цыплёнком относительно центра мувиклипа с параметром rotate (вторая позиция в 5-м слайде, если не совсем понятно выразилась).
в результате совмещения этих двух анимация у нас получается полноценная имитация 3D анимации.
7. естественно в игре все повороты вправо и влево делаются программно, а также первая анимация (поворот вокруг себя) замедляется и ускоряется тоже программно.
по всем нюансам программирования этих персонажей вы можете проконсультироваться у сантёра, который собственно их и программировал.
а для того, чтобы вам легче было во всем разобраться, выкладываю исходник этого дела:
кстати если у вас есть аккаунт на facebook, приглашаю присоединиться к этой игре. там теперь есть таблицы рекордов, а в скором времени появится генератор аватарок-цыплят
недавно передо мной стояла задача сделать баннер с анимацией проводов в виде танцующих людей.
вот собственно как он выглядел в конце:
теперь я подробно расскажу как мне удалось справиться с этой задачей. если вы предложите более оптимальный вариант, буду очень признательна.
итак. рисовать с нуля. от руки подобную анимацию достаточно хлопотно и не каждому под силу.
первая мысль, которая возникает – нужно найти видео танцующих людей и обрисовать его.
лично я предпочитаю искать в стоковых каталогах, например www.istockvideo.com
по запросу dancing находим нужное видео. лучше чтобы фигуры людей были однотонные – легче будет с ними работать.
видео без проблем скачивается на комп в формате flv. теперь нам нужно получить последовательность кадров. для этого есть огромное количество различных программ. лично я использую flv converter. программа бесплатная, скачать можно где угодно, например здесь.
устанавливаем её себе и производим следующую последовательность действий:
1. открываем наш flv файл.
2. открываем вкладку image series
3. выбираем параметр jpg и устанавливаем получше качество изображений.
4. присваиваем это действие нашему файлу с помощью кнопки add action
5. нажимаем кнопку process all task
в результате выполненных действий мы получим последовательность изображений нашего видео в формате jpg.
после чего нужно выбрать небольшую последовательность кадров, чтобы движения были зациклены.
35-45 вполне подойдёт. потом их можно дублировать и сделать reverse frames, что сделает нашу анимацию в 2 раза длиннее.
далее идёт самая рутинная работа – прорисовка каждого кадра анимации…
была идея оптимизировать этот процесс с помощью трейса картинок и добавления контуров, но увы удовлетворительного результата у меня не получилось. намного быстрее и аккуратнее делать ручками.
вот собственно и всё.
на данный момент вот уже месяц я работаю над графикой и анимацией для flash игрушки. думаю после того как она выйдет мне будут о чём рассказать. сейчас же мы столкнулись с проблемой оптимизации графики и анимации.
когда слишком много объектов зависит от программной части и от процессора, на помощь приходят хитрости аниматора.
в нашем случае изначально дождь планировалось делать программно, но так как ресурсы и так съедались более важными программными модулям, было принято решение делать дождик ручками.
1. в принципе результат который вы видите вполне приемлемый и если сильно не присматриваться, то не особо и заметно. что дождь не программный.
2. по сути всё что нужно сделать – нарисовать очерёдность линий под нужным наклоном. я использую белый цвет с прозрачностью 25%, но всё зависит от фона. если он сильно светлый, возможно основным цветом стоит выбрать серый или голубой.
3. перерисовываем дождик ещё в 3-х разных положениях. можно больше, зависит от вашего желания.
далее преобразовываем каждое из 3-х состояний в отдельные символы и на панели propertis кешируем символы, как битмапы. это делается для того, чтобы flash каждый раз заново не перерисовывал дождик.
этого можно и не делать, но в данной задаче это было необходимо.
вот и всё :о) если вы знаете более удачные способы оптимизации дождя – велкам в камменты )
денис демьянов, creat studios тайминг анимации игрового персонажа. маленькие секреты. ogg (9mb) 56 мин | ppt (1.5mb) | zip (40mb)
яремчук, 1с, мигалев, борминская, mocap.ru анимация персонажей: с motion capture или без? классические принципы и прогрессивные технологии ogg (5mb) 30 мин | ppt (1.5mb) | zip (150mb)
aлексей медведев, сrytek анимационная система сryеngine2 ogg (9Mb) 54 мин
а в архивах 2007 года нашла ещё один доклад.
и судя по ppt самый интересный из всех здесь представленных. чтож, будем слушать )
денис демьянов, сreat studios принципы классической анимации в современной игровой индустрии ogg (9.5mb) 45 мин | ppt (1mb)
сегодня хочу рассказать о таком приёме анимации, как облака пыли.
этот приём применяется в разнообразных случаях:
- резкое перемещение персонажа
- торможение
- падение объектов на землю
- взрывы
- грубо говоря везде, где что-то хоть как-то может поднять пыль )
рассмотрим на примере хомячка из предыдущей статьи:
1. в моём случае пыль поднимается когда он резко срывается с места и тормозит.
2-8. если пронаблюдать за настоящей пылью, можно заметить, что сначала поднимается густой клуб, увеличивается и постепенно рассеивается. рисовать его одним большим пятном с применением прозрачности – нонсенс, хотя можете попробовать. для реализации этого эффекта лучше использовать несколько облачков поменьше и с каждым шагов увеличивать их количество, уменьшать в размерах и изменять прозрачность.
9. вот собственно результат который получился.
10. когда делается пыль для торможения, её лучше делать не в одном месте, а растягивать вдоль траектории движения.
вот собственно основные принципы анимации. пыль может быть разнообразная, в зависимости от стилистике: с контурными линиями или без, с градиентом, прозрачностью или даже разноцветная. так же, чтобы придать ей реалистичности можно использовать фильтр blur. экспериментируйте, дерзайте!
исходник пыли можно скачать здесь.
итак, период полураспада закончился, в голове уйма идей и приёмов, которыми хочется поделиться! начнём с обещанного. шлейфы.
есть такой хитрый приём, когда что-то очень быстро движется, необходимо дорисовать шлейф, тогда анимация будет казаться более динамичной.
шлейф может быть как в одном кадре анимации, так и в нескольких. лично я использую максимум 5-6 на 25 fps.
важно отметить, что шлейф обычно рисуется градиентом основного или белого цвета движущегося объекта, плавно переходящий в альфу, но могут быть вариации.
рассмотрим на примере теннисного мячика.
1. вот у нас есть обычная motion анимация – мячик ударяется о плоскость, немного сжимается при ударе и летит дальше.
2. теперь ускорим эту анимацию. глаз начинает замечать 5 основных позиций и как такового ощущения быстрого движения нет.
3. а теперь попробуем дорисовать в эту анимацию шлейфы. сразу добавилась динамика. но всё же глаз режет среднее положение мячика.
4. мы оставляем только промежуточное положения мяча в момент удара, всё остальное заменяется на шлейфы. итого получаем очень быструю, динамичную картинку.
5. аналогично можно поступать с персонажами.
6. заметьте, здесь шлейф разноцветный, выделены основные цвета персонажа.
7. кстати, сразу хочу отметить, что при быстром перемещении нужно немного вытягивать персонажа по ходу его движения, тогда анимация будет выгладить более динамично. раскадровка показана на слайде.
кстати, я здесь мультик выкладывала, где повсеместно применяются шлейфы, можете пронаблюдать.
хотела написать пост о шлейфах, остающихся при быстром перемещении персонажей и облачках пыли, которые появляются при каких-либо быстрых действиях, но что-то никак руки не доходят.
поэтому я пока выложу свой мультик для наглядности, чтобы вы хотя бы поняли о чём пойдёт речь )
зы: на хомяка нажать надо чтобы мультик запустился ))
сегодня хотелось бы рассказать о таком параметре как ease. та что мы о нём не знаем? – спросите вы.
изменение параметра от -100 до +100 позволяет настраивать замедление/ускорения анимации как для shape анимации, так и для motion.
но дело в том, что с 8-й версии флэша при анимации motion для параметра ease появилась кнопочка edit. многие о ней даже не знают, а кто знает не всегда использует весь спектр возможностей.
итак, при нажатии на кнопку edit мы получаем вот такой график (кликабельно):
в результате мы имеем возможность управлять замедлением/ускорением с помощью графика. шкала x — последующие кадры до следующего ключевого кадра, шкала y — процент пути.
если снять галочку use one setting for all properties, то нам открывается возможность настраивать кривые для каждого параметра отдельно на одном промежутке анимации! параметры следующие: position, rotation, scale, color и filters.
рассмотрим настройку параметров на паре примеров:
1. допустим нам надо сделать вот такой дурацкий пароходик, плывущий по волнам здесь мы будем работать с двумя параметрами position и rotation.
2. для начала создадим колесо, которое у нас будет крутиться
3,4. растянем анимацию кадров эдак на 90, зададим параметр rotation cw, 1 times и нажмём кнопку edit параметра ease. далее снимаем галочку, выбираем параметр rotation и изменяем график. какой получился у меня, показано на рисунке. колесо быстро крутится, затем сбавляет скорость, сделает пару вращений назад и снова набирает обороты.
5. символ колесо помещается внутрь символа пароходик, который с вою очередь «пускается по волнам» (добавляем направляющую движения).
6. тому промежутку анимации мы настраиваем параметр ease для position и график выглядит немного другим образом.
лично я все графики подбираю на глаз. работать с одной кривой намного проще и удобнее, чем с несколькими промежутками анимаций.
7. а к примеру такой график можно построить для движения рыбки,
8. когда она так себе плывёт, а потом резко так шмыг вперёд!
в общем пробуйте, балуйтесь, возможно сначала будет жутко непривычно работать с графиком, но к хорошому всегда быстро привыкаешь :о)
помнится увидела я в каком-то мультфильме как фон со скоростью проносится перед глазами. и так мне это эффект понравился, что захотелось его повторить. но увеличение частоты кадров до 120 проблемы не решало. и тогда мне открылся один секрет, которым я хочу поделиться с вами :о)
чем быстрее проносится картинка перед глазами, тем смазаннее кажется она. от сюда и решение, нужно кроме анимации движения добавить эффект blur.
итак, всё гениальное просто:
1. преобразовываем нужный фон в movie clip
2. применяем фильтр motion blur, при этом убираем замочек и делаем размытие по x
3. делаем анимацию.
а когда-то ещё в 6-м флеше данный ээфект приходилось делать в фотошопе с помощью фильтра motion blur. в принципе так можно делать и сейчас тоже
надеюсь данный метод пригодится в вашей практике
«анимация каскадом». я не нашла такого определения в интернете, поэтому буду думать что его придумала я :о))))))
по сути это когда какие-то объекты повторяют одно и тоже действие, при этом каждый последующий объект начинает действие позже предыдущего.
думаю очень часто во флеш презентациях встречается анимация списков, которые плавно по очереди отображаются на экране. сделать анимацию списков каскадом можно разными способами но имхо самый быстрый и простой является этот:
1. создаём наш список. каждое слово отдельно.
2. преобразовываем каждое слово в символ и выравниваем их по левому краю. после чего переносим одно из слом на максимальную высоту вниз и распределяем символы на одинаковое расстояние.
3. получаем аккуратный список. то же самое делаем с маркерами, если таковые имеются.
4. распределяем символы по слоям.
5. создаём ключевые кадры на одинаковом расстоянии и делаем в них какие-то изменения, одинаковые для всех символов.
6. например, я сместила и применила эффекты alpha и blur.
7. создаём анимацию.
8. теперь самое главное. смещаем каждую анимацию на несколько кадров вправо, чтобы получился каскад.
9. ну и наконец выравниваем анимацию, заполняя её статическими кадрами.
10. вот что у меня в результате получилось.
11. также с помощью каскада можно делать шлейф
по сути этого же эффекта можно добиться используя символ graphic, если задать ему параметр loop и менять в каждом из символов начальный кадр анимации (собственно такой способ описан в статье murejib, которая и вдохновила меня на этот пост). но! если нам нужно изменить параметры анимации, чтобы например следующая анимация начиналась не с каждого второго кадра, а с каждого 3-го? менять стартовые кадры graphic гораздо хлопотнее чем сдвинуть кадры на таймлайне. к тому же каскад более наглядный и сразу можно увидеть ошибку, чего не скажешь о номерах кадров :о)
зы: xitri, ничё что я стырила твою идею с просмотром изображений?… уж больно она удобная ;о)
