Обычно используется в 2d играх. Допустим, если нужно сделать анимацию ходьбы персонажа, то рисуется несколько изображений персонажа в разных стадиях движения. Потом в игре эти кадры переключаются с каким-то интервалом времени. Профит.
Подобный подход подразумевает довольно большой объем работы художника. Motion Capture тут никак не прикрутишь. Но художник, естественно, может использовать снимки людей и животных в разных фазах движения в качестве референсов.
С технической стороны обычно предъявляются следующие требования (так с кадрами удобнее работать): изображения должны обладать прозрачным фоном, между кадрами должен быть один и тот же интервал времени, анимация должна быть "на месте" (движение персонажа обычно осуществляется программно), не должно быть необходимости сдвигать кадры один относительно другого.
Далее действия разнятся в зависимости от игрового движка и желания левой пятки программиста. Но чаще всего изображения собираются в атлас (также их называют spritesheet), который состоит из картинки со множеством кадров + описания координат кадров в этой картинке (и их названий), которое может быть прочитано движком.
В 2d покадровые анимации - практически единственный способ сделать реалистичную анимацию персонажа.
А вот движение , поворот , изменение размера - эти анимации обычно делаются программно. Думаю, нетрудно догадаться, что со всех сторон намного выгоднее двигать персонажа из кода, чем рисовать все его движение с отступом от начальной точки.
Но, таким же образом можно и полноценно анимировать персонажа!
Если нарисовать его не целиком, а сделать его состоящим из отдельных частей (руки, ноги, тело и т.п.), то каждую из частей можно двигать относительно другой, и получить в результате анимированного персонажа.
Подобная техника использована, например, в проекте , демонстрировавшем 2d возможности движка Unity3d , когда они в нем только появились. Персонаж состоит из отдельных частей, которые движутся относительно друг друга при помощи различных средств анимации движка. При запуске в последних версиях Unity может потребоваться доработка проекта напильником.
Скелетная анимация является развитием этой идеи. Персонаж все так же разделяется на части. Только теперь эти части привязаны к костям некоего скелета и движутся вместе с ними. Как это работает, очень хорошо видно в промо-ролике Spine (на всякий случай, предупреждаю, что Spine - платная система).
Тем не менее, применять Motion Capture к персонажам созданным таким образом будет не более чем освоением бюджета. 100% Реалистичности все равно добиться не удастся (ибо 2d), а среднестатистический 2d-художник/аниматор сделает все быстрее, дешевле и лучше.
Но, по факту, отличие от анимирования отдельных частей тела "вручную" только в более удобном инструменте для создания анимаций.
А вот отличия от покадровых анимаций - значительные. Плюсы скелетной 2d анимации - в намного меньшем объеме текстур (на ПК это уже почти не имеет значения, а вот на мобильных плафтормах - еще какое), в намного меньшем количестве работы художника (рисовать нужно не 100500 кадров одного персонажа, а всего лишь несколько частей тела) и в возможности переноса анимаций между персонажами с одинаковым скелетом. Минус - в меньшей реалистичности.
В 3d все немного не так. Персонаж является объемной моделью, которая на части не делится (но может и делиться, если нужно). При анимации скелета - происходит деформация сетки модели. Для того, чтобы понять, увидеть и пощупать, как все это создается и работает, могу порекомендовать (на английском) по созданию персонажа в Blender и импорту его в Unity.
Для персонажей с одинаковым скелетом анимация тут так же может быть общей. В том же Unity, например, есть Mecanim Humanoid Rig. В результате чего можно купить/сделать/скачать бесплатно готовую анимацию и применять ее к любым гуманоидным персонажам (естественно, и персонажи, и анимации должны быть созданы и настроены определенным образом).
Анимации могут создаваться как моделлером, так и отдельным аниматором, в том числе и при помощи Motion Capture. Собственно, после получения mocap-данных с реального человека (этот процесс, думаю, должен быть понятен) они дорабатываются напильником и превращаются в обычные анимации. Плюс, конечно, очевиден - анимации становятся более реалистичными. Проблемы тут в том, что реалистичность хороша далеко не всегда, и в том, что аниматор сам вручную зачастую сделает лучше, быстрее и дешевле.
Кроме вышеописанного, стоит упомянуть про Ragdoll . Суть заключается в том, что к костям скелета вместо анимации применяется физика, вследствие чего персонаж может более "реалистично" (с точки зрения физики) падать, умирать и т.п. Ragdoll, кстати, бывает и в 2d, но это редкость.
А в связи с сопутствующим вопросом, обращу внимание на IK (Inverse Kinematics) - весьма вероятно, что в указанных играх использовалось именно оно. Но, вообще, это просто мое предположение, свечку при разработке этих игр я не держал.
Что делать, если Вы не художник, и не аниматор, и не моделлер, и не т.п.
Будьте внимательны с лицензиями! Многие "свободные" лицензии имеют требования, выполнение которых может оказаться невозможно в проекте! Проприетарные - тем более!
P.S. В качестве бонуса - Carnegie Mellon University Motion Capture Database . Она же, конвертированная для Unity: , , . Бесплатно.
Мир open source не стоит на месте и постоянно развивается. Про Blender 3D написано уже много статей, но помимо Blender, существует еще много полезных и бесплатных программ. Одна из них, это MakeHuman . На Хабре упоминания о ней имеются, но какой либо информации по ней нет. Предлагаю вам заглянуть под кат и посмотреть, что анимация персонажей в связке MakeHuman+Blender3D, это действительно просто. Осторожно, много картинок.
Запустим Blender и перейдем в настройки (Ctrl+Alt+U).
В дополнениях, у вас должен появиться пункт MakeHuman, при выборе которого вы увидите три дополнения, которые необходимо активировать проставив галочки.
Также необходимо активировать дополнение Import-Export Make Human:
Последнее, что необходимо сделать в настройках, это поставить галочку возле Auto Run Python Scripts (необходимо для работы скрипта импорта).
Сохраняем настройки нажав Save User Settings.
Сразу скажу, что русский язык включается в настройках.
MakeHuman, это генератор персонажей мужского и женского пола. По пиктограммам и надписям, думаю понятно, какой ползунок за какую часть человеческого тела отвечает.
Во вкладке «Моделирование» персонажа можно состарить, изменить цвет кожи, сделать ему длинные руки, ноги и т.д.
Во вкладке «Геометрии» персонажа можно одеть, добавить ему волосы, зубы, брови, веки, язык и другие необходимые органы (если требуется).
Для примера, я сделал вот такого симпатичного молодого человека.
Теперь, необходимо добавить ему кости для анимации.
Переходим во вкладку Поза-Анимировать и выбираем любые понравившееся кости. Я выбрал кости «Basic».
По середине окна, есть кнопка с тремя точками, которая позволяет выбрать папку для сохранения и имя файла. Сохраняем нашего персонажа и переходим в Blender.
Ищем сохраненный ранее файл и выбираем его.
В принципе, персонаж со всеми костями и манипуляторами готов. Можно подвигать частями тела и уже делать анимацию в ручную. Но это не наш метод и мы пойдем дальше.
Blender поддерживает формат анимации bvh. Данную анимацию, в основном, получают с помощью Motion Capture. В интернете много файлов с готовой анимацией. Мы возьмем анимацию отсюда . Скачиваем архив Zip file for BVH directories 01-09 (45 MB). и распаковываем.
Убеждаемся, что в Blender выбран наш персонаж и в так называемом «T» окне, выбираем вкладку Misc и нажимаем кнопку Load And Retarget.
В открывшемся окне выбора файла, выбираем любой понравившийся нам файл с анимацией bvh, который мы скачали ранее.
И теперь можно насладиться нашей анимацией, нажав кнопку Play.
2. После того как вы накопите у себя много файлов с анимациями bhv, становится трудно ориентироваться в них всех. Естественно, вам хочется иметь какой-то предпросмоторщик. И он есть. Называется bvhacker, является бесплатной и open source программой и живет . Так же, с помощью него можно исправлять и корректировать анимацию.
На этом на сегодня всё, надеюсь информация будет кому-то полезной.
В следующей статье расскажу о том, как создать анимацию, используя камеру и motion capture в blender.
Это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).
Сначала нужно создать векторный персонаж в Sketch . Вы можете использовать мой готовый пример (вместе с примером principle) – скачайте исходники .
Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию.
Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle.
Наш импортированный персонаж из Sketch Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде.
Присоедините каждый артборд к следующему Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей:)
Анимация в конечном виде Вот и все, теперь давайте запишем анимацию.
В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”!
Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях – очень интересно посмотреть на результат.
Профессиональный 9-ти месячный онлайн курс по анимации персонажей подготовлен с учётом опыта и знаний, полученных у аниматоров крупнейших мировых студий. Курс разработан таким образом, чтобы эффективно и в понятной форме обучить студентов созданию анимации персонажей, провести их через полный цикл создания собственного анимационного фильма и выпустить подготовленными к работе аниматорами.
Онлайн курс «Анимация персонажей» состоит из следующих разделов:
На этом курсе вы научитесь создавать качественную и правдоподобную анимацию от простых объектов до полноценных анимационных персонажей. Также вы научитесь замечать ошибки и избегать их при создании анимации и пройдёте полный путь создания собственного короткометражного фильма - от написания идеи сценария до создания финальной анимации.
В дополнение к основному материалу курса вам будут предоставлены видео примеры с подробными объяснениями, которые помогут усвоить материал. А еженедельные практические задания и встречи с инструктором станут твёрдым “закрепителем” полученных знаний.
Чтобы учёба была ещё более интересной и эффективной, мы организуем для вас онлайн встречи с аниматорами из DreamWorks, Disney и других крупных анимационных студий.
Вот несколько записей предыдущих встреч:
С чего начинается создание анимации?
Как анимировать персонажей?
Как
передать эмоции анимацией?
Как создавать анимацию лица?
Что такое законы
анимации и как их применять?
На эти и многие другие вопросы вы получите ответы
на данном курсе.
Вы также получите возможность бесплатно скачать и установить лицензионное программное обеспечение компании Autodesk, программы Maya, 3DS Max, Softimage и другие.
Представленные на данном курсе материал и знания применимы вне зависимости от того, в каком программном пакете вы работаете. Но так как множество крупных анимационных студий используют Maya, и так как нам нужно было выбрать какой-то один пакет для демонстрации процессов создания анимации, мы тоже выбрали Maya. На данном курсе вы можете использовать и другие программные пакеты.
В первой части курса вы ознакомитесь и научитесь применять на практике все основные законы и принципы анимации, придуманные аниматорами Диснея. Каждый из них будет подробно рассмотрен и для лучшего усвоения будут представлены примеры анимаций и видео примеры из повседневной жизни.
Также вы научитесь наблюдать за окружающим вас миром и замечать вещи, на которые до этого не обращали внимания.
Мы рассмотрим не только теоретическую сторону создания анимации, её законы и принципы, но также освоим инструменты создания анимации. Вы узнаете, как создавать анимационные сцены, как импортировать персонажей в сцену, как ставить анимационные ключи, как работать с каналами трансформаций и анимационными кривыми, как создавать и редактировать анимацию и ещё много разных интересных анимационных аспектов, которые будут легко вами освоены, так как будут подробно рассмотрены с примерами и пояснениями.
На протяжении этой части курса вы создадите несколько анимаций, начав с простого прыгающего мяча, продолжив падением куба, движением качели и маятника, прыжками мячика с хвостом и закончив анимацией походки персонажа, в общем пройдёте все обязательные основы, которые помогут вам понять и закрепить законы и принципы анимации. Другие, более сложные анимации персонажей, вы создадите на протяжении следующих частей данного онлайн курса.
Полученные в данной части курса знания и опыт станут надёжным фундаментом в вашей дальнейшей анимационной карьере.
Во второй части курса вы узнаете, как работает механика нашего тела, как мы двигаемся, как происходит движение отдельных частей нашего тела и почему это важно знать и учитывать при создании анимации. В этой части курса вы начнёте работу с более сложными, полноценными 3Д персонажами. Увидите, как полученные ранее основы соединяются, взаимодействуют и применяются относительно анимации персонажей, а также помогают достичь отличных и привлекательных результатов. Вы научитесь вдыхать жизнь в персонажей и заметите, как простое движение или простая поза могут передавать настроение, характер и желания персонажей.
На протяжении этой части курса вы создадите ещё несколько разных анимаций персонажа, это будут анимации походки, бега, разворотов, прыжков, приземлений, подъёма, толканий, поднятия тяжестей и другие. Вы подробно ознакомитесь с механикой тела персонажей и закрепите её на практике.
Третья часть курса откроет для Вас мир актёрского мастерства. Вы научитесь замечать и выражать персонажами эмоции, жестикулировать и показывать процесс мышления персонажа, что сделает вашу анимацию более живой и привлекательной. Вы узнаете, какими чёткими или скрытыми, но в тоже время важными, могут быть жесты, какое невероятное количество эмоций и информации могут передать глаза, и что в диалоге не только слова и текст передают мысль, но также и тон, контекст, настроение персонажа, то, в какой ситуации он в данный момент находится - всё это будет влиять на его поведение и передачу мысли. Вы научитесь создавать артистичную и выразительную анимацию тела и лица персонажа. А после детального рассмотрения техники и нюансов анимацию тела и лица персонажа. А после детального рассмотрения техники и нюансов создания анимации речи и синхронизации губ (lip sync) узнаете, как создавать анимации говорящих персонажей, как анимировать рот, губы и лицо в целом согласно предоставленной звуковой дорожке (озвучке), и как делать анимации диалогов.
Задания этой части курса проведут вас через создание анимаций с выражением чувств и перемены эмоций персонажей и создание анимаций говорящего персонажа (монолога/диалога).
Эта часть курса будет не менее интересной и захватывающей, чем предыдущие. Вы пройдёте весь путь производства собственного короткометражного фильма!
Это отличная возможность не только закрепить полученные знания и ознакомиться с производственным процессом, но и создать собственный короткометражный фильм, который станет отличным пополнением вашего портфолио и существенно поможет Вам в поиске работы и продвижении по карьерной лестнице.
В этой части курса вы узнаете, как придумать идею вашего фильма и какие важные
В этой части курса вы узнаете, как придумать идею вашего фильма и какие важные моменты нужно учесть при её создании, как написать сценарий и спланировать предстоящие работы. Вы научитесь компоновать сцены, работать с камерами и видео монтажом, создадите раскадровку и аниматик. И, конечно же, ещё раз пройдёте весь цикл создания анимации от расстановки ключевых поз до финальной полировки самых тонких нюансов и деталей вашей анимации.
В заключительной части курса вашими заданиями будут: создание идеи и сценария короткометражного фильма, создание раскадровки и аниматика (первичной, грубой версии вашего фильма), создание анимаций сцен вашего фильма и финальный монтаж – сборка сцен в готовый фильм.
Знания, полученные вами на курсе «Анимация персонажей», применимы и полезны вне зависимости от того, какой программный пакет для создания анимации вы используете - MAYA, 3DS Max, Softimage, Cinema4D, Houdini, Blender, Lightwave или другие.
Возможно, вы хотите создать собственную игру в стиле ретро или помочь кому-то с графикой. Тогда вам понадобится спрайт : анимированный в разных позициях персонаж в стиле пиксель-арт.
Пройдите этот урок, в котором я научу вас созданию милого кролика с зацикленной анимацией бега.
Если вам сложно рисовать в стиле пиксель-арт, то воспользуйтесь готовыми спрайтами.
Перед анимацией, мы создадим статичный рисунок, поэтому нам нужно придумать, как будет выглядеть наш персонаж.
Это не самый важный шаг в этом уроке, но создание наброска является частью моего рабочего процесса.
Я нарисовал несколько набросков головы и выбрал наиболее подходящий по стилю.
Чтобы превратить кролика в пиксельный рисунок, открываем Фотошоп и рисуем глаза. Набросок нам нужен только для того, чтобы определить стиль рисунка.
Если вы никогда не занимались пиксель-артом, то создаем новый файл не очень большого размера, например, 400 х 400 пикселей. Мы много будем работать с увеличением масштаба (до 700%) и использовать инструмент Pencil Tool (P) (Карандаш) для рисования отдельных пикселей. Я советую вам открыть дополнительное окно с рабочим документом, в котором масштаб будет 100-200%, чтобы вы могли сразу в реальном размере видеть свою работу без необходимости на одном документе туда-сюда переключаться с большого масштаба на маленький. Таким образом, у вас будет открыто два документа: на одном масштаб до 700% (рабочий), а на другом - 100-200%.
Я не ограничиваю себя определенным размером спрайта, но я постараюсь сделать персонажа как можно меньше, при этом сохранив наиболее важные детали. Поэтому глаза - хорошая начальная точка.
Глаза представляют из себя две простые линии, которые находятся рядом. Каждый глаз 3 пикселя в высоту и 1 пиксель в ширину, черного цвета.
Закончив глаза, мы можем продолжить рисовать нос и другие детали. Ничего страшного, если на данном этапе линии выглядят слишком просто.
Теперь мы сгладим некоторые линии. Также я добавил большие передние зубы.
Дорисовываем пару пикселей, чтобы создать улыбку.
Уши нарисованы максимально узкими с внутренней частью шириной 1 пиксель и таким же контуром.
Одно ухо рисуем свисающим вниз.
Рисуем второе ухо.
Рисуем большие пухлые щеки и заканчиваем голову.
Теперь мы можем нарисовать тело. У кролика будет человекоподобная фигура. Рисуем туловище в форме капли.
Ноги кролика будут короткими с большой стопой. Пока рисуем только одну ногу.
Рисуем вторую ногу, но сдвигаем ее слегка вправо, чтобы она не перекрывалась первой.
Ноги выглядят слегка смещенными, поэтому я передвинул их на один пиксель левее. Также я объединил ногу с животом, удалив пиксель между ними.
В положении стоя видна только одна рука. Рука имеет форму капли и немного перекрывает туловище.
Удаляем лишние линии на руке.
Базовый контур нашего персонажа готов.
На данном этапе мы превратим персонажа в законченный статичный спрайт.
Выбираем цвет.
Каким цветом вы хотели бы закрасить кролика? Я выбрал желтовато-коричневый цвет и заполнил им все, кроме носа. Для заливки используем Paint Bucket Tool (G) (Заливка).
Теперь давайте нарисуем белый живот. Зубы также закрашиваем белым. На носу добавляем один пиксель розового цвета, остальное оставляем белым.
Теперь нанесем тени: более темным оттенком базового цвета шерсти добавляем тени в тех местах, куда меньше всего попадает свет. Также этим цветом можно добавить текстурности на щеках.
Нога, которая находится на заднем плане, должна быть темнее. Таким образом, заднюю ногу полностью закрашиваем цветом тени, так же делаем с задним ухом, только на кончике оставляем один пиксель базового цвета.
Некоторые детали персонажа будут выглядеть лучше с меньшей контрастностью, поэтому я закрасил некоторые области черного контура темно-коричневым (например, шея и мордочка).
Персонаж в положении стоя готов.
Теперь мы можем добавить кролику немного движения.
Вы можете создать подобную анимацию, используя любое количество кадров, но, так как персонаж маленький, шести кадров будет достаточно.
Давайте пока уберем конечности.
Голова и туловище не будут сильно меняться во время бега, поэтому на всех кадрах эти элементы будут находиться в одном положении.
Ниже рисуем линию, которая зафиксирует высоту ног и будет показывать поверхность, по которой бежит кролик.
Берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем голову и верхнюю часть туловища и сдвигаем выделенную область на один пиксель (для этого активируем инструмент Move Tool (V) (Перемещение) и используем клавиши со стрелками).
Затем передвигаем голову на два пикселя правее.
В предыдущем шаге туловище получилось немного растянутым. Чтобы это исправить, сожмем его по вертикали на 1 пиксель и отредактируем контур и заливку.
Также опускаем туловище на 1 пиксель вниз, потому что большую часть анимации ноги будут в согнутом положении, и, таким образом, они не будут одинаковы по высоте.
Мы немного упростим себе задачу и будем работать только с ногами на переднем плане, так как для заднего плана они будут идентичны.
Движение ноги похоже на маятник: большую часть времени нога согнута, за исключением первого кадра, когда персонаж делает шаг вперед.
Таким образом, у анимации движения ног будет 6 кадров (советую вам изучить готовые раскадровки анимации бега). Обратите внимание на положение стопы. Для наглядности я нарисовал ноги синим цветом.
На новом слое рисуем заготовки ног. Обратите внимание, что ноги не привязаны к одной точке на туловище. Когда конечность отходит назад, то ее основание перемещается левее, а когда нога направлена вперед - правее.
Далее выполняем последовательность действий по рисованию законченного варианта ноги. Для начала синий цвет закрашиваем цветом шерсти (для этого можете воспользоваться инструментом Paint Bucket Tool (G) (Заливка) с выключенным параметром Contiguous (Смежные пиксели)) и, вместо рисования контура вокруг ног, выделяем пустую область за пределами ног с помощью Magic Wand Tool (W) (Волшебная палочка) и сжимаем выделение Select - Modify - Contract (Выделение - Модификация - Сжать) на 1 пиксель. Затем инвертируем выделение Select - Inverse (Выделение - Инвертировать) и далее инструментом Paint Bucket Tool (G) (Заливка) (Contiguous (Смежные пиксели) отключаем) заливаем выделенную область цветом контура.
Ноги еще не закончены, но давайте добавим на некоторых кадрах положение в прыжке.
Мы добавляем прыжок, потому что во время бега тело персонажа не находится все время на одном уровне. Поэтому поднимаем туловище и голову на 1 пиксель выше на третьем кадре, где нога вытянута назад и отталкивается от земли, и шестом кадре, на котором нога поднимает кролика вверх.
Кадры с прыжком отмечены ниже фиолетовыми линиями. Для других линий уменьшаем непрозрачность (Opacity) до 20%, это будет тень. В играх-платформерах такая тень не всегда нужна, но в нашем случае она сделает анимацию интереснее.
Чтобы закончить ноги, делаем стопу более пухлой, соединяем ногу с телом и немного затеняем ее.
Оставшиеся две фиолетовые линии закрашиваем черным и также уменьшаем непрозрачность до 20%.
Закончив с ногами, копируем их и перемещаем копии на несколько пикселей вправо.
Сейчас картинка выглядит странно, потому что обе ноги направлены в одну и ту же сторону, что естественно для кроликов, так как они передвигаются прыжками. Но наш кролик - человекоподобный персонаж и будет двигаться соответствующим образом.
Чтобы создать анимацию бега, ноги должны двигаться в противоположных направлениях, когда одна нога вытянута вперед, вторая - отведена назад.
Поскольку у нас 6 кадров, движение одной ноги на противоположную сторону будет состоять из трех положений. Переставляем местами копии ног так, чтобы оригинал и копия были направлены в противоположные стороны.
Слои с копиями должны находиться под слоем с туловищем кролика.
Чтобы закончить ноги на заднем плане, закрашиваем их более темным оттенком базового цвета, как мы делали на статичном рисунке выше.
Так выглядит готовая анимация ног. Пока не думайте о самом процессе анимации. Сперва мы закончим подготовку кадров, а потом займемся сведением их в зацикленный бег.
В исходном уроке анимация
Теперь пора добавить руки.
Ниже вы можете посмотреть черновую раскадровку движения рук. Они находятся в изогнутом положении на протяжении всего цикла анимации, только немного распрямляясь на первом кадре. Но вы можете попробовать нарисовать свою собственную анимацию движения руки.
Размещаем руки на новом слое над телом и заполняем их основнім цветом кролика, как мы делали с ногами.
Добавляем объем.
И, наконец, затеняем, чтобы добавить больше объема.
Затеняем копии рук и меняем их местами, чтобы обе руки были направлены в противоположные стороны.
Запомните, что руки двигаются в противоположном направлении относительно ног. Например, когда левая нога идет вперед, левая рука отходит назад.
Вот так выглядит анимация рук.
В исходном уроке анимация
Теперь добавим движения голове, так как сейчас она выглядит слишком статично.
Сейчас мы сделаем так, чтобы уши двигались в такт телу. На кадрах, где кролик слегка подпрыгивает, уши направлены вниз, двигаясь по инерции, несмотря на то, что кролик подпрыгивает вверх.
На следующем после прыжка кадре уши менее изогнуты и направлены вперед.
Также анимируем щеки. Их движение похоже на движение ушей: во время прыжка они опускаются чуть ниже, затем после прыжка подымаются.
Вот так выглядит готовый вариант.
В исходном уроке анимация
Нам осталось доработать туловище. Сперва анимируем белый живот. Во время бега грудь слегка поворачивается, а белое пятно должно реагировать на это движение.
Когда передняя рука направлена назад, будет видна большая часть пятна, когда рука направлена вперед, мы видим лишь небольшую часть живота.
В статичном положении необязательно рисовать хвост, так как он может быть скрыт за туловищем. Но в анимации бега лучше не игнорировать этот элемент.
Сначала на новом слое рисуем красный квадрат, чтобы обозначить место расположения хвоста. Пока что этот слой может находиться выше всех предыдущих слоев.
Заполняем хвост цветом, наносим тени и обводку.
На первом кадре, когда передняя рука отводится назад, кончик хвоста перекрывается.
Чтобы закончить хвост, перемещаем слой на задний план и при необходимости корректируем тени/детали.
Мы закончили работу с кадрами. Вот так выглядит готовая анимация. Дополнительные детали делают анимацию гораздо интереснее, не правда ли?
В исходном уроке анимация
У нас есть 6 кадров с зацикленной анимацией бега. Теперь нам осталось склеить их вместе.
Копируем все кадры на новый файл.
Вам нужно копировать по одному кадру в правильной последовательности (слева направо). Чтобы скопировать все слои одновременно, вам нужно перейти в меню Edit - Copy Merged (Редактирование - Скопировать совмещенные данные). Перед копированием убедитесь, что фон прозрачный и не залит цветом.
Размер нового файла должен быть чуть больше кролика.
Вставив кадры, размещаем их в правильном положении. Нижняя линия остается без изменений на всех кадрах, как и нос, кроме двух кадров, где кролик подпрыгивает на 1 пиксель.
В итоге у вас должно получиться всего 6 слоев, по одному слою на каждый кадр, фон прозрачный.
Чтобы начать создавать анимацию в Фотошоп, нам нужно открыть временную шкалу Window - Timeline (Окно - Шкала времени). На шкале находится кнопка Create Frame Animation (Создать покадровую анимацию). Вместо нее может быть кнопка Create Video Timeline (Создать временную шкалу для видео), чтобы переключиться на анимацию, нажмите кнопку в виде стрелки и в появившемся выпадающем меню выберите нужный режим.
Нажимаем кнопку Create Frame Animation (Создать покадровую анимацию), затем кликаем по кнопке вызова параметров в правом верхнем углу шкалы…
…и выбираем Make Frames From Layers (Сделать кадры из слоев).
И, наконец, выделяем все кадры и при необходимости меняем задержку (я выбрал 0.1 секунды), устанавливаем режим повторения на Forever (Всегда).
И получаем вот такого забавного кролика с анимацией бега!
Теперь вы можете использовать этот спрайт в игре или экспортировать его в GIF.
Поздравляю, теперь кролик умеет бегать! Он готов к спасению принцессы-крольчихи и другим героическим свершениям.
Этот урок должен дать вам понимание принципов создания дизайна и анимации спрайтов. Теперь вы можете нарисовать своего собственного персонажа или использовать для игры готового кролика!
