Как анимировать бег персонажа в спрайтовой графике

Гайды

 Пиксельная девушка-кошкаТуториал от Raseri пошло-эротический.

 
 
Анимация героя или его противников — это то, с чем приходится сталкиваться практически сразу же после начала разработки довольно широкого круга игр, и то, что с непривычки отнимает очень много сил и времени.
Если брать конкретно бег, то тема, например, была уже раскрыта здесь, здесь, там и там.
Эти материалы хороши, но когда я впервые их посмотрел, чувства растерянности и беспомощности у меня никуда не пропали. Я вижу анимацию, спасибо, но с… с чего вообще начинать-то?
 
Киллер-фича моей статьи будет в том, что именно начало своей работы с анимацией я постараюсь рассмотреть более подробно.

 

анимирование - это легко!

 

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

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

набросок спрайта

 

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

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

Если вы как Эсдир до сих пор сидите на MS Paint, то вот вам ссылочка на замечательную программульку Paint.Net (6.6Мб), которая бесплатна, и, главное, поддерживает слои, позволяя легко собирать персонажа в нужном виде для нужных кадров.

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

атлас спрайтов с костями

Спрайт я взял достаточно большой, не десять пикселей в высоту, поэтому прорисовывать придётся движение обоих ног. По четыре ключевых положения для каждой ноги, всего восемь кадров.
Кстати, кости тут растут не из паха (как на референсе), а оттуда, откуда они и должны расти, так что взяв основу с чужого рисунка, под свой я её всё равно немного подогнал.

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

предварительная анимация бега

 


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

кадры ног для бега

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

атлас анимации

Внимательный зритель может заметить, что некоторые участки спрайтов на верхней и нижней линии выглядят донельзя похожими. Собственно говоря, наибольшие усилия у меня потребовала рисовка первых четырёх кадров, а дальше я действительно некоторые вещи просто копировал.
Это правильно, поскольку ускоряет процесс и велает вид ног… более стандартизированным, что ли?
Мне кажется, что при таком подходе анимация воспринимается глазом как более аккуратная и гладкая.

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

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

Ещё, как вы помните, я собирался добавить движение волос и сисечек.
Они тоже будут двигаться вверх-вниз, но если волосы будут двигаться сразу же, когда спрайт тела пойдёт вниз (потому что они лёгкие), то сисечки двигаться будут с запозданием в один кадр, поскольку они должны быть более инертны.
Руки я двигаю немного вверх и в стороны, чтобы сымитировать то, как ими двигают при беге.

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

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

Спрайт кошки

М-м, да, я вдруг внезапно обнаружил, что забыл про хвостик.
Сейчас уже вечер и мне очень лениво его приклеивать, так что будем считать, что я произвёл небольшой редизайн персонажа в сторону повышения реалистичности оного :3

Та-дааам, наша киска готова отправиться навстречу приключениям! :D

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

Похожие статьи

  • Анимаколенник №1 — Итоги
    Анонс — Открытие — Пост для вдохновения — Участники/Голосование — Итоги Наверное, вас уже утомило смотреть на одно и то же в начале поста, поэтому вот вам картинка с котиком:...
  • Возможно новый пошлый туториал взбодрит меня~? ♡
    Привет, ребят. Когда-то давненько, моими руками был сделан малоподробный, но интригующий тутор по анимации бега, вот тут. Я-то поржал и забыл, а вот гугл всё помнит, и сегодня, ...
  • Анимаколенник №1 — Участники/Голосование
    Анонс — Открытие — Пост для вдохновения — Участники/Голосование — Итоги    Голосование — до 19-го марта, 7:00 по МСК.Ниже поста, в самом начале, идут комментарии с работами...
  • Анимаколенник №1 — Открытие
    Анонс — Открытие — Пост для вдохновения — Участники/Голосование — Итоги   Сдача работ — до 15-го марта, 7:00 по МСК.
42 комментария
andreymust19

Скажу из собственного опыта.

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

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

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

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

mylittlekafka
andreymust19

Касательно твоей барышни, Raseri.

Твои силуэты анимации бега (палочки) предназначены для вида сбоку. У тебя же персонаж в 3/4.
В итоге корпус барышни на анимации практически не поворачивается. Так люди не бегают.
И еще ты про хвост забыл :)

Но все равно я даже так не смогу нарисовать.

Raseri

Коротко мой ответ и твой ответ на мой ответ

Xitilon

«то как же ты кодишь

«Так люди не бегают» — мой Аргумент Года 2008, из-за которого я бросил делать метроидванию с кучей проработанных боссов, способностей и секретов. Геймдевелоперы, которые пытаются делать спрайты — не слушайте это всё! Вон в Кейв Стори вообще не пойми как бегают — 4 кадра недо-чиби-анимации ни о чём. Главное — игра!

uwantuwanto

А будет серия уроков?

Добавил в избранное.

Raseri

Неожиданный вопрос.

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

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

Xitilon
Малоразмерные спрайты это сила! И намного более употребимы в инди-геймдеве, и делаются легче, всяко желательна статья по меньшему масштабу. Пошлость не обязательна, но если по-другому не интересно, то что уж тут, из песни слов не выкинешь.
alexmakovsky
Я только из-за пошло эротического содержания заинтересовался темой, а оказалось тут ещё и полезно. (а как тут Якубовичей ставить?)
Raseri
двоеточиеyakдвоеточие
Rs11
чтож сегодня за день то такой кругом разврат какойто тварится…
Praron
Самый пошлый урок пиксель-арта, который я видел.
Martiy
Срамота! Плюсую =))
PixelPanda
Разери, спасибо.
Romson
Клёва! Эх, грудям бы еще веса добавить, а то скачущие вверх-вниз сосцы создают впечатление, что это глазки и она ими стреляет.
PixelPanda
Стреляющие сосцы :D
Romson
Ну, если сосцами иногда можно стекло резать — значит, стрелять ими и подавно не грех:)
Xitilon
Стекло резать? Эт где такое?
Romson
Из какого-то сериала. Метафора, я так понимаю.
harvey

Сериал Друзья.

Джо: Закрой окно, Чендлер! Моими сосками уже стекло можно резать!
Фиби: Что правда? А я думала одна я это умею!

Romson

Любопытный вариант перевода реплики Фиби:

Joey: Hey, can you close that window Chandler? My nipples could cut glass over here.
Phoebe: Really? Mine get me out of tickets!

harvey
Вот ещё любопытнее translate.google.ru:
«Фиби: В самом деле? Шахта вытащить меня билетов!»

Это какая-то игра слов?

 

pevzi
Если верить ответу здесь, в оригинале Phoebe имела в виду, что она их использует для того, чтобы избегать штрафов за нарушение ПДД.
Xitilon
А я всё не мог понять, что за «вытаскивание из билетов».
Romson
Последний раз «Друзей» я смотрел в компании жены. Она у меня изучала немецкий, так что смотрели в переводе РТР. А предыдущий раз смотрел этот сериал, как ни странно, вместе с младшим братом. А он тот еще гик, смотрели на языке оригинала, так постоянно приходилось гуглить, что означает та или иная шутка, идиома, игра слов. Тикеты мы в тот раз, признаюсь, прозевали. Решили, что Фиби при вспоможенствовании сосцов ходит на халяву в кино.
Xitilon

Хах. Этот вариант ещё смешней.

женствовании

Durbek
Лучше да и легче всего брать реферансы пиксель артистов мастеров. Покадровую нарезку смотреть и прикидывать.
У меня, кстати, чаще всего анимация бега гораздо больше 8 кадров.
Esdeer
Здесь ничего не было.
pevzi

Здесь не хватает другой стороны пошлости, представленной пиксельной анимацией :3c

Спойлер
показать

Romson
А вот это уже на грани. Был случай в Facebook, знакомого саппорт забанил за публикацию рисунка женских гениталий на сутки. А другого за мужские — на неделю. Он и хвастал после: «Видали, мужская-то пиписька поболе ценится!»
Xitilon

Смешно.

Тут фильтр интерлейсный хорош.

andreymust19
Во втором случае модератор просто счел рисунок оскорблением своего достоинства.
Либо первый рисунок был хорош, а второй — не очень.

Поверьте, если бы модератором была женщина, было бы все наоборот.
Dr_Z10
Вот до чего вы тут докатились.
Xitilon
Не, а что я должен сделать с таким постом? Урок спрайтерства? Урок. Порнография? Нет, просто эротика. Хм…
Dr_Z10
Просто этого комментария здесь не хватало.
Dr_Z10
Обколются этим своим пиксель артом и……… ...!
Raseri

Dr_Z10
Так вот почему тут сказано про пенисы.
Raseri
Картинки отвалились :(
Xitilon

А что там было-то?

<p><img src=«cs7066.vk.me/c540103/v540103430/d34d/Ah1Go8VHAtg.jpg» alt="" /></p>

<p><img src=«cs7066.vk.me/c540103/v540103430/d354/IuEeI6e4LIk.jpg» alt="" /></p>

<p><img src=«cs7066.vk.me/c540103/v540103430/d35b/tfigOQuqzf8.jpg» alt="" /></p>

Это ВК, это не мы!

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