Создание анимационного персонажа. Как создать персонажа для анимации. Как добавить простую анимацию персонажа

Это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).

Ваша первая анимация персонажа

Сначала нужно создать векторный персонаж в Sketch . Вы можете использовать мой готовый пример (вместе с примером principle) – скачайте исходники .

Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию.

Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle.

Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде.

Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей:)

Вот и все, теперь давайте запишем анимацию.

Запись анимации

В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”!

Что дальше?

Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях – очень интересно посмотреть на результат.

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

Создание качественных скелетных 3D анимаций сегодня, пожалуй, самая труднодоступная для инди разработчиков задача. Вероятно поэтому так мало инди игр в 3D, и так много проектов в стилях пиксель арта или примитивизма, а также бродилок без персонажей в кадре. Но теперь это соотношение может измениться…

Попробуйте сосчитать количество разнообразных анимаций в Uncharted 4. По моим оценкам там около часа уникальных движений, не считая лицевой анимации (850 выражений по словам авторов). Подобные игры задают фантастическую планку качества.

Примеры анимации Uncharted 4 (>40мб GIF)

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

Все это я вспоминаю для того, чтобы оценить по достоинству щедрый подарок от Mixamo . Он буквально открывает дверь на новый уровень для независимых разработчиков: компания Adobe купила Mixamo, и теперь 2.5 тысячи скелетных анимаций для персонажей они отдают совершенно бесплатно "for unlimited commercial or non commercial use ":
www.mixamo.com

Еще пол года назад можно было их получить только выложив порядка $36 000 (ну или спиратив в сети). Помимо анимаций компания также предлагает бесплатную версию инструмента для ригинга и скининга персонажей, инструмент для создания множественных уровней детализации с минимальными потерями качества (LOD), генератор персонажей и плагин для захвата лицевой анимации.

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

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

Одним из ярких примеров может быть игра Guild Wars 2 где анимация движений и графика уже достаточно хороши, но вот большой диапазон возможных скоростей и направлений движения персонажа не обеспечен столь же большим набором анимаций, и персонажи либо буксуют на месте, либо проскальзывают вперед как по льду. Та же проблема долгое время преследует и игры на движке Gamebryo (серия TES: Morrowind, Skyrim), да и многие другие.

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

Поэтому для достижения реализма нам в любом случае потребуется гигантский набор разнообразных клипов с движениями в различных направлениях, с различной скоростью, и т.п… Кроме того, анимационные клипы редко можно использовать изолированно, воспроизводя один за другим. Чаще всего в игре присутствует множество анимаций, между которыми не заготовлено специальных анимированных переходов. Поэтому для их симуляции применяется плавное смешивание через линейную интерполяцию поворотов костей. Для удобной настройки таких переходов используется т.н. конечный автомат или машина состояний (State machine). В UE и Unity для этого есть специальные инструменты: Persona и Mecanim . Каждый узел там это некоторое состояние скелетной модели (заготовленный анимационный клип или результат их смешения - Blend Tree). Когда выполнены некоторые заданные условия, осуществляется плавный переход из одного состояния в другое, во время которого оба оказывают пропорциональное времени влияние на повороты костей и смещение объекта. Таким образом достигается иллюзия непрерывности движения.

Состояние может быть не одиночным клипом, а смешанным по тому же принципу набором клипов (Blend Tree / Blend Space). Например из клипов движений персонажа в стороны можно выбрать несколько, смешав их пропорционально вектору желаемого движения, и получить движение под любым произвольным углом. Однако существуют такие анимации, для которых смешивание оборачивается некорректными позами. Например когда одна анимация двигает ноги персонажа вперед, а другая вбок, линейное смешивание может привести к пересечению ног друг с другом. Чтобы этого избежать нужно тщательно подбирать анимационные клипы, синхронизировать их фазу, длину и скорость, либо добавлять отдельный клип специально для данного вида движений. Все это сложная и кропотливая работа. И чем больше возможных состояний и переходов между ними, тем сложнее привести их в согласие друг с другом, и проследить за тем, чтобы все нужные переходы срабатывали когда это требуется.

