Как сделать анимацию ходьбы пиксель арт
Обновлено: 06.07.2024
На этой странице МНОГО анимированных гифов. Они могут чуть подтармаживать. Чтобы посмотреть их на нормальной скорости, кликните на каком-либо гифе правой кнопкой и выберите пункт просмотра картинки в отдельном окне.
Ну вот вы и умеете рисовать спрайты. И у вас даже есть прикольно сделанный персонаж, которым все восхищаются. Но всё равно чего-то не хватает. А. ваш спрайт по-прежнему похож на неподвижную картонку. Давайте же вдохнём в него жизнь, сделав, соответственно, анимацию дыхания. Но сначала, по сложившейся традиции, взглянем на примеры от компании Capcom, чтобы знать, к чему мы стремимся:
Оцените количество движений, которые присутствуют в этих анимациях. Слева мы видим Балрога, энергично подпрыгивающего и готового смести своего оппонента в манере "Давай, попробуй, козёл!" В этой анимации много действия и живости. Справа в нижнем ряду стоит некто Гай. он практически неподвижен, расслаблен и спокоен, его стойка показывает: "Только подойди поближе, и ты об этом пожалеешь. " Выбирая анимацию для персонажа, следует исходить из его характера и предпочтительного стиля боя. Конечно, стоит применять такой подход и в других играх, а не только в файтингах. Я использую игры с драками и их терминологию, так как они - хороший пример спрайтовой анимации. Вы же можете применять знания, полученные здесь, где угодно . Итак, в общем и целом, вы поняли идею дыхательного движения. Есть, однако, кое-какая специфика.
Тут очень важен размер спрайта. Работая с персонажами таких больших размеров, как представленные выше, вы можете поэкспериментировать с различными вариантами вдоха-выдоха. Но если вы присмотритесь, то заметите, что головы у них практически не меняют своих положений. Голова Коди (парень в тюремной робе) приподнимается на один пиксел, идёт в сторону на два, затем опускается на один, возвращается вправо, и всё повторяется по-новой. У Гена (мастер кунг-фу в фиолетовом прикиде) голова всего лишь ходит туда-обратно. У Гая она вообще не двигается. Ведь если вы хотите изобразить персонажа спокойного, то, скорее всего, его голова не будет так сильно дёргаться, как, например, у Балрога. Это что касается больших спрайтов. Если же вы примените подход "сдвинуть корпус на один пиксел в каждом кадре - вот тебе и дыхание" к маленьким спрайтам, то получится следующее:
По идее, этот персонаж движется совсем по чуть-чуть, по пикселу за раз. Голова идёт вверх, потом вбок, а затем возвращается обратно. Точно так, как было в движении у Коди. Ну так ПОЧЕМУ ЖЕ выглядит всё так, будто этот персонаж хочет выполнить удар головой и одновременно кого-то сзади пихнуть локтём? Перемещение на 1 пиксел в спрайте шириной в 100 пикселов приводит к получению малозаметного движения, так как смещение составляет лишь 1% от общей ширины. В спрайте шириной 20 пикселов такое же перемещение будет соответствовать смещению в 4%, т.е. движение получилось в 4 раза энергичнее, чем у большого спрайта. Разница в размерах создаёт некоторые проблемы, над которыми приходится поломать голову. При рисовании анимации дыхания существует некоторый предел в габаритах спрайта (он зависит от формы и размера персонажа). Если его не переступать, то всё будет хорошо. Поэтому большими спрайтами можно "дышать" по-разному, а вот с маленькими следует быть осторожными.
"Да, но как насчёт таких старых игр, как Final Fight, Ninja Turtles и им подобных? Я помню, в них персонажи замечательно вдыхали и выдыхали." Извини, приятель, память подвела тебя. Я точно также заблуждался до тех пор, пока не взглянул на эти игры. Персонажи там вообще не шевелятся. Черепашки двигаются, но они не "дышат" (нет заметного вдоха и выдоха). Там использовалась так называемая анимация "бездействия". Она запускалась, когда персонажи скучали без дела. Помните - если подождать достаточно, ёж Sonic притопнет ногой, герой Bubsy постучит по экрану, Рафаэль периодически подкидывает кинжалы сай и т.д. Такого рода фишки легко было делать даже в маленьких спрайтах, так как это были выразительные, ощутимые движения (а не еле заметные вдохи-выдохи грудью). Ладно, вернёмся к обсуждению анимации дыхания, только запомните, что в ваших маленьких спрайтах подобный труд может никто и не заметить. Вряд ли мы ожидаем увидеть у RPG спрайта 16х16 глубокое грудное дыхание, а вот если его не будет у какого-нибудь большого спрайта, то тут можно смело хаять художника. Делать дыхание или не делать - это зависит от размеров и общей формы персонажа. Так, идём дальше.
В предыдущей главе я говорил, что хорошим подходом при создании анимаций будет последовательный перевод нарисованных от руки кадров в пикселы, так как при этом вам не придётся много "раздумывать" при работе пикселами. Вы говорите себе: "Чтобы показать удар ногой, как у Фей Лонга, я нарисую раскадровку этого движения, а потом это дело отсканирую". Но представьте себе, что вам нужно наваять ТОННЫ графики для этой игры и что рядом сидит программист, который каждую минуту-другую выдаёт что-то типа: "Слушай, давай ты сделаешь этому чуваку удар в воздухе с разворота?", а ведь он не понимает, как много кадров приходится на такое движение, и это вообще никого не заботит, кроме вас, потому что именно вам приходится рисовать с утра до вечера, и все думают, что у вас лёгкая работёнка. Вы-то знаете, что это тяжёлый труд. Так зачем усложнять его ещё больше, рисуя и сканируя каждый кадр? Взгляните-ка на Фей Лонга еще раз:
Он хорошо анимирован, даже заметно, как он легонько пружинит на носках. но присмотритесь внимательно, особенно уделите внимание грудной клетке. Она не меняет своей формы и очертаний. Только верхняя часть груди смещается вверх на один пиксел, когда Лонг достигает верхней точки в своём движении. Тени и очертания мускулов остаются прежними в течение всей анимации. Его голова. тоже не меняется, за исключением пары пикселов в причёске. Разве художник в данном случае сканировал бумажные наброски каждый раз, чтобы получить очередной кадр? Нет, конечно. Он сделал работу с помощью магического набора инструментов, известных как "копирование и вставка". Они будут вашими лучшими друзьями при создании анимаций. Итак, не имея перед собой нарисованных от руки набросков с анимацией дыхания Фей Лонгa, я не сильно ошибусь, если скажу, что первый кадр на бумаге был прорисован полностью от начала и до конца, со всеми деталями. но все последующие наверняка использовали упрощённую форму корпуса и головы. Может быть, на некоторых стояли надписи вроде "сдвинуть грудь вниз на пиксел" или "сделать подрагивание волос во 2-м и 3-м кадрах". но не было резона на бумаге РИСОВАТЬ это самое подрагивание, так как при сканировании набросков всё равно получилась бы нечёткая размазня.
Он высок (росту аж 110 пикселей) и готов устроить потасовку. Я сделаю ему дыхание, работая одними пикселами. Если бы я хотел сделать такую же разнообразную анимацию, как у Бланки, пришлось бы прикинуть сначала всё на набросках. Ну а в целях обучения я воспользуюсь методом "вырезал-вставил". План таков - его корпус покачивается туда-сюда, кулаки движутся в разных направлениях (один идёт вверх, другой вниз), и его бёдра чуть пружинят. Возможно, стоило бы для полноты анимации перемещать и щиколотки, посмотрим. Ну что ж, теперь этот образ из головы надо перенести в пикселы. Первым делом нарисуем самое заметное движение. Я сдвину верхнюю часть корпуса на два пиксела вверх. Моя задумка такова: он дышит тяжело и быстро, поэтому вдохи и выдохи будут глубокими, и как только вдох достигнет пика, движение грудной клетки замедлится, потом он сделает быстрый выдох и опустит грудь, опять замедлившись в конце. Во время быстрой фазы дыхания мы смещаем пикселы на большую дистанцию, при замедлении - на маленькую. Итак, делаем движение грудной клетки:
Окей, у нас есть дыхание (4 кадра). Анимация слева получена путём смещения груди вверх-вниз и последующего исправления отбившихся пикселов. Photoshop в этом плане укомплектован весьма удобным инcтрументом прямоугольной селекции (можно расширять выбранную область, используя клавишу Shift). Как бы там ни было, анимация слева не так уж плоха. Он действительно дышит. Но весь процесс какой-то монотонный. Все кадры имеют одинаковую временную задержку (при смене кадров), и он скользит вверх, вниз, вверх, вниз. Мне не понравилось такое роботоподобное движение, и поэтому, повозившись с задержками, время показа кадра, где достигается пик вдоха и выдоха, я удвоил относительно задержки остальных "переходных" кадров. В общем, стало больше похоже на процесс глубокого дыхания и в целом добавилось реализма. Я могу получить пару эффектов, работая только со скоростью показа анимации. Персонаж будет задыхаться, если показывать его вдохи быстро, а выдохи медленно. Сделав наоборот, можно создать впечатление, что он пытается успокоиться и проконтролировать своё дыхание. Если немного повозиться, всегда можно получить желаемое поведение. Ах да, когда я чуть подправлял пикселы, я изменил оттенки у нескольких "грудных", чтобы грудная клетка не выглядела совершенно неподвижной. Смена оттенков подсказывает наблюдателю, что грудь расширяется или сжимается. Итак, персонаж дышит, но не выглядит достаточно анимированным. Не хватает движения ног. Копируя и вставляя, меняя кое-какие пикселы, получим следующее:
Теперь он более живой. Мужик покачивается точно так же, как это делал Балрог из примеров, приведённых выше (Балрог послужил основой для нашего спрайта, потому что мне нравится его поза и анимация). Это результат несложных поправок. В первой "дыхательной" анимации у меня было 4 разных кадра с перемещающейся грудью. На этот раз я хотел, чтобы, начиная с бёдер, двигалось всё тело и чтобы было видно сгибание ног. Это привело к тому, что однопиксельное движение на пике дыхания (помните, в начале анимации тело двигалось по 2 пиксела, а в "пике" на 1 пиксел, мы это сделали для пущего реализма) превратилось в двухпиксельное, из-за того, что вначале я сдвинул вверх отдельно корпус, а затем сместил его опять, но уже вкупе с бёдрами. В общем, это было даже слишком, я не этого хотел, и пришлось убить два кадра из первой анимации (верхнюю и нижнюю точку в его покачивании) и заново собрать кадры уже со смещением и торса и бёдер, также я отобразил ноги в новом положении. Теперь добавим деталей:
Я добавил анимацию в нижнюю часть его ног. пятки стали немного двигаться и часть одежды тоже. Здесь не нужно МНОГО движения. Анимации одного-двух пикселов вполне достаточно для более "живого" восприятия происходящего игроком. Я чуть изменил форму свисающего куска ткани, чтобы отразить движение того бедра, на котором этот кусок лежит. Затем, дабы получить более спокойное движение, я сгладил изменение оттенков на его животе. Наконец, я убыстрил всю анимацию в целом. В будущем я могу сделать её ещё быстрее, чтобы персонаж смотрелся встревоженным. Скорость анимации можно менять когда угодно, лишь бы кадры её были закончены. Пришло время анимировать руки, и это будет самое сложное, так как потребуется много чего перерисовать:
И это БЫЛО сложно, хех. Не сильно заморачиваясь с выбором, я решил обойтись круговыми движениями. Так как руки совершают полный круг, я не мог просто пройтись через 4 кадра в следующем порядке 1-2-3-4-3-2-1-2-3-4. как раньше, потому что получились бы странные полукруговые движения. Пришлось сделать 6 кадров, и в каждом передвигать руки в новое положение. Это было неприятно, зато теперь у него движется всё тело. Ну, стало похоже на танец буги (под фоновую музыку), но вы-то поняли идею. Если бы я продумал движение кулаков заранее, получилось бы что-то менее танцевальное, ну а в целях данного руководства сойдёт и так, хех. Может, надо было просто сместить руки туда-сюда на пару пикселов, как делает Cагат Май Тай, ну да ладно, оставим круги. Опять же, при выборе движений вы должны исходить из характера персонажа и его настроя/физиологии/стиля драки/и т.д. И не забывайте облегчать себе жизнь, не делая лишнюю работу - если вы анимируете маленькие движения, то делайте это на стадии пиксельной обработки.
Я получил отзывы, что анимация выглядит странновато. доводы были разные: глупо иметь такую открытую стойку, ненатуральные движения руки (двигаются только предплечья, плечи же неподвижны) и т.д. Я было соблазнился ответить: "Ну, это такая боевая стойка. Она предназначена для примера в руководстве, так что это не так важно. И если бы он был в игре-файтинге, все всё равно бы думали: "Ага, это боевая стойка", поэтому я не буду её менять". Но потом я вспомнил, как другие люди говорят нечто подобное и как это раздражает. Часто бывало, кто-то просил дать отзыв о спрайте и я указывал на моменты, которые могут быть изменены, а они в ответ рассыпались в извинениях и бессвязно лепетали, что ТАК И БЫЛО ЗАДУМАНО. Я просто печально качал головой и шёл дальше. Вы ничему не научитесь, если будете игнорировать мнения других людей. Даже когда вы потратили кучу усилий и неделю времени на спрайт и думать не можете о том, чтобы вернуться и переделать что-то в нём. если кто-то вам говорит, что рука выглядит странно, исправьте её. Даже если процесс переделки будет сходен по ощущениям с ударом по яйцам и вы собираетесь ответить: "Нет, она и так хороша", - вернитесь обратно и продумайте всё еще раз. Почему? В конечном счёте это сводится к восприятию спрайта. Если требуется немного сверхплановой работы, чтобы всё выглядело правильно, то вам стоит её выполнить. Поймите, когда человек рисует персонажа с дикими пропорциями, всем сразу ясно, что создатель никогда не интересовался анатомией. На просьбу откоментировать его шедевр вы говорите, что персонаж выглядит шатким и кривым, а он просто отвечает: "Ну, это у меня СТИЛЬ такой. Я так и задумывал". Иногда так и бывает, но чаще всего эти люди просто отмазываются и хорошо знают, что выглядит всё неправильно, но не хотят ничего переделывать, ибо тяжело это. Итак, в качестве назидательного примера я решил переделать анимацию, чтобы сделать её приятней и правильней:
Я отказался от круговых пассов руками и остановился на идее простенькой задержки при их движении, чтобы они слега отставали от движения тела на один пиксел по высоте. Маленькое такое улучшение, оно может сделать анимацию более естественной. Один-два пиксела, на которые смещаются руки, "отклеивают" их (руки) от груди и выдвигают вперёд. Другой подход - взять да сделать один кулак отстающим в движении от второго. Мы как бы разбиваем мужичка на куски и перемещаем их. Когда вверх-вниз смещалась верхняя часть торса (в начальной анимации), то всё тело казалось монолитным. Заставляя руки чуть отставать, всего на пиксел, мы отделяем их от корпуса. Чтобы фрагментировать тело ещё больше, можно добавить "отставание" одному кулаку и получить 3 движущихся куска. Хотя тогда возникнет вопрос, хотите ли вы, чтобы персонаж ТАК сильно двигался, и вам придётся выбрать, ваш герой шевелит руками одновременно или порознь. В анимациях от Capcom руки Бланки двигаются вместе, потому что сам он делает большое монстроподобное движение. А вот Ген совершает маленькое круговое движение каждой рукой. Как я уже объяснял, всё зависит от типа создаваемого персонажа.
Как говорится, "лучше меньше, да лучше". У нашего драчуна руки раньше двигались по большому кругу, и это выглядело не совсем правильно. сейчас он слегка шевелит ими и это некоторым образом смотрится лучше. Ведь чтобы сделать персонажа анимированным, не всегда требуется куча движений, особенно в ситуации, когда он просто "дышит", убивая время перед атакой. Поэтому, если что-то выглядит не так, попробуйте уменьшить количество анимированных элементов, и вы получите что-то более естественное. Не усложняйте себе жизнь.
В современной игре визуализация так же важна, как и геймплей. С помощью «ожившей картинки» мы теперь не только привлекаем внимание и создаем атмосферу — визуализация рассказывает историю, впечатляет игрока, увлекает игрой и создает желание возвращаться к ней снова и снова.
Едва ли не самая важная часть всех этих процессов — анимация. Она «оживляет» картинку и с ней оживляет игру.
Наша студия накопила немалый опыт создания пиксель-арт анимации, и мы хотим им поделиться. В качестве примеров в этой статье мы будем использовать примеры из игры, которую делаем.
В двух словах о ней для контекста: наша игра будет социальной RPG, действие которой наполовину происходит в небольшом американском городке 60-х годов с множеством активностей, а вторая половина состоит из тактических боев с монстрами в «альтернативном мире».
Без выверенных образов персонажей игра не будет восприниматься целостной. Когда у команды есть сформированное видение того, что хочется донести до целевой аудитории, то можно смело приступать к созданию образа.
Главная героиня в нашей игре – девочка, которая вместе со своими друзьями переживает летние приключения в небольшом американском городке в разгар 60-х. Первоначальный образ должен соответствовать временному периоду, а это значит, что никаких накладных ушек или разноцветных глаз в нём быть не может.
Создание нескольких набросков и поиск лучшей цветовой вариации образа – не самое быстрое решение, но достаточно надёжное. Не стоит им пренебрегать, если вы настроены серьезно. Когда конечный образ утверждён, лучший способ вдохнуть в него жизнь - создание анимации.
Анимации можно разделить на несколько категорий:
- Стандартные или, иными словами, самые необходимые анимации, без которых игра значительно потеряет в качестве. К ним можно отнести анимацию передвижения, бездействия, а также боевые анимации. Разумеется, существуют игры, в которых они отсутствуют, но, согласитесь, игра с такими анимациями оставит намного больше впечатлений.
- Атмосферные - те анимации, которые зарабатывают Вам очки в визуальной составляющей. Опять же игра вполне может обойтись и без них, но взгляните на следующие два примера:
В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
Во втором примере есть очевидное преимущество - повествование с помощью визуализации.В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
Во втором примере есть очевидное преимущество - повествование с помощью визуализации.
Продвигаясь по сюжету, игроку предстоит взаимодействовать с другими персонажами. Когда речь идёт о живой картинке, недостаточно написать под репликой персонажа о том, что он шокирован. Лучше передать эту эмоцию визуально. Пусть игрок увидит её по выражению лица на портрете или по действию героя. Игра это не книга, и выбор инструментов в ней гораздо шире.
Перечислять подобные анимации можно очень долго. Даже настройка образа героя через выбор его одежды, прически и цвета давно уже не в новинку. Вопрос только в том, сколько времени и сил вы готовы вложить в это.
Для того, чтобы бег выглядел максимально естественно, художник должен понимать, что движутся не только ноги персонажа, но и всё тело. Передать это можно с помощью небольшого разворота туловища и движения рук.
Важно учитывать, что каждая деталь персонажа имеет собственный вес. Например, волосы при беге будут двигаться более активно, чем рюкзак героини. Последний, в свою очередь, “отстает на кадр” от амплитуды движения хозяйки. Когда она начинает двигаться вверх, рюкзак всё ещё остается в своем прежнем положении и только в следующем кадре поднимается на необходимый уровень.
В то же время нужно чувствовать меру и не анимировать детали персонажа слишком активно. Когда небольшие детали слишком часто меняют свое положение в каждом кадре без необходимости, есть риск, что анимация будет ощущаться слишком перегруженной и неаккуратной.
В качестве первого примера активной анимации рассмотрим атаку. В анимации атаки амплитуда движения активно меняется, она должна быть плавной.
В статике это довольно сложно объяснить, поэтому лучше продемонстрировать этот пример в естественной среде.
В начале атаки героиня двигается плавно. Затем она совершает прыжок и её скорость резко увеличивается, после чего обрывается в момент удара. При этом меч по инерции двигается в направлении удара еще на протяжении нескольких кадров, что подчеркивает его силу.
После удара героиня теряет скорость и её анимация опять становится медленной и более плавной до тех пор, пока она не начнёт двигаться назад на первичную позицию. Стоит отметить, что оказавшись у нужного места, она “проскальзывает” несколько пикселей, уменьшая тем самым скорость и создавая плавность.
Почему же удар в прыжке и отскок? Потому что детальная анимация удара вместе с бегом в одну и другую сторону заняла бы слишком много времени – как внутриигрового, так и производственного. Такое решение приведет к тому, что игрок рано или поздно захочет пропустить длинную анимацию, которую видел уже десятки раз и знает её результат.
Пиксель-арт анимация – трудоемкое для художников и дорогое в производстве удовольствие. Такой визуальный стиль стоит выбирать с осторожностью, если вы делаете вашу первую игру.
Но большие вложения в пиксель-арт анимацию имеют шанс окупиться большой “отдачей” – как в смысле востребованности игры, так и в смысле впечатлений, удовольствия игрока. Но всем, кто, как и мы, обращается к пиксель-арту, мы желаем успехов и удачи на этом пути!
Анимация ходьбы сложна не только тем, что задействованы практически все конечности персонажа, но и тем, что необходимо передать еще и походку, а походка у разных персонажей может быть абсолютно разной. При анимации должны учитываться все характеристики персонажа, которые напрямую влияют на походку - это пол, возраст, вес, особенности телосложения, характер, рост и другие. Так же нужно учитывать темп походки, в зависимости от ситуации - торопится ли персонаж куда-то, прогуливается не спеша или плетётся еле-еле.
В данном уроке мы разберём типовую походку, которую можно применить к большинству персонажей среднего телосложения, среднего возраста, среднего роста, короче говоря, будем делать анимацию стандартной походки человека в обычном среднем темпе.
1. Что нужно знать об анимации походки
Чтобы сделать качественную анимацию, не важно какую, будь то походка, падение предмета, движение автомобиля, нужно чётко представлять сам процесс движения, который вы хотите изобразить. Анимация - это движение, а любое движение подвержено законам физики.
Для работы я буду использовать вот такую вот зарисовку-шпаргалку Диснеевского аниматора, на которой изображена стандартная походка человека, она разбита на пять фаз. Все фазы представляют из себя основные действия из которых и формируется походка.
Посмотрите внимательнее данную зарисовку. Ходьба человека представляет собой повторяющиеся движения, например, вы отталкиваетесь левой ногой, наступаете на правую, перемещаете на неё центр тяжести тела и отталкиваетесь этой же правой ногой ногой, наступая уже на левую. При ходьбе ваше тело и руки выступают в качестве балансира, шагая правой ногой вы перемещаете противоположную - левую руку вперёд, а правую назад и наоборот. При этом, тело в движении наклоняется немного вперёд и чем быстрее шаг, тем больше угол наклона тела, для удержания равновесия.
Сам процесс ходьбы можно отнести к падению, вы отталкиваетесь одной ногой и под силой тяжести падаете на вторую, удерживая равновесие всего тела при помощи рук и туловища. При каждом шаге (падении) вы немного приседаете и в данной точке на долю секунды останавливаетесь, при отталкивании наоборот привстаёте и снова приостанавливаетесь на долю секунды.
На шпаргалке видно, что первая фаза идентична последней - пятой, в ней меняются только руки и ноги на противоположные. Во второй фазе человек наступает и перемещает центр тяжести на правую ногу, в третьей фазе он полностью переместил центр тяжести на правую ногу и готовится к толчку и в четвёртой фазе он отталкивается правой ногой.
2. Подготовка персонажа к анимации
При подготовке персонажа нужно учесть несколько основных моментов:
1) Персонажа нужно рисовать в фотошопе именно векторными инструментами, такими как "Перо" и "фигуры". В процессе анимации мы будем постоянно изменять положение конечностей персонажа, чтобы задать ему определённую позу, делать мы это будем с помощью "Свободной трансформации". При трансформировании векторные слои не искажаются. Если сделать персонаж растровыми слоями или смарт-объектами, то при создании анимации, трансформируя слои мы будем наблюдать их размытие. Кроме того, готовую анимацию вы сможете увеличивать и уменьшать до нужных размеров не теряя в качестве, векторный формат позволяет это делать без проблем.
2) Сам персонаж должен быть разделён на слои, т.е. каждая часть его тела и каждый элемент одежды рисуются на отдельном слое, после чего эти слои группируются по частям тела. Если посмотреть подготовленный мной персонаж, то можно увидеть, что я определил такие группы как рука1 - это правая рука, рука2 - соответственно - левая, Нога1 - правая нога, нога2 - левая, туловище и голова. В свою очередь, каждая группа состоит из соответствующих слоёв, например туловище из элементов одежды, тазовой области и галстука, рука1 из плеча, предплечья и кисти и т.д.. Группы слоёв располагаем соответственно в нужном порядке, например у меня группа слоёв с левой рукой
расположена под группой слоёв с элементами туловища, потому что данная рука должна быть за туловищем.
Такое группирование слоев будет удобно при анимации, потому что мы сможем манипулировать каждой частью тела, как в группе, так и по отдельности, когда мы приступим к анимации вы поймёте о чем речь, если на данный момент еще не поняли.
3) Все конечности персонажа должны иметь закругления в местах состыковки. Это нужно для того, чтобы при изменении положения части тела не было видно краёв состыковок. Допустим, при сгибании ноги в колене, если формы у состыковки конечностей будут закруглённые, то будет всё в норме.
Если не сделать закругления на конечностях, то будет постоянно возникать проблема с углами. Можно для примера состыковать два прямоугольника, допустим, один будет бедром, второй голенью. Выглядеть это будет примерно так.
3. Анимация ходьбы персонажа
Теперь, когда у нас есть подготовленный персонаж и шпаргалка - приступаем к анимации. Думаю, вы уже поняли, что мы будем делать покадровую анимацию, где каждая фаза из шпаргалки у нас будет отдельным кадром. Нам нужно для каждой фазы создать кадр с соответствующей позой персонажа.
1) Делаем первый кадр. Переименовываем группу слоёв с персонажем, назовём её "один" - это у нас будет первый кадр. Соответственно, мы будем настраивать позу персонажа аналогично фазе №1 на шпаргалке.
Выделяем группу слоёв с ногой, кликнув по ней левой кнопкой мыши, переходим в верхнем меню "Редактирование" - "Свободное трансформирование" и настраиваем положение ноги, аналогично её положения в первой фазе. Устанавливаем нужный градус и настраиваем положение стрелочками на клавиатуре положение, так будет точнее и удобнее, чем мышкой.
Теперь настраиваем по отдельности положение голени и ступни, после чего проделываем тоже самое со второй ногой.
Далее настроим положение туловища персонажа, оно должно быть немного наклонено вперёд. Выделяем группу "Туловище", вместе с группами обеих рук, удерживая "Ctrl" и кликая по каждой группе левой кнопкой мыши. Берём свободное трансформирование и настраиваем наклон туловища.
Поправим голову, чтобы она была в нужном месте на теле. Ну и переходим на руки, настраиваем все их части согласно шпаргалке: плечо, предплечье и кисть.
После того, как мы настроили первый кадр нужно обозначить верхнюю и нижнюю точки персонажа, как на шпаргалке, чтобы можно было настраивать высоту подъёма и опускания тела во время движения. Сделаем мы это с помощью направляющих. Если они у вас, отключены перейдите в верхнем меню "Просмотр" - "Показать" - "Направляющие", там должна стоять галочка. Так же нужно включить линейки, для этого переходим в "Просмотр - "Линейки".
Теперь наводим курсор на верхнюю линейку и удерживая левую кнопку мыши тащим направляющую к верхней точки головы персонажа и таким же образом создаём вторую направляющую, которую устанавливаем в нижней точке - это будет условный пол. Ступни персонажа в первом кадре должны стоять на нём, если у вас какая-то выше или ниже нужно настроить точно по направляющей.
2) Делаем все остальные кадры. Теперь у нас есть первый кадр и из данного кадра мы будем делать второй, а точнее из копии данного кадра. Копируем группу слоёв первого кадра, удерживая клавишу "Alt" и левую кнопку мыши тащим группу слоёв в верх или в низ. Переименовываем её в номер "два" - это будет второй кадр.
Отключаем видимость первого кадра, кликнув по иконке глаза и точно так же как мы выставляли конечности персонажа в первом кадре делаем это со вторым.
Выставляем положение всех конечностей согласно шпаргалке и не забываем учесть, что в данном кадре персонаж немного приседает, для регулировки вертикального положения тела персонажа мы и выставляли направляющие, по которым будем ориентироваться.
Ну и делаем таким же образом все остальные кадры. Первый и пятый кадры, как мы видим на шпаргалке, почти одинаковые, только положение рук и ног наоборот, поэтому для пятого кадра можно использовать копию первого, просто поменять руки и ноги местами.
На шпаргалке изображён цикл шага одной ногой, т.е. человек шагает правой ногой и на последнем пятом кадре цикл заканчивается на подготовке к шагу левой ногой. Чтобы сделать анимацию зацикленной, нам нужно продолжить цикл, чтобы персонаж сделал полный шаг и левой ногой. Для этого нам необходимо добавить еще три кадра, которые будут идентичны второму, третьему и четвёртому кадрам, только смениться положение рук и ног на противоположные. А именно, шестой кадр будет как второй, седьмой, как третий и восьмой, как четвёртый. Таким образом, у нас получится полный цикл шага - сначала персонаж будет шагать правой ногой, потом левой.
Мы сделали все восемь кадров, теперь можно сделать из них анимацию. Меняем рабочую среду на "Движение"
и создаём "Анимацию кадра".
Теперь создаём в шкале времени восемь кадров, кликая по соответствующей кнопке и включаем видимость наших слоёв на соответствующих кадрах.
На первом кадре оставляем видимым только группу с первым кадром, на втором - второй и так далее.
Теперь выделяем все кадры в шкале времени, удерживая "Shift" и кликая по каждому из них левой кнопкой мыши и на любом из кадров кликаем по времени и включаем задержку на 0,1 секунду.
Получилась походка персонажа, он идёт на месте. Если вам не нравится, как получился какой-либо из кадров, то можете его подкорректировать, чтобы анимация была более привлекательной. Тут стоит обращать внимание на все мелочи и не нужно экономить время на этом этапе.
3) Теперь зададим персонажу движение, чтобы он не шагал на месте, а именно перемещался. Поочерёдно в шкале времени включаем кадр за кадром и на каждом кадре перемещаем персонажа с помощью инструмента перемещение. При этом смотрим как это выглядит в движении, где-то можно переместить персонажа побольше, где-то поменьше, а именно в момент наступания на первом и шестом кадрах можно перемещение сделать минимальным, потому что персонаж при данном действии практически не перемещается.
Если вы сомневаетесь, что движение персонажа получается верным, то можете поэксперементировать на себе, просто встаньте и сделайте несколько шагов, чтобы понять в какой момент ваше тело перемещается больше, в какой меньше, а в какой и вовсе не перемещается.
Для того, чтобы персонаж выглядел более живым и подвижным можно анимировать галстук, который при ходьбе будет покачиваться из стороны в сторону. Для этого мы включаем кадры по очереди и в каждом из них меняем положение галстука.
При отталкивании галстук будет немного наклоняться в левую сторону, при наступании наоборот. Просто смотрите на положение тела персонажа и подбирайте положение галстука для его каждого движения.
Вот таким образом можно анимировать ходьбу персонажа в фотошопе. Если понимать все основные принципы и иметь под рукой шпаргалку, то данная задача вообще не сложная.Подобные шпаргалки, с различными походками персонажей, можно найти в свободном доступе.
В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.
I. Настройка документа и инструментов
Шаг 1
Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.
Шаг 2
В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.
Шаг 3
Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.
Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.
Шаг 4
В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.
В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.
II. Создание персонажа
Шаг 1
И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.
Сделайте эскиз вашего персонажа с четким контуром, стараясь, при этом, не перегружать его мелкими деталями. На данном этапе цвет не имеет никакого значения, главное, чтобы контур был четко прорисован, и вы понимали, как будет выглядеть персонаж. Вот такой эскиз был подготовлен специально для этого урока.
Шаг 2
Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.
Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.
Шаг 3
Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).
Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.
Шаг 4
Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.
Шаг 5
Сгладьте контур, дорисовывая тень по внутреннему краю.
Шаг 6
Создайте новый слой для бликов.
Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.
Дорисуйте картинку, а затем скопируйте и отзеркальте готовую половинку рисунка, после чего объедините слои с половинками, чтобы получился цельный рисунок.
Шаг 7
Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).
Теперь персонаж готов к анимации.
III. Анимирование персонажа
Шаг 1
Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.
Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).
Шаг 2
Теперь согните руки и ноги персонажа так, как будто он бежит.
● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.
Шаг 3
Теперь вам нужно перерисовать начисто новую позицию рук и ног так, как было показано во втором разделе этого урока. Это нужно для того, чтобы изображение выглядело четким, ведь трансформация сильно искажает пиксельные линии.
Шаг 4
Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.
Шаг 5
Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.
На временной шкале сделайте следующее:
- Установите задержку времени в 0,15 сек
- Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
- Установите цикл повтора Forever
Шаг 6
Чтобы выбрать нужный слой для каждого кадра нажмите иконку Eye возле названия слоя на панели слоев. Порядок должен быть такой:
Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.
Нажмите на пробел, чтобы проиграть анимацию.
Шаг 7
Теперь сохраните результат. Перейдите File > SaveForWebи выберите GIFформат. Установите значение 300% в графе Размер для лучшего результата, и нажмите Save.
Читайте также: