Анимация бега животного.

В догонку к предыдущему уроку о беге хочу рассмотреть бег животных на 4-х конечностях. Видео и флешка с иллюстрациями как обысно прилагается.

1. Собака и крыса.
Это враги нашего ниндзи :о) Сначала я сделала видео анимации бега собаки, но по каким-то причинам оно сохранилось не правильно и испортилось. Поэтому я записала видео на примере крысы.

Итак, рассмотрим принципы анимации бега животных:

2. Сначала рисуется покадровая анимация передней ноги.
Если вы внимательно посмотрите на видео, то прежде чем прорисовывать фазы движения ноги, я накидала приблизительные движения простыми линиями с помощью кисточки. Это по сути является фазовкой движения, так сказать черновая анимация, которая сразу задаёт темп движения и делается для того, чтобы потом не пришлось переделывать всё с начала.

3. Затем рисуется покадровая анимация задней ноги.
Хочу отметить, что у животных задние и передние ноги всегда отличаются, поэтому лучше не лениться и на примере передней ноги нарисовать фазы движения для задней.

4,5. Пускаем ноги в разнобой.
Передние и задние ноги дублируются и в них смещаются кадры на 2-3 вперёд или назад в зависимости от типа бега. Например в собаке первая нога отстаёт от второй всего на 1 кадр, а в анимации крысы на 3 кадра. Думаю на иллюстрации понятно что имеется ввиду.

6. Общая анимация тела.
Далее мы переходим на уровень выше и делаем уже с помощью анимации motion движение корпуса, головы, шеи хвоста итп. Во-первых это движение вверх-вниз, т.к животное во время бега немного подпрыгивает (собака больше, крыса меньше), во-вторых шея с головой подаётся немного вперёд, когда животное делает очередной выпад.

Естественно анимация должна быть цикличной. В данных примерах у меня в анимации бега используется 6 кадров. Если у вас игрушка совсем простая и надо экономить каждый килобайт, можно ограничится и 4-мя кадрами, а если наоборот нужно более детальная проработка движений, то лучше использовать 8-12 кадров.

И в заключение: самый лучший учитель — это природа и наблюдение за ней. Чтобы правильно нарисовать бег того или иного животного — посмотрите как он двигается в жизни. Ну а если по близости никого подходящего нет — YouTube вам в помощь! 🙂

Ниндзя — анимация бега.

Я сейчас занимаюсь разработкой графики и анимации для сиквела одной игры для компании Wheemplay и подумала, что возможно будет полезно записывать свой рабочий процесс на видео и выкладывать его в блоге. Ведь именно наблюдая за работой других людей мы учимся её делать сами.

Для записи я выбрала программку Camtasia Studio 6. Если кто-то может посоветовать что-нибудь хорошее и бесплатное — буду премного благодарна. Пока что это мой первый блин, надеюсь что ком не сильно уж большой.

Теперь о персонаже. В swf-ке ниже вы можете посмотреть как выглядит персонаж. Кстати на первом кадре по клику он прыгает. На втором кадре получившийся в результате работы бег, и более подробная раскадровка на третьем. К сожалению откомпилированные движения в ускоренном видео выглядят не естественно, поэтому я и выложила их отдельно.

А вот собственно сам рабочий процесс. Ужала до 7 минут, дабы не слишком вас утомлять 🙂

Уроки по анимации косточек во Flash CS4

На блоге Flash Enable нашла хороший туториал по работе с косточками во Flash CS4, правда на примере корявенького персонажа, но нам же важна суть, верно?

Часть 1. — Рассказывается о том, как же добавить косточки к нашему персонажу.
Часть 2. — Учит как оптимизировать персонажа и косточки перед использованием анимации.
Часть 3. — О том, как анимировать персонажа с помощью косточек и ключевых кадров.

А вообще отличные видео туториалы по этой теме есть у Мигеля в блоге: раз и два.

псевдо 3d анимация персонажей

здравствуйте, сегодня я расскажу вам о псевдо-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 каждый раз заново не перерисовывал дождик.
этого можно и не делать, но в данной задаче это было необходимо.

вот и всё :о) если вы знаете более удачные способы оптимизации дождя — велкам в камменты :))