1) Самым очевидным решением является захват движений реального актера при помощи Motion Capture и привязка смещения персонажа в игре к смещению «корневой кости» в самой анимации - принцип Root Motion. Тогда персонаж будет двигаться ровно так, как двигался актер во время записи.

Выглядит очень реалистично. Более того, это единственный способ достоверно воспроизвести сложные маневры вроде выпадов, уворотов и паррирования атак холодным оружием.

Но этот подход несет в себе и очевидные проблемы.

Допустим, персонаж хочет подвинуться к краю обрыва: актер на записи наклоняется, поднимает ногу и делает смелый широкий шаг по сцене. А персонаж шагает прямо в пропасть… Чтобы этого избежать, нужно прервать шаг где-то посередине, но это не только выглядит неестественно, но и затрудняет игроку выбор нужного момента из-за нелинейности движения, в котором может быть долгая подготовка (наклон), а затем резкое уверенное движение (шаг). Можно записать несколько вариантов движений. Допустим: осторожные маленькие шаги, нормальные, и бег. А затем смешать их по параметру требуемой скорости, который можно увеличивать линейно и предсказуемо. Но что если нам нужны движения в стороны? Значит для каждого варианта ширины шага нам нужны еще три-четыре варианта (за вычетом зеркальных). А еще персонаж должен уметь поворачивать во время движения. Значит для каждого варианта нам нужны движения с поворотом. А если поворот может быть быстрым и медленным? Значит еще раз умножаем число необходимых клипов на два. А теперь нам нужно движение по наклонной поверхности! А потом нам захочется, чтобы персонаж умел делать тоже самое вприсяди. Итого - просто сотни и тысячи вариантов анимации которые нужно смешивать и следить за тем, чтобы это происходило корректно и приводило к движениям с нужной скоростью. И все равно, во многих случаях управление будет ощущаться как «ватное», поскольку инерция актера и наша невозможность предусмотреть все возможные человеческие маневры будет лишать игрока контроля над персонажем. Эту проблему, к слову, прочувствовали на себе игроки в The Witcher 3, поэтому в одном из крупных обновлений разработчики внедрили альтернативный вариант управления, где анимация быстрее отзывается на управление в ущерб реализму. В шутерах же проблема нелинейности движения обретает особенно выраженный характер: игроку часто приходится выглядывать из-за угла и быстро уходить обратно, и момент резкой смены направления может очень отличаться - игроку требуется как можно скорее вернуться обратно за укрытие, а у нас нет возможности предсказать заранее, какой ширины шаг он планировал и проиграть соответствующую анимацию. Игроку, в свою очередь, будет трудно привыкнуть к ширине шага, которую делает его персонаж, и к скорости этого шага, чтобы прервать его вовремя.

Во-вторых, Root Motion плохо годится для сетевых игр. Нелинейность движения не только затрудняет игроку предсказание скорости, но и лишает нас возможности интерполировать и экстраполировать движение чтобы компенсировать сетевую задержку, что является очень важным и сложным аспектом в быстрых сетевых играх. Если смещение персонажа задается только анимацией, то трудно аналитически подобрать нужные параметры машины состояний (смешивающей разные анимации), которые приведут к движению персонажа в точно нужном нам направлении и с точно нужной нам скоростью (выбранных для компенсации расхождения). Если же сделать наоборот, так, что анимация будет ориентироваться на фактическое движение, то при коррекции расхождения между сервером и клиентом легко можно будет подобрать наиболее подходящую анимацию, и даже если она будет чуточку несоответствовать фактическому смещению, этого почти никто не заметит.

Поэтому техника Root Motion используется часто в одиночных играх от третьего лица, где управление осуществляется контекстуально - в зависимости от наличия укрытия, препятствия, режима движения или других обстоятельств, и редко применяется в сетевом режиме и MMOG.

Из последних заметных проектов, использующих Root Motion, можно выделить The Witcher 3 . Трудно переоценить усилия, вложенные в производство всех его движений.

Пример анимации The Witcher 3 и ее съемки

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

Но, к сожалению, этот метод довольно сильно нарушает привычный подход к анимированию, и поэтому я не смог найти простого способа реализовать его, например, с использованием стандартного анимационного компонента Unity. В Unreal Engine также пока нет необходимого функционала, однако разработчики обещают когда-нибудь перенести низкоуровневые наработки, сделанные для Paragon, в общедоступную версию движка. Основной сложностью является поиск и воспроизведение нужного кадра на основании данных о фактическом смещении и повороте. Для этого авторы предлагают делать пре-процессинг анимационных клипов и генерировать для каждого из них дополнительный блок данных: Distance Curve, в котором будут покадрово сохранены значения смещения и поворота корневой кости относительно начала или конца анимации. Затем, в ходе выборки, можно производить быстрый бинарный поиск нужного кадра, где достигнуты соответствующие параметры смещения и поворота, и воспроизводить его.

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

Теги: Добавить метки

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

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

Если вам сложно рисовать в стиле пиксель-арт, то воспользуйтесь готовыми спрайтами.

1. Дизайн персонажа

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

Шаг 1

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

Я нарисовал несколько набросков головы и выбрал наиболее подходящий по стилю.

Шаг 2

Чтобы превратить кролика в пиксельный рисунок, открываем Фотошоп и рисуем глаза. Набросок нам нужен только для того, чтобы определить стиль рисунка.

Если вы никогда не занимались пиксель-артом, то создаем новый файл не очень большого размера, например, 400 х 400 пикселей. Мы много будем работать с увеличением масштаба (до 700%) и использовать инструмент Pencil Tool (P) (Карандаш) для рисования отдельных пикселей. Я советую вам открыть дополнительное окно с рабочим документом, в котором масштаб будет 100-200%, чтобы вы могли сразу в реальном размере видеть свою работу без необходимости на одном документе туда-сюда переключаться с большого масштаба на маленький. Таким образом, у вас будет открыто два документа: на одном масштаб до 700% (рабочий), а на другом - 100-200%.

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

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

Шаг 3

Закончив глаза, мы можем продолжить рисовать нос и другие детали. Ничего страшного, если на данном этапе линии выглядят слишком просто.

Шаг 4

Теперь мы сгладим некоторые линии. Также я добавил большие передние зубы.

Шаг 5

Дорисовываем пару пикселей, чтобы создать улыбку.

Шаг 6

Уши нарисованы максимально узкими с внутренней частью шириной 1 пиксель и таким же контуром.

Шаг 7

Одно ухо рисуем свисающим вниз.

Шаг 8

Рисуем второе ухо.

Шаг 9

Рисуем большие пухлые щеки и заканчиваем голову.

Шаг 10

Теперь мы можем нарисовать тело. У кролика будет человекоподобная фигура. Рисуем туловище в форме капли.

Шаг 11

Ноги кролика будут короткими с большой стопой. Пока рисуем только одну ногу.

Шаг 12

Рисуем вторую ногу, но сдвигаем ее слегка вправо, чтобы она не перекрывалась первой.

Шаг 13

Ноги выглядят слегка смещенными, поэтому я передвинул их на один пиксель левее. Также я объединил ногу с животом, удалив пиксель между ними.

Шаг 14

В положении стоя видна только одна рука. Рука имеет форму капли и немного перекрывает туловище.

Шаг 15

Удаляем лишние линии на руке.

Базовый контур нашего персонажа готов.

2. Цвет

На данном этапе мы превратим персонажа в законченный статичный спрайт.

Шаг 1

Выбираем цвет.

Каким цветом вы хотели бы закрасить кролика? Я выбрал желтовато-коричневый цвет и заполнил им все, кроме носа. Для заливки используем Paint Bucket Tool (G) (Заливка).

Шаг 2

Теперь давайте нарисуем белый живот. Зубы также закрашиваем белым. На носу добавляем один пиксель розового цвета, остальное оставляем белым.

Шаг 3

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

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

Шаг 4

Шаг 5

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

Персонаж в положении стоя готов.

3. Рисуем кадры бега

Теперь мы можем добавить кролику немного движения.

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

Шаг 1

Давайте пока уберем конечности.

Голова и туловище не будут сильно меняться во время бега, поэтому на всех кадрах эти элементы будут находиться в одном положении.

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

Шаг 2

Берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем голову и верхнюю часть туловища и сдвигаем выделенную область на один пиксель (для этого активируем инструмент Move Tool (V) (Перемещение) и используем клавиши со стрелками).

Затем передвигаем голову на два пикселя правее.

Шаг 3

В предыдущем шаге туловище получилось немного растянутым. Чтобы это исправить, сожмем его по вертикали на 1 пиксель и отредактируем контур и заливку.

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

Шаг 4

Мы немного упростим себе задачу и будем работать только с ногами на переднем плане, так как для заднего плана они будут идентичны.

Движение ноги похоже на маятник: большую часть времени нога согнута, за исключением первого кадра, когда персонаж делает шаг вперед.

Таким образом, у анимации движения ног будет 6 кадров (советую вам изучить готовые раскадровки анимации бега). Обратите внимание на положение стопы. Для наглядности я нарисовал ноги синим цветом.

Шаг 5

На новом слое рисуем заготовки ног. Обратите внимание, что ноги не привязаны к одной точке на туловище. Когда конечность отходит назад, то ее основание перемещается левее, а когда нога направлена вперед - правее.

Шаг 6

Далее выполняем последовательность действий по рисованию законченного варианта ноги. Для начала синий цвет закрашиваем цветом шерсти (для этого можете воспользоваться инструментом Paint Bucket Tool (G) (Заливка) с выключенным параметром Contiguous (Смежные пиксели)) и, вместо рисования контура вокруг ног, выделяем пустую область за пределами ног с помощью Magic Wand Tool (W) (Волшебная палочка) и сжимаем выделение Select - Modify - Contract (Выделение - Модификация - Сжать) на 1 пиксель. Затем инвертируем выделение Select - Inverse (Выделение - Инвертировать) и далее инструментом Paint Bucket Tool (G) (Заливка) (Contiguous (Смежные пиксели) отключаем) заливаем выделенную область цветом контура.

Шаг 7

Ноги еще не закончены, но давайте добавим на некоторых кадрах положение в прыжке.

Мы добавляем прыжок, потому что во время бега тело персонажа не находится все время на одном уровне. Поэтому поднимаем туловище и голову на 1 пиксель выше на третьем кадре, где нога вытянута назад и отталкивается от земли, и шестом кадре, на котором нога поднимает кролика вверх.

Кадры с прыжком отмечены ниже фиолетовыми линиями. Для других линий уменьшаем непрозрачность (Opacity) до 20%, это будет тень. В играх-платформерах такая тень не всегда нужна, но в нашем случае она сделает анимацию интереснее.

Шаг 8

Чтобы закончить ноги, делаем стопу более пухлой, соединяем ногу с телом и немного затеняем ее.

Оставшиеся две фиолетовые линии закрашиваем черным и также уменьшаем непрозрачность до 20%.

Шаг 9

Закончив с ногами, копируем их и перемещаем копии на несколько пикселей вправо.

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

Шаг 10

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

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

Слои с копиями должны находиться под слоем с туловищем кролика.

Шаг 11

Чтобы закончить ноги на заднем плане, закрашиваем их более темным оттенком базового цвета, как мы делали на статичном рисунке выше.

Так выглядит готовая анимация ног. Пока не думайте о самом процессе анимации. Сперва мы закончим подготовку кадров, а потом займемся сведением их в зацикленный бег.

В исходном уроке анимация

Шаг 12

Теперь пора добавить руки.

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

Шаг 13

Размещаем руки на новом слое над телом и заполняем их основнім цветом кролика, как мы делали с ногами.

Шаг 14

Добавляем объем.

Шаг 15

И, наконец, затеняем, чтобы добавить больше объема.

Шаг 16

Шаг 17

Затеняем копии рук и меняем их местами, чтобы обе руки были направлены в противоположные стороны.

Запомните, что руки двигаются в противоположном направлении относительно ног. Например, когда левая нога идет вперед, левая рука отходит назад.

Вот так выглядит анимация рук.

В исходном уроке анимация

Шаг 18

Теперь добавим движения голове, так как сейчас она выглядит слишком статично.

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

Шаг 19

На следующем после прыжка кадре уши менее изогнуты и направлены вперед.

Шаг 20

Также анимируем щеки. Их движение похоже на движение ушей: во время прыжка они опускаются чуть ниже, затем после прыжка подымаются.

Вот так выглядит готовый вариант.

В исходном уроке анимация

