Так давно не рисовала и анимировала (всё время забирает на себя Flash GAMM), что сейчас от этого занятия получаю просто огромный кайф. И походу стараюсь записать интересные моменты разработки.
Один из них – анимация огня.
Этот вопрос терзает большинство начинающих аниматоров. Скажу сразу – универсального решения нет. Огонь бывает разный и я рассказываю и показываю как сделать только один из его видов. Надеюсь, что данная информация пригодится вам в будущем.
А мы продолжаем вести разработку игры. На этот раз я покажу вам как рисуется простенькая анимация засасывания предмета в пылесос.
Анимация покадровая. Обратите внимание на тени и блики трубы и шланга пылесоса. При расширении они тоже должны увеличиваться.
А вот такой результат получился на выходе. Эдакий Garbage Collector
Давно я что-то не делала никаких уроков, поэтому решила исправиться. Причём записать не просто видео процесса, а со звуком и комментариями.
В данном уроке речь пойдёт о создании однотипных анимаций для разных типов персонажей на примере собак. Анимация методом перекладки.
Это моё первое видео с записью голоса, местами оч нервничаю, часто повторяюсь, можно заметить пару боков, но первый блин всегда комом, так что строго не судите.
Известный художник-аниматор 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. кстати, сразу хочу отметить, что при быстром перемещении нужно немного вытягивать персонажа по ходу его движения, тогда анимация будет выгладить более динамично. раскадровка показана на слайде.
кстати, я здесь мультик выкладывала, где повсеместно применяются шлейфы, можете пронаблюдать.
хотела написать пост о шлейфах, остающихся при быстром перемещении персонажей и облачках пыли, которые появляются при каких-либо быстрых действиях, но что-то никак руки не доходят.
поэтому я пока выложу свой мультик для наглядности, чтобы вы хотя бы поняли о чём пойдёт речь )
зы: на хомяка нажать надо чтобы мультик запустился ))
