Как сделать пиксельную анимацию

Обновлено: 05.07.2024

Автор проекта Floor796 0x00 поделился закулисной информацией, рассказал о рабочем процессе и планах на будущее проекта.

Вступление
Проект Floor796
Создание сцены
Самая памятная сцена
Тайм-менеджмент
Стать частью проекта
Планы на будущее

Вступление

Я родом из Белоруссии. Отучился заочно по специальности инженер связи. Последние 16 лет работал в индустрии веб-разработки, а точнее в full-stack разработке. В последние годы я был техническим директором Pikabu .

Анимацией я увлекся, когда изучал программирование, разрабатывая свою первую онлайн-игру на Macromedia Flash 8. Это была многопользовательская MMORPG с битвами магов и рыцарей, квестами, сельским хозяйством и многим другим. Я занимался ее разработкой в течение 3 лет, но примерно в 2008 году мне пришлось отложить работу над ней. Тем не менее, у меня сохранилось несколько скриншотов, по которым можно понять, что это была за рисовка и анимация.

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

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

Проект Floor796

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

В результате я подумал, а что если реализовать веб-редактор анимации, похожий на Adobe/Macromedia Flash, который будет специально адаптирован под определенный стиль (перспектива, цветовая палитра и так далее)? В прошлом у меня был опыт разработки подобных редакторов для бизнес-проектов, поэтому начать работу было несложно. Однако я столкнулся с рядом проблем: вектор или растр, какая продолжительность анимации и частота кадров, какую перспективу выбрать, какую палитру использовать, в каком формате сохранять, как уменьшить сетевой трафик при сохранении работ, какие инструменты нужны для рисунка. В конце концов, после долгих проб и ошибок я остановился на том, что есть сейчас:

Я выбрал растр, потому что в нем легче рисовать, добавлять шумы, делать всевозможные мелкие детали;
Анимация длится 5 секунд при 12 кадрах в секунду, то есть всего 60 кадров. Раньше я часто использовал такую низкую частоту в анимациях и играх, поэтому у меня был в этом опыт. Проблема низкого fps в том, что при быстрых движениях виден каждый шаг, однако это можно визуально скрыть, если добавить в сцену больше движения, которое отвлечет зрителя. Преимущество низкого fps очевидно – меньше кадров означает меньше рисования и меньший размер финальной сцены;
Я выбрал перспективу, похожую на изометрию, но с немного другими углами. Для угла наклона вместе с высотой стен, я взял 20% высоты всего холста. Вот примерная схема для лучшего понимания:

Палитра была создана путем равномерного разделения цветовой модели HSB (33 деления оттенка; 11 делений насыщенности; 12 делений яркости, всего в палитре 4356 цветов). Я также решил упростить и сделал всего 5 уровней прозрачности, привязав их к клавишам 1-5. Это важный шаг, который сделал процесс рисования проще, избавив от необходимости переключать уровни прозрачности с помощью пера при рисовании градиентов и всевозможных свечений и газов;
Каждый кадр анимации каждого отдельного слоя сохраняется в формате png, а затем все кадры сцены сохраняются в один файл. На главной странице проекта все сжато в кучу роликов в формате mp4. С этим тоже была большая трудность – нужно было синхронизировать все фрагменты видео друг с другом. Я перепробовал много способов и остановился на лучшем: при сжатии в mp4 я делаю каждый 10-й кадр ключевым (всего 6 ключевых кадров на видео), и именно на этих кадрах все видео, загруженные в браузер, останавливаются на долю секунды, чтобы синхронизироваться друг с другом. Если этого не сделать, то у каждого видео будет своя задержка, и вся анимация начнет прерываться во время воспроизведения. Для справки: главная страница со всей текущей анимацией занимает примерно 22 МБ, в то время как в исходном виде вся анимация занимает 4,7 ГБ;

Мне удалось снизить трафик за счет использования новейшего API для браузеров, который позволяет сохранять и выгружать файлы на локальный диск пользователя. Таким образом, на сервер отправляется только то, что пользователь готов опубликовать, а сохранение больших объемов данных (некоторые сцены составляют 60 МБ) происходит практически мгновенно. К сожалению Firefox пока не поддерживает этот API.
Я потратил много времени на совершенствование инструментов рисования, когда создавал первые сцены. С самого начала были только базовые инструменты: кисть, заливка, стирание, выделение и так далее. К счастью, после первых трех мини-сцен я понял, что мне не хватает очень важного инструмента – кисти, которая рисует не поверх текущего слоя, но под ним. Введение такой кисти значительно ускорило процесс рисования и улучшило его качество, поскольку стало легко подкладывать фон под объекты без артефактов вдоль контура, как это бывает при обычной заливке. Затем в режим дисплея я встроил отображение предыдущего кадра (очень важно при создании анимации), инструменты искажения слоя для нестандартной перспективы в сцене и многое другое.

Создание сцены

Я сразу выбрал тематику проекта – это должна быть космическая станция, поскольку она позволяет реализовать множество всевозможных сюжетов и практически ничем не ограничивает. Далее я выбрал сюжет первой сцены – лаборатория, производящая солдат. Такая история позволила создать цех, в котором было легко зациклить каждый отдельный этап «сборки» солдат. Я хотел, чтобы анимация сборки была как можно более длительной, чтобы зритель мог проследить за множеством различных этапов.

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

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

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

Самая памятная сцена

Пока что самая запоминающаяся сцена для меня – отсек с мониторами. Вот его исходное состояние до того, как я начал рисовать на экранах:

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

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

Тайм-менеджмент

На создание одной сцены с сюжетом уходит около 2 месяцев, если рисовать только по выходным, а иногда и в будни по вечерам. В общем, рисовать все одинаково сложно, будь то стены или персонажи. За все время самым сложным было нарисовать щупальце из Half-Life (вверху, зеленое, с тремя головами). Я попытался уменьшить количество кадров для него, стараясь не навредить анимации. Однако мне все равно пришлось нарисовать около 120 кадров движения.

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

Стать частью проекта

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

Планы на будущее

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

Создаем в Фотошоп анимированного персонажа в стиле пиксель-арт

В этом уроке вы узнаете, как создать милого кролика с зацикленной анимацией бега.

Сложность урока: Средний

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

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

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

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

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

Шаг 1

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

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

Шаг 2

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

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

Шаг 10

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

Шаг 11

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

Шаг 12

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

Шаг 13

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

Шаг 14

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

Шаг 15

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

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