Шаг 21

Нам осталось доработать туловище. Сперва анимируем белый живот. Во время бега грудь слегка поворачивается, а белое пятно должно реагировать на это движение.

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

Шаг 22

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

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

Шаг 23

Заполняем хвост цветом, наносим тени и обводку.

Шаг 24

На первом кадре, когда передняя рука отводится назад, кончик хвоста перекрывается.

Шаг 25

Чтобы закончить хвост, перемещаем слой на задний план и при необходимости корректируем тени/детали.

Мы закончили работу с кадрами. Вот так выглядит готовая анимация. Дополнительные детали делают анимацию гораздо интереснее, не правда ли?

В исходном уроке анимация

4. Создаем анимацию

У нас есть 6 кадров с зацикленной анимацией бега. Теперь нам осталось склеить их вместе.

Шаг 1

Копируем все кадры на новый файл.

Вам нужно копировать по одному кадру в правильной последовательности (слева направо). Чтобы скопировать все слои одновременно, вам нужно перейти в меню Edit - Copy Merged (Редактирование - Скопировать совмещенные данные). Перед копированием убедитесь, что фон прозрачный и не залит цветом.

Размер нового файла должен быть чуть больше кролика.

Вставив кадры, размещаем их в правильном положении. Нижняя линия остается без изменений на всех кадрах, как и нос, кроме двух кадров, где кролик подпрыгивает на 1 пиксель.

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

Шаг 2

Чтобы начать создавать анимацию в Фотошоп, нам нужно открыть временную шкалу Window - Timeline (Окно - Шкала времени). На шкале находится кнопка Create Frame Animation (Создать покадровую анимацию). Вместо нее может быть кнопка Create Video Timeline (Создать временную шкалу для видео), чтобы переключиться на анимацию, нажмите кнопку в виде стрелки и в появившемся выпадающем меню выберите нужный режим.

Шаг 3

Нажимаем кнопку Create Frame Animation (Создать покадровую анимацию), затем кликаем по кнопке вызова параметров в правом верхнем углу шкалы…

…и выбираем Make Frames From Layers (Сделать кадры из слоев).

Шаг 4

И, наконец, выделяем все кадры и при необходимости меняем задержку (я выбрал 0.1 секунды), устанавливаем режим повторения на Forever (Всегда).

И получаем вот такого забавного кролика с анимацией бега!

Теперь вы можете использовать этот спрайт в игре или экспортировать его в GIF.

Поздравляю, теперь кролик умеет бегать! Он готов к спасению принцессы-крольчихи и другим героическим свершениям.

Этот урок должен дать вам понимание принципов создания дизайна и анимации спрайтов. Теперь вы можете нарисовать своего собственного персонажа или использовать для игры готового кролика!

В этом уроке мы хотим рассказать об основных этапах создания анимированных персонажей с помощью программы Flash на примере разработки персонажа игры «Учимся играя» и аватара для Web-сайта.

Персонаж компьютерной игры

Согласно сценарию игры «Учимся играя», все действия в ней выполняет главный персонаж — Колобок (рис. 1), который перемещается по полю (рис. 2) в поисках алмаза.

Смысл данной игры заключается в том, что играющий должен выбирать путь к цели (алмазу), называя по имени предметы, расположенные справа, слева, сверху и снизу от клеточки, где стоит Колобок, осуществляя, таким образом, перемещения персонажа вверх-вниз, вправо-влево. Например, для того, чтобы Колобок переместился на одну клеточку вниз, в меню на рис. 2 нужно выбрать слово «orange». Правильно выбирая названия в меню, играющий может подвести персонажа к заветному алмазу.

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

1 Программа содержит 12 тем для изучения («Форма. Цвет. Число», «Времена года», «Часы», «Птицы», «Животные», «Устный счет», «Геометрические фигуры», «Римские цифры», «Дроби», «Палитра художника», «Английский язык», «Нотная грамота»).

В создании игры принимали участие Александр Прохоров, Михаил Морозов, Дмитрий Быстров, Елена Андрианова, Андрей Вязников. Более подробную информацию об игре можно получить по адресу: http://computergames.com.ru/54/7217.html .

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

