Как сделать пиксельную анимацию
Обновлено: 21.11.2024
Если вы когда-либо работали с классическими ролевыми играми, такими как Chrono Trigger, или другими спрайтами размером менее 100 x 100, вы знаете, как пиксели становятся больше, менее гибкими и менее взаимодействующими по мере уменьшения размера спрайта.
Создать спрайт такого размера, даже если он имеет меньше пикселей, может быть на удивление сложно, поскольку у вас меньше способов придать ему правильный вид. Спланировать лицо так, чтобы глаза находились в естественном положении, а затем сделать так, чтобы 1 пиксель был правдоподобным размером для этих глаз, — требует дополнительной работы. Но как только вы, наконец, выбрали хорошую иллюстрацию, в которой каждый пиксель находится именно там, где он должен быть… пришло время анимировать. И вдруг ваша последняя партия задач выглядит как контрольная по математике в первом классе.
Теперь проблема заключается не только в том, как двигать микроскопического персонажа с правдоподобно преувеличенной анимацией. Как это сделать в ограничивающей сетке этих гигантских пикселей. Любой, кто экспериментировал с анимацией Megaman для NES, понимает, о чем я говорю. Количество естественных, «правильных» поз, в которые вы можете его поставить, строго ограничено. И вдобавок ко всему, перемещение его руки на 1 пиксель в анимации выглядит так, как будто он выставляет руку вперед на значительное расстояние. Но вы не можете переместить спрайт на меньшее расстояние, чем это огромное расстояние, потому что пиксели либо включены, либо выключены, и это единственный способ передать движение. Очевидно. ..Правильно?
Ахахаха, это самое тонкое движение, на которое я способен!
Я имею в виду, если бы только был способ заставить эти маленькие спрайты двигаться более плавно, чем черно-белый Тамагочи. Какой-то способ имитировать, скажем, реальное движение, которое вы бы сняли с помощью видеокамеры. Даже эти камеры с низким разрешением могут передать правдоподобное движение. Ах, но подождите минутку. Что, если бы видеокамера снимала какого-то далекого человека размером с спрайт? Разве это не переводило бы человека в пиксели и не двигало бы его правдоподобно? И в чем разница между этим реальным «спрайтом» из камеры и включением-выключением пикселей из Megaman или Тамагочи для NES?
Цвета. Чтобы переместить небольшой спрайт на небольшое расстояние, не перемещайте спрайт — перемещайте его цвета.
Взгляните на эту картинку. Рост этого человека меньше 50 пикселей, но вы можете четко интерпретировать, что он глубоко вздохнул. Как? Посмотрите, что на самом деле меняется: 1) смещение цветов света и тени и 2) как цвета его краев сливаются с фоном (очевидно, вокруг него не нарисованы очертания, но потерпите меня). «Ну, — говорите вы, — это хорошо, но когда у вас есть несколько лишних цветов, я уверен, что вы можете добавить все тонкости, которые вам нужны для анимации». Хорошо, тогда давайте сократим это до 16 цветов:
Становится более мультяшным, но те же идеи дают тот же эффект: светлые пиксели на его ребрах/в области живота смещаются в темные, а цвета краев смещаются на фон. (Конечно, высокая частота кадров является фактором того, насколько хорошо это выглядит, но это отдельная проблема для стиля анимации, а не для того, на чем я сосредотачиваюсь в этом случае.) А теперь давайте посмотрим, сможем ли мы преобразовать это в базовые сведения:
Шесть блеклых цветов, но по-прежнему очевидно, что этот персонаж высотой 50 пикселей совершает определенные тонкие движения, хотя силуэт едва двигается. Ладно, в этом что-то есть.
По сути, «субпиксельная анимация» означает анимацию вашего сглаживания. Ценная техника либо для перехода оттенков цвета внутри спрайта от света к тени, либо для легкого перемещения контура без перемещения силуэта. Эти цифровые видео-анимации — это то, что вы пытаетесь имитировать, и да, это делает концепцию немного механической, но «искусство» заключается в том, чтобы решить, как далеко зайти, и особенно в том, чтобы решить, как включить технику с вашими ограниченными цветами. .
Это идея, а теперь несколько примеров, показывающих, как профессионалы перемещают маленькие спрайты:
Metal Slug очень хорошо передает движение благодаря двум факторам: очень большому количеству цветов, что обеспечивает высокий уровень детализации, и очень высокой частоте кадров, что обеспечивает детализированную анимацию.
Посмотрите на эти спрайты и убедитесь, насколько мало двигаются настоящие силуэты. Больше всего меняются цвета существующих пикселей. (Если быть точным с технической точки зрения, субпиксельная анимация происходит в тех местах, где очертания становятся светлее, когда в них вдавливается часть тела, и темнеют, когда часть тела удаляется. Таким образом, кажется, что спрайт движется в пространстве, но на самом деле это всего лишь перемещается в свой собственный контур.) Если бы вы уменьшили любой из них до черно-белого линейного изображения, большая часть движения мгновенно исчезла бы.
С помощью нескольких концепций субпиксельной анимации вы можете добавить глубины даже самым сложным объектам. Я добавил темно-красный, чтобы придать исходному красному немного сглаживания, и уменьшил анимацию, чтобы силуэт почти не двигался. Как тебе *это* тонкое движение, Гутсман?
В этих крошечных областях так много деталей, что, глядя на них вблизи, трудно сосредоточиться на том, что к чему. Эта деталь возникает из-за огромного количества цветовых оттенков, втиснутых в спрайт, что, в свою очередь, дает больше всего возможностей переместить, скажем, руку на небольшое расстояние от тени в более светлую область в более светлую область в самую светлую область, не перемещая фактическую область. положение руки. И более того, небольшой размер спрайта теперь становится преимуществом, потому что этот трюк будет иметь меньшее влияние на более крупные спрайты.
Castlevania – это еще одна серия игр, изобилующая примерами. Обратите внимание, что внутренняя часть плаща Сомы не имеет контура. Вместо этого он использует темное сглаживание, чтобы все больше и больше сливаться с его черной рубашкой и темными брюками. В этом случае представьте пиксель-арт не как сам арт, а как фильтр, преобразующий искусство.
Вот как вы это делаете, но в то же время вы видите предостережение: более тонкое движение требует большего количества цвета, чтобы предоставить вам достаточно разноцветных пикселей для анимации. Более высокая частота кадров тоже не помешает, но это второстепенно.
В следующий раз, когда вы, аниматоры, окажетесь в ловушке из-за грубых, отрывистых движений, подумайте о внутренней части контуров. Это может работать для детализированных областей, таких как пальцы или лица на спрайтах бойцов или анимация тяжелого дыхания для прокрутки и так далее. Это просто еще один пример того, как вы, художники по пикселям, можете мыслить нестандартно.
Иэн Маклин — профессиональный пиксельный художник, аниматор и иллюстратор, проработавший в игровой индустрии 16 лет. Он считает себя супер-ботаником и доказывает это многогранными игральными костями, коллекцией комиксов и миниатюрами.
Введение
Animaton — неотъемлемая часть практически каждой видеоигры и приложения. Фактически, анимация была названа одним из наиболее важных факторов, поддерживающих интерес игрока к игре. Чем больше анимации в игре и чем лучше качество этой анимации, тем больше вероятность того, что игрок останется вовлеченным в эту игру. Пиксельная анимация использует методы, аналогичные традиционной анимации в мультфильмах, аниме и фильмах. Анимация создается путем быстрого циклического перебора серии неподвижных изображений, называемых кадрами, которые показывают изображение поэтапно в движении. Основное отличие пиксельной анимации в том, что она обычно использует меньше кадров и обрабатывается по одному пикселю за раз.
Цели обучения
Методы, представленные в этом модуле, могут помочь улучшить качество окончательной пиксельной графики учащегося. Учащиеся получат лучшее представление об использовании программного обеспечения для редактирования изображений для создания графики, а также о распространенных ошибках, которых следует избегать.
Словарный запас
Наводящие вопросы
- Можете ли вы воспринимать «ключевые кадры», быстро моргая глазами?
- Как сделать анимацию более плавной?
- Какие рисованные изменения могут усилить ощущение веса в анимации?
Ссылки на учебные программы
Этот модуль дает возможность учесть требования учебной программы по искусству и компьютерным наукам в 4–6 классах. В частности, студенты познакомятся с программным обеспечением Graphicsgale. Это задание также продемонстрирует, как использовать программное обеспечение для редактирования изображений для создания графики.
Материалы
- GraphicsGale — скачать GraphicsGale
- Art Assets – загрузите папку ресурсов (ZIP)
- Флипбуки/блокноты/стикеры
- Карандаши или ручки
Действия, не связанные с компьютером
Традиционная анимация основана на быстром циклическом просмотре серии неподвижных изображений, демонстрирующих различные движения. С помощью флип-падов и карандашей мы можем легко создать простую анимацию прыгающего мяча. Сначала мы будем использовать ключевые кадры, затем вернемся назад и нарисуем промежуточные кадры. Всего нам понадобится 16 страниц.
Для начала нарисуйте круглый шар в середине левого края первой страницы. Это устанавливает размер мяча для отслеживания в следующих кадрах. Мяч будет следовать по пути, как показано ниже. Оторвите последнюю страницу блокнота или нарисуйте этот путь на отдельном листе бумаги. Используйте это в качестве шаблона, чтобы траектория движения мяча оставалась неизменной на протяжении всей анимации.
Откройте страницу 5 своего блокнота и нарисуйте слегка сплющенный мяч в нижней части первой дуги, как показано ниже. Используйте свой шаблон пути, чтобы выровнять, куда должен идти мяч. В традиционной анимации используется гораздо более тонкая бумага, поэтому одновременно можно просматривать несколько страниц, но, скорее всего, это не относится к вашему блокноту, поэтому шаблон полезен.
На странице 9 в верхней части второй кривой перерисуйте мяч, приняв его первоначальную форму и размер. Затем нарисуйте такой же слегка сплющенный шар в нижней части второй кривой на странице 12. Наконец, нарисуйте полностью круглый шар в верхней части последней кривой на странице 16. Это ваши ключевые кадры; основные моменты в движении вашего мяча.
Теперь мы добавим промежуточные кадры, чтобы сделать движение завершенным и сгладить переходы между ключевыми кадрами. На страницах до и после ключевых кадров, где мяч находится на высоте, нам нужно добавить кадры, на которых мяч движется по траектории, все еще сохраняя свою первоначальную форму. В этот момент на шар не действуют никакие силы, деформирующие его форму, поэтому он полный и круглый. Вы можете использовать изображение ниже, чтобы указать, где вы должны разместить и нарисовать свои рамки.
Когда мяч приближается к земле, выходя из точки отскока, он начинает набирать скорость. Чтобы показать это, мы можем немного растянуть форму шара. В ключевых кадрах, где мяч ударяется о землю, весь этот импульс направлен вниз, но мячу больше некуда двигаться, поэтому его форма сплющивается наружу. Затем энергия быстро отбрасывает мяч обратно вверх, в результате чего получается еще одно растянутое изображение мяча. Это визуальное растяжение называется добавлением веса к анимации. Он изображает кинетические силы, действующие на объект на изображении, и значительно повышает реалистичность анимации.
Вот окончательный образец изображения, показывающий, где вы должны нарисовать растянутые формы шара.
Теперь пролистайте страницы своего блокнота большим пальцем, и вы сможете увидеть движение отскакивающего мяча. Вы сделали свою первую анимацию!
Активность компьютера
Используя навыки, полученные в предыдущих модулях — создание спрайтов и работу со слоями — теперь мы создадим простой спрайт персонажа и анимируем цикл ходьбы в четырех кадрах. Для этой анимации мы будем использовать самые простые ключевые кадры и создадим изображения, которые показывают персонажа в самых разных частях движения, которые мы хотим анимировать.
В этом примере показан очень простой цикл ходьбы из четырех кадров. Первый и третий кадры показывают, что персонаж стоит прямо, а второй и четвертый кадры показывают его на крайних шагах. Эта анимационная последовательность очень распространена в играх и используется до сих пор. Единственная проблема с этой анимацией в том, что ей не хватает веса. В терминах анимации вес означает ощущение силы тяжести при движении персонажа или объекта.
Сейчас в этом анимационном цикле очень мало веса. Одежда и перья волос остаются неподвижными, пока персонаж ходит. С небольшими изменениями мы можем улучшить внешний вид.
В этом примере были внесены некоторые незначительные изменения, которые могут сильно повлиять на качество анимации. Помпон на шапке персонажа слегка подпрыгивает вверх, как и его перо для волос и рюкзак. Все эти элементы имеют меньший вес и больше зависят от качающихся движений при ходьбе персонажа. Внесение этих небольших изменений создает более правдоподобную анимацию ходьбы персонажа.
Давайте анимируем цикл ходьбы в GraphicsGale, используя простой шаблон персонажа.
Исходные файлы для этого шаблона прогулки: walk_01.jpg, walk_02.jpg, walk_03.jpg и walk_04.jpg. Откройте GraphicsGale и создайте новое изображение 32x32px (16-битный цвет). Разверните холст и используйте инструмент увеличения, чтобы увеличить масштаб до 800%.
Чтобы импортировать существующие кадры шаблона, выберите «Правка»> «Импорт» и найдите место, где вы сохранили файлы шаблона. Выберите walk_01.jpg и щелкните левой кнопкой мыши «Открыть». На вашем холсте должен открыться первый кадр шаблона прогулки. По умолчанию любые импортированные изображения размещаются над текущим слоем до тех пор, пока они не будут зафиксированы, чтобы пользователь мог настроить размещение. Нам вообще не нужно настраивать изображение, поэтому просто щелкните правой кнопкой мыши в любом месте изображения, чтобы зафиксировать его на слое.
Поскольку мы хотим создать анимацию, а не многослойное изображение, мы будем работать с кадрами. Чтобы добавить новую рамку, щелкните левой кнопкой мыши кнопку «Добавить рамку» в левом нижнем углу панели инструментов. Выберите этот новый кадр, щелкнув его левой кнопкой мыши на панели кадров в нижней части экрана. Импортируйте второе изображение шаблона ходьбы, выбрав «Правка»> «Импорт», выбрав «walk_02.jpg» и щелкнув левой кнопкой мыши «Открыть». Зафиксируйте импортированное изображение, щелкнув его правой кнопкой мыши. Повторите процесс добавления слоев и импорта изображений для walk_03.jpg и walk04.jpg, добавления нового кадра, импорта изображения и фиксации его в кадре.
Перед работой над анимацией мы должны добавить альфа-цвет к фону каждого кадра. Альфа-цвет — это цвет, который вряд ли появится в цветах, используемых при рисовании спрайта, поэтому его можно легко выбрать, чтобы сделать прозрачным в конечном выходном изображении. Для этого мы будем использовать альфа-розовый. Выберите образец в палитре справа, щелкнув его левой кнопкой мыши, и щелкните вкладку RGB ниже. На панелях ввода слева от ползунков введите R:255 G:0 B:255. Щелкните левой кнопкой мыши по ярко-розовому цвету, который теперь должен быть образцом цвета переднего плана, и перетащите его на образец в палитре.
Выберите инструмент «Заливка заливкой» на панели инструментов, установив альфа-розовый цвет в качестве цвета переднего плана, и щелкните левой кнопкой мыши фон холста, чтобы сделать белый фон полностью розовым. Щелкните левой кнопкой мыши, чтобы выбрать каждый из четырех кадров по очереди на нижней панели кадров, и залейте фон каждого кадра розовым альфа-каналом.
Теперь нам нужно убедиться, что розовый фон не отображается на финальном изображении. Для этого нажмите кнопку выбора на активном фрейме на панели фреймов. Откроется вкладка «Свойства кадра» с множеством видимых параметров. Убедитесь, что флажок «Прозрачный цвет» установлен, затем нажмите кнопку пипетки под ним. Когда откроется предварительный просмотр кадра, щелкните область кадра, которую вы хотите сделать невидимой. Щелкните в любом месте, где отображается альфа-розовый цвет, чтобы установить его в качестве прозрачного цвета. Затем нажмите OK, чтобы применить изменения.
Розовый по-прежнему будет виден на холсте, но это сделано для удобства рисования. Под панелью палитры должен быть предварительный просмотр вашей анимации. Вы должны увидеть все четыре кадра в цикле, чтобы проверить свою анимацию. Теперь, когда один кадр имеет прозрачный фон, он должен показывать розовый фон, который мерцает до белого каждые четыре кадра. Повторите процесс для остальных трех кадров, нажимая кнопки параметров и устанавливая прозрачность розового альфа-канала в каждом из них.
Теперь мы можем начать рисовать поверх рамок, чтобы создать уникального персонажа. Вы можете использовать инструмент «Карандаш», чтобы рисовать по одному пикселю за раз. Другой вариант — использовать инструмент «Замена цвета» справа от инструмента «Заливка» на панели инструментов. Чтобы использовать заменитель цвета, установите активный цвет в качестве нового цвета, который вы хотите поместить, затем CTRL + щелкните правой кнопкой мыши цвет, который вы хотите заменить. Затем вы можете быстро рисовать поверх изображения, и это затронет только пиксели вторичного цвета. Помните, что для установки пользовательских цветов в палитре используйте ползунки внизу, чтобы установить активный цвет, а затем перетащите этот цвет из активного образца цвета в образец в палитре.
Когда вы работаете над редактированием фреймов, помните, что вы можете щелкнуть кадр, над которым хотите работать, на панели фреймов или циклически переключаться между ними с помощью стрелок влево и вправо на панели инструментов. Если вы хотите лучше понять, что вы нарисовали на кадрах до или после текущего, вы можете включить или отключить кнопку «Луковая шкура». Это делает другие кадры полупрозрачными, как если бы они были нарисованы на традиционной анимационной бумаге. Вы можете использовать небольшое раскрывающееся меню, чтобы решить, является ли предыдущий кадр, следующий кадр или оба прозрачными.\
После того как вы перерисовали все свои кадры, в последний раз взгляните на окно предварительного просмотра. Вы можете проверить, насколько плавной является ваша анимация, и отследить любые кадры, которые могут быть проблемой. Также может помочь прокрутка их с помощью кнопок кадра назад и вперед. Если вы хотите изменить синхронизацию кадров, чтобы ускорить или замедлить анимацию, вы можете нажать кнопку параметров на панели кадров. Задержка сообщает программе, как долго отображать каждый кадр перед переключением на следующий в последовательности. Поиграйте с числом в поле и посмотрите, как оно повлияет на вашу анимацию. Когда скорость вас устроит, нажмите OK, чтобы применить изменения.
Теперь пришло время экспортировать финальное изображение в виде анимированного GIF. GraphicsGale изначально поддерживает анимированный GIF как формат, что упрощает процесс. Просто выберите «Файл»> «Сохранить как», чтобы открыть диалоговое окно. Выберите место, куда вы хотите сохранить файл, дайте ему имя, затем выберите GIF из раскрывающегося списка «Сохранить как тип». Убедитесь, что в правом нижнем углу установлен флажок «Цикл», чтобы ваш GIF повторялся бесконечно. Нажмите «Сохранить», и все готово!
Если вы хотите увеличить изображение для публикации, перейдите в раздел «Все кадры»> «Пересэмплировать» перед сохранением. Вы можете изменить размер в пикселях или процентах. Чтобы сохранить целостность пикселей, используйте проценты, и делайте это с коэффициентом два. Попробуйте для начала установить 200%, убедившись, что установлен флажок «Сохранить соотношение сторон», а флажок «Сгладить» не установлен. Сглаживание будет смешивать и округлять ваши пиксели, добавляя дополнительные цвета к вашему изображению и делая его непригодным для использования в игровых приложениях, поэтому лучше всегда следить за тем, чтобы этот флажок не был установлен. После изменения размера сохраните как обычно.
Вуаля! Анимированный спрайт!
Заключение
Анимация оживляет изображения на экране. Используя несколько простых приемов, вы можете значительно улучшить качество своей игры и графики активов. Теперь, когда у вас есть представление о процессе создания анимированных спрайтов в GraphicsGale, вы можете попробовать применить эти навыки к другим спрайтам, тайлам, тексту и т.д. Если вы экспортируете свои спрайты в виде файлов PNG, вы даже можете перенести их в Scratch или другую программу кодирования и использовать их в качестве основы для разработки собственных игр.
Когда мы были детьми, нас всех впечатляло, как создаются мультфильмы, с их разнообразием цветов, движений и т. д. В детстве многие из нас подпитывают этот интерес различными видами изобразительного искусства, включая пиксель-арт.
В этой статье я научу вас создавать собственные анимации в Aseprite. Aseprite — редактор 2D-графики для Windows, macOS и Linux. Он был разработан Дэвидом Капелло для создания и редактирования спрайтов и пиксельной анимации. Для этого Aseprite использует слои и фреймы.
1 Прежде всего, у нас должна быть копия Aseprite на наших компьютерах. Если нет, купите и установите. Вот как выглядит Aseprite:
Aseprite поставляется со встроенными цветовыми палитрами, которые помогут новичкам выбрать правильные цвета, но также позволяют вам выбирать и создавать свою цветовую палитру, если вы чувствуете себя более предприимчивым.
2 Мы оживим маленькую птичку, которую назовем Майк. Мы продолжим рисовать для него разные кадры по мере прохождения всей его анимации движения.
Чтобы создать анимацию ходьбы, мы должны начать с позы бездействия, то есть с позы, в которой наш персонаж стоит на месте. На этом кадре видна только одна его нога (хотя на самом деле они там обе).
3 Затем добавьте новый кадр. Мы сделаем это, нажав клавиши Alt + N или перейдя в меню фрейма, а затем нажав кнопку «Новый фрейм».
Когда у нас есть второй кадр, нам нужно перерисовать некоторые части спрайта. Мы начнем с начальной позиции нашего персонажа и немного ее отредактируем.
Мы нарисуем (в данном случае) птицу с одной ногой впереди, а другой по диагонали сзади, чтобы создать впечатление, что она делает шаг вперед. Мы закрасим заднюю ногу более темным цветом, чем переднюю, создав иллюзию тени.
Мы также немного изменим хвост. Когда вы делаете шаг, он должен казаться немного меньше, чем он есть на самом деле, из-за движения. Мы должны иметь в виду, что даже тело должно показывать эффекты движения, а не только ноги. Это ОЧЕНЬ ВАЖНО для гибкости.
Для этой анимации мы будем работать только с четырьмя кадрами, но вы можете работать с любым количеством кадров. Но имейте в виду, что чем больше у вас кадров, тем больше работы нужно проделать, но и анимация будет выглядеть более плавно.
4 В третьем кадре Майк снова стоит на месте. Мы можем просто скопировать и вставить первый кадр Майка и использовать его здесь для третьего кадра, чтобы сократить путь.
Хвост снова должен быть выше, так как он стоит прямо. Посмотрите, как положение его тела и поза изменились по сравнению с предыдущим кадром.
5 В четвертом кадре мы сделаем то же самое, что и раньше, но скопируем второй кадр и вставим его сюда. На этот раз левая нога пойдет вперед; поэтому задняя нога будет окрашена в более светлый цвет, а передняя – в более темный.
Обратите внимание, что это тот же рисунок, что и на втором кадре, только с одним отличием. Цвет ножек — единственное, что делает одну рамку левой ступенькой, а другую — правой.
Вы всегда можете и должны время от времени просматривать свою анимацию; вы можете сделать это, нажав маленькую кнопку воспроизведения на временной шкале.
6 Чтобы опубликовать нашу анимацию в социальных сетях, мы должны экспортировать файл GIF и изменить размер нашего спрайта, чтобы сделать его больше. Мы сделаем это очень просто, используя меню Файл → Экспорт или нажав Ctrl + Alt + Shift + S.
И вуаля, у нас есть анимированный Майк!
Если вы хотите поработать со спрайтом Майка, вы можете загрузить файл Aseprite, нажав кнопку ниже:
Вам понравилась эта статья? Тогда подумайте о том, чтобы угостить меня кофе! Ваша поддержка поможет мне покрыть расходы на сайт и заплатить авторам за создание нового контента для блога.
Большинство посетителей этого сайта знают меня по моей работе в детских СМИ. Если вы один из таких людей, сегодня у меня для вас кое-что необычное. Если, с другой стороны, вы нашли мой пиксель-арт в Tumblr и Twitter и попали сюда, внешний вид этого сайта может немного сбить с толку — в основном я работаю для детей, например, телешоу. Кроме того, пиксель-арт — это личная любовь. Этот пост посвящен пиксель-арту.
Если вы еще не видели мое видео для GUNSHIP, посмотрите его ниже, чтобы увидеть немного ретро-футуристического пиксельного искусства киберпанка в невероятном треке. Может быть, даже посмотреть его несколько раз, чтобы увидеть, сможете ли вы найти все не очень скрытые отсылки. Если вы росли в 80-х и начале 90-х, вы увидите знакомые кивки. Вот оно:
Я уже давно занимаюсь пиксель-артом, но в начале 2015 года нашей эры я начал использовать его, чтобы оживить некоторые изображения в стиле киберпанк. Не будущее — настоящее, которое я мог себе представить еще в 80-х. Это 2015 год, который я хотел. Тот, который я ожидал.
Но вместо общедоступных видеотелефонов у нас появились мобильные. Вместо парящих машин и андроидов мы получили постоянную связь почти со всем миром. Может, мы нормально поступили. В конце концов, именно эта связь привела к нашему сотрудничеству.
После публикации моих пиксельных картинок в Твиттере Дэн Хей из GUNSHIP нашел меня, а я нашел GUNSHIP, который на тот момент выпустил совершенно невероятный трек Fly For Your Life. Мы мгновенно распознали общие влияния, общие взгляды. И именно Дэну впервые пришла в голову идея собрать их вместе. Мы начали с очень простой идеи использования существующих GIF-файлов для создания визуализации трека.Но вскоре мы обнаружили, что, несмотря на плотный график, он перерастает в настоящее видео с прекрасным саундтреком — Revel In Your Time.
С точки зрения того, как это было сделано, это старомодная попиксельная работа. Я создал почти все, используя Pixaki для iPad — очень хорошее простое пиксельное приложение с удивительно чистым интерфейсом. Те, кто меня знает, знают, что мне нравится удобство создания на iPad, и здесь он отлично сработал. Я мог в любой момент убрать фоны и листы спрайтов, не беспокоясь о том, чтобы вернуться к компьютеру.
Все спрайты созданы в Pixaki, но я собрал большую часть анимации в Photoshop, используя временную шкалу анимации. Это то, что не подходило мне в большинстве случаев, но хорошо работало для этой системы спрайтов. На самом деле все просто кадр за кадром.
И последним слоем был After Effects, где я компоновал все, что требовало больших движений без замены спрайтов, например сцену с велосипедом, поездом и так далее. Анимация в видео на самом деле все 12 кадров в секунду, но визуализируется со скоростью 24 кадра в секунду, поэтому выполнение этих движений в After Effects означает, что они могут быть более плавными, чем 12 кадров в секунду по умолчанию. В противном случае они выглядели бы довольно дергано. Я также добавил небольшую хитрость, создав несколько эффектов свечения в After Effects, чтобы действительно подчеркнуть ощущение неона, неотъемлемую часть атмосферы киберпанка.
Я знаю, что одна из частей, которая зашла очень хорошо, — это концовка Monkey Island. Это одна часть, за которую я не могу ручаться — ребята из GUNSHIP добавили ее, и это было гениально.
Итак, это видео GUNSHIP Revel In Your Time. Я надеюсь, вам понравится это! Не стесняйтесь поделиться им и опубликовать его везде. Спам своим друзьям! Нет, не надо. Никто не любит спам. Но поделитесь им, если вы знаете кого-то, кому это может понравиться. И если вам нравится этот трек, вам нужен альбом. Это просто фантастика. Уже мой альбом 2015 года. Он становится все лучше и лучше с такими невероятными песнями, как Pink Mist, The Mountain и Black Sun on the Horizon. Было здорово работать с Дэном, Алексом Вестэуэем и Алексом Гингеллом, и я надеюсь, что альбом получит то внимание, которого он заслуживает.
3 мысли на тему «Создание музыкального клипа в пиксельной графике»
Отлично! Спасибо за этот пост о создании, очень классный материал.
молодец!! спасибо за выложенный процесс. Мне трудно синхронизировать движение разных слоев в After Effects
Спасибо, ребята! Да, синхронизация в AE иногда может быть сложной. Для этого я сначала обработал большую часть в Photoshop. Это гораздо более ручной и медленный процесс, но это означает, что у меня был полный контроль над тем, где что находится. В AE было немного возни, пытаясь сделать движения плавными. Например, между двумя ключами AE может перемещать спрайт каждые 2 кадра. Или с такой же вероятностью могло пойти 2, 3, 2, 1, 4, 2 и т. д. Это потребовало проб и ошибок, чтобы найти золотую середину.
Читайте также: