Top
Папа рекомендует

Floor796: Создание пиксельной анимации с кучей персонажей и пасхалок

Перевод статьи с сайта 80 Level.

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

Вступление

Я родом из Белоруссии. Отучился заочно по специальности инженер связи. Последние 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. Лично для меня этот проект – площадка, на которой я могу отвлечься от программирования и нарисовать что-то интересное в свободное время.

0x00, технический директор Pikabu и создатель Floor796

Интервью провел  Arti Sergeev

Подписывайтесь на нас в Facebook, Telegram, Vkontakte, Pinterest.

+1
2
+1
0
+1
1
+1
0
+1
0
+1
0
+1
2
Поделиться: