Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > Tails

Рейтинг: 5.00. Голосов: 2.

Основы создания 2д анимации на примере

Запись от Tails размещена 25.02.2012 в 16:38
Обновил(-а) Tails 26.09.2012 в 02:30 (перезалиты изображения)

По кадровая, ручная рисовка + возможности "высоких технологий".

Здесь я расскажу именно об принципе создания анимации в 2д, о том как совмещать ручную по кадровую рисовку с программным движением. Я не буду рассказывать об интерфейсе какой-либо программы, куда нужно тыкать/нажимать или т.п.

Погнали:
В основе любой 2д анимации есть 2 типа движения, а из них уже создается все остальное:
  1. Программное движение объекта: когда вы задаете начальную и конечную точки, а промежуточные кадры высчитываются автоматически (собсно это и есть High tech)
  2. По кадровая рисовка вручную

Программное движение объекта:
Чтобы хорошо понять суть современной 2д анимации, представьте себе слои на которых вы рисуете - как прозрачные листы:
Название: ilustration_1.gif
Просмотров: 1712

Размер: 2.5 Кб

Допустим мы хотим нарисовать машинку едущую по дороге (вид сверху). В таком случае, на первом листе мы рисуем дорогу, на втором машинку:
Название: ilustration_2.gif
Просмотров: 4868

Размер: 5.6 Кб

Наложив их друг на друга, получаем общую картину - машинка на дороге. Далее нужно сымитировать движение. Для этого, мы сделаем так, чтобы лист с дорогой постепенно уходил вниз, имитируя тем самым "езду" машинки. Мы зададим для слоя с дорогой - начальное и конечное положение, а также время за которое он должен переместиться. Все остальное за нас посчитают:
Название: ilustration_3.gif
Просмотров: 1378

Размер: 95.3 Кб

Нечто похожее на езду у нас уже есть. Доработаем анимацию, добавим к дороге ещё один лист, теперь у нас всего будет - 3 листа:
Название: ilustration_4.gif
Просмотров: 2112

Размер: 338.4 Кб

Анимация дороги готова, но не забываем, что мы можем также двигать и слой с машинкой! Давайте сделаем её немного более живой. И ещё один момент: движение для слоев можно задавать не только по горизонтали или вертикали, их можно двигать, крутить, масштабировать, сплющивать, добавлять фильтры, маски и ещё много чего.
Название: ilustration_5(small_size).gif
Просмотров: 1383

Размер: 535.1 Кб

Такой способ анимации довольно простой и самое главное - быстрый, в плане создания. Так как от аниматора требуется всего лишь задавать начальные и конечные параметры для слоев. (Ну разве не высокие технологий?)

По кадровая рисовка вручную:
Этот же способ применяется там, где средствами программного движения добиться нужного эффекта - невозможно. Например: взгляд на объект под разным углом.

Итак, допустим мы хотим сделать, чтобы наша машинка "раскачивалась" при езде. Для этого, мы вручную рисуем каждый кадр:
Название: ilustration_6.gif
Просмотров: 1129

Размер: 3.2 КбНазвание: ilustration_7.gif
Просмотров: 1122

Размер: 9.8 Кб

Помещаем раскачивающуюся машинку в двигающийся лист 1:
Название: ilustration_8(small_size).gif
Просмотров: 1192

Размер: 556.8 Кб
Мы только-что объединили оба способа анимации!

Но на этом дело не ограничивается, сейчас у нас есть 3 листа, которые двигаются сами по себе. Эти три листа можно поместить "внутрь" другого - четвёртого листа. Он может быть чем угодно, от заднего фона до человеческого зрачка. В нашем случае это - телевизор с захватывающим блок бастером в эфире:
Название: ilustration_9.gif
Просмотров: 1300

Размер: 217.7 Кб

Вот и вся магия 2д. Такой принцип "по кадровой + программной" анимации используется везде, от игр до аниме.
Всего комментариев 5

Комментарии

Старый 25.02.2012 20:03 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Отлично! Спасибо, только мне не очень понравилось раскачивание машины.
Старый 25.02.2012 20:35 TanaTiX вне форума
TanaTiX
 
Аватар для TanaTiX
Лично я в таком уроке не нуждаюсь, но считаю правильным появление такового на форуме. Так что спасибо. А то все коды, да коды...
Старый 25.02.2012 20:40 Tails вне форума
Tails
 
Аватар для Tails
С начало я хотел ответить в этой теме, но после решил вынести объяснение сюда.
Старый 25.02.2012 21:44 Astraport вне форума
Astraport
 
Аватар для Astraport
Нужно раскачивать синхронно с движением второго слоя - согласовать кадры ручной анимации и программной. То есть при приближение к краю автобус накреняется в его сторону. Так будет итоговая анимашка эффектнее.
Старый 25.02.2012 22:09 GBee вне форума
GBee
 
Аватар для GBee
Это же жигули с убитыми амортизаторами, поэтому так колбасит.
Урок отличный!
 

 


Часовой пояс GMT +4, время: 05:06.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.