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

здравствуйте, сегодня я расскажу вам о псевдо-3d анимации персонажей на примере нашей игры.

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

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

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

3. тело сразу же я вынесла в отдельный символ, т.к. если бы пришлось его вращать вместе с цыплёнком, блик и тень тоже вращались бы, а нам этого не нужно.

4. далее я сделала анимацию каждой части тела цыплёнка вокруг оси x с добавлением масок.
т.к это не реальная 3д анимация, а псевдо, то мы первым делом определяем ключевые позиции поворота цыплёнка. в нашем случае их 4: основное положение, когда цыплёнок смотрит на нас и ещё 3 с шагом 90 градусов. наброски этих положений вы видите на соответствующем слайде.

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

ниже представлен скриншот таймлайна данного символа (по клику увеличивается)

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

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

7. естественно в игре все повороты вправо и влево делаются программно, а также первая анимация (поворот вокруг себя) замедляется и ускоряется тоже программно.
по всем нюансам программирования этих персонажей вы можете проконсультироваться у сантёра, который собственно их и программировал.

а для того, чтобы вам легче было во всем разобраться, выкладываю исходник этого дела:

скачать

кстати если у вас есть аккаунт на facebook, приглашаю присоединиться к этой игре. там теперь есть таблицы рекордов, а в скором времени появится генератор аватарок-цыплят 🙂

  • http://animefish.com dedpbIxto

    За забором обрыв или пропасть? 🙂 И что вас так всех прет от термина псевдо3D ? Ну ведь все равно мониторы у нас плоские и отображают двумерную картинку. Цыплено у тебя слишком резко останавливается вверху — а должен быть изинг 100%, а потом -100% (когда падает). И Мне кажется не хватает кадров на воздухе из пшыкалки — слишком быстро и резко пропадает воздух. Ну и небо — оно меня не радует ни как — от него устает глаз! :)))

  • Iga

    Очень круто, спасибо!

  • http://stalexs.blogspot.com stalex

    Мило, но можно было добавить попу-таз между лапками и шаром, и вращать по х еще и попу-таз (типа как клюв только с чуть более сложной маской), тогда бы не был цыпа слишком круглым, и тогда было б живое тридэ, и глаза плоские, жаль, если б они на краю выпирали из-за шарика было б красивее… нужно было прическу разделить на бантик и чупчик, а глаза разделить на реснички, белки и зрачки… можт проапдейтите игрушку до версии 2.0?:) сэньк!

  • http://psiholabs.ucoz.ua Psih

    Прикольно 🙂
    Тут можно детально все рассмотреть и придраться, но в игре все замечательно.

  • http://wyveren.livejournal.com wyveren

    очень наглядно) Браво. Мне нравится.

  • http://ww.dinaris.ua dinaris

    очень красиво!
    мне понравилось……..

  • http://ksanster.com ksan

    Я писал у себя в блоге, как псевдо-3D сделать программным путем (http://ksanster.com/2009/09/08/quasi_3d_ball/)
    Но цыплята, конечно, прикольнее бильярдных шаров )

  • http://flash-animation.ru Lerika

    @ksan: а шарик отличный то получился. Очень реалистично.

  • Inc

    Вот эта блог-статейка показалась мне интересной
    http://suntsev.com/?p=33
    точнее возник один вопрос, хотелось бы услышать ваше мнение. Неужели это тоже псевдо-3d? я имею ввиду «осваивается легкое низкополигональное 3d». выглядит так, что объекты похоже действительно не плоские картинки с тенями… как реализовать нечто подобное во флеше, 3d max и дальнейшее впихивание во флеш? или все-таки 2d? или нет? или как? ))))