В качестве примера показана анимация перемещений Колобка сверху вниз: анимация 1 .

На первом этапе создаются эскизы внешнего вида героя (рис. 4) , а также эскизы его перемещений и основных действий (рис. 5).

Параллельно делаются эскизы, в которых показывается, как персонаж будет выглядеть в разных темах игры. В частности, на рис. 6. показан эскиз к теме «Астрономия», а на рис. 7 — эскиз к теме «Дроби».

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

На рис. 8 видно, что персонаж состоит из отдельных элементов.

2 Данная работа выполнялась Еленой Адриановой.

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

Рассмотрим подробнее, из чего сделан наш герой. Папка «Части», показанная на рис. 9, содержит 12 элементов (в основном это мувиклипы), из которых состоит Колобок. Например, левая нога — Symbol 4d (рис. 9), правая рука — Symbol 7d (рис. 10) и т.п.

При этом отдельные элементы, такие как Symbol 12d (рис. 11), уже заключают в себе анимацию — движения бровей и глаз — и тоже состоят из отдельных элементов.

В частности, мувиклип Symbol 12d состоит из отдельных составляющих: брови (Symbol 34) (рис. 12), левый глаз (рис. 13). В свою очередь, мувиклип, изображающий левый глаз, базируется на мувиклипе «глаз» (рис. 14).

Таким образом, герой как бы собирается из отдельных деталей конструктора.

Для того чтобы показать, как перемещаются отдельные элементы, из которых состоит Колобок, во время ходьбы, обратимся к рисунку, где показан цикл ходьбы в режиме Оnion Skinning (калька). Из рис. 15 видно, что во время ходьбы у него перемещаются не только руки и ноги, но практически все элементы, из которых он состоит. При этом все элементы анимированы в режиме автоматической анимации движения (Motion Tweening) и только руки (вернее линии, которые соединяют кисти рук с телом) анимированы в режиме автоматической анимации формоизменения Shape Tweening (на рис. 8 эта анимация задана в слоях Layer 5 и Layer 7).

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

Аналогично анимируются движения Колобка при движении вправо и вверх.

Для того чтобы разнообразить движения персонажа, добавляются различные периодически повторяющиеся жесты. Например, Колобок прикладывает во время ходьбы руку ко лбу или, глядя на зрителя, грозит пальцем (рис. 17).

Основные варианты движения Колобка можно наблюдать в данном ролике .

Некоторые жесты персонажа появляются в ответ на действия игрока. Например, когда играющий долго думает, колобок начинает зевать. Если ответ неверен, персонаж недовольно морщится и т.д.

Для того чтобы лучше разобраться в том, как анимирован данный персонаж, можно обратиться к исходному fla-файлу .

Аватар для сайта

Часто оживить Web-сайт помогает персонаж, который взаимодействует с посетителем. Самый простой пример — это тестирование на сайте, при котором, помимо устных комментариев (или вместо них), результат ответа оценивается путем отображения настроения аватара.

Рассмотрм пример создания подобного персонажа.

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

Далее изображения доводились до чистового вида в программе Photoshop. При этом создавался шаблон с постоянными контурами лица, в который вписывались необходимые для передачи данного настроения черты. Цвет лица при этом также менялся (рис. 19).

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

В первом кадре помещаем изображение лица «грустный» по команде File => Import=> Import to stage , а затем переводим его в векторный вид по команде Modify=> Bitmap=> Trace Bitmap .

Затем применительно к первому кадру записываем строчку кода stop(); — рис. 20.

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

Так, верхняя кнопка будет содержать код, показанный на рис. 21.

Второй и последующие кадры создаются при помощи команды Insert Keyframe. Данная команда создает на каждом вводимом кадре все элементы с предыдущего кадра, так что нам остается только заменить картинку с очередным выражением лица.

Для более подробного знакомства с данным роликом можно обратиться к исходному

Это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).

Ваша первая анимация персонажа

Сначала нужно создать векторный персонаж в Sketch . Вы можете использовать мой готовый пример (вместе с примером principle) – скачайте исходники .

Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию.

Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle.

Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде.

Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей:)

Вот и все, теперь давайте запишем анимацию.

Запись анимации

В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”!

Что дальше?

Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях – очень интересно посмотреть на результат.