28 декабря 2017

Процедурные анимации - как и зачем?

/// Внимание! Под cut'ом много гифок, траффик! ///


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

Зачем мне процедурные анимации

Я уже много раз говорил, что не умею рисовать... как-то это сложно. Поэтому люблю многие штуки делать программно. Нужно нарисовать серый вариант иконки? Мне проще обесцветить картинку программно, чем просить художника сделать этот эффект в фотошопе.
С покадровыми анимациями такая же история. Я их не умею рисовать. Совсем. Думаю, именно из-за этого во всех моих первых играх не было персонажей. Вместо этого я старался наполнить игры всякими простыми анимациями.
Крутились мельница, ветряк, и шестеренки:


Были бабочки:


Вот эта турель тоже приводится в движение кодом:


А потом и вообще все анимации в игре Energy Bay я сделал программно:


Теперь же я пытаюсь и простых врагов делать программно:


Бонусы такого подхода: 
  • я полностью контролирую каждый кадр анимации
  • их можно воспроизводить при любом значении кадров в секунду
  • изменяем параметры и получаем похожую, но при этом другую анимацию!

Как я их делаю

  • Если говорить с технической точки зрения, то я программирую анимации в Adobe Animate (бывший Flash). Для меня этот инструмент привычен, и я могу довольно быстро запрототипировать несложные вещи. Если же говорить о действительно сложных процедурных анимациях, то я их просто стараюсь не делать :) Слишком дорого в разработке, и при этом тюнинг и генерация из него новых анимаций будет очень сложна. Ну... по крайней мере в моей практике было именно так.
  • Для вдохновения я смотрю видео прохождения каких-нибудь ярких игр, брожу по сайтам с рисованными анимациями или стараюсь найти интересный реф на стоках.
  • Теперь о времени создания. В среднем на небольшие анимашки уходит полчаса. Если что-то посложнее - два-три часа. Это я говорю о создании самой анимации, то есть чтобы просто работало. А вот обертка в тутор, рисование элементов, запись гифок, перевод на английский, орфография и вот эта вся бесовщина может занять целый день (а иногда и больше!)

Процесс создания

  1. Это банально... но все начинается с идеи или мысли "о, хочу сделать также, как и в такой-то игре". И либо загорается лампочка вроде "а я знаю, как эту штуку забацать!", либо "вообще непонятно, как это можно сделать процедурно". К примеру, сейчас у меня есть идея сделать кнут.
     
  2. Прям чтоб физично развивался и лупил по врагам. Не знаю зачем, просто интересно сделать. И вот здесь горит лампочка "как-то это сложно"... поэтому я не написал ни одной строчки кода для этой анимации. Пусть вертится в голове в фоновом режиме. Может что-то придумается через пару месяцев.
    Так было с осьминогом. Я долго ходил с мыслью, что хочу такого врага в игре. Сделал пару попыток и забросил:
    Потом увидел, что в некоторых пиксель-арт играх разработчики поворачивают пиксели, так что мир пиксель-арта как бы рушится. Но никто не замечает. Я попробовал и вышел вот такой парень:
    Теперь он мне нравится, но прошло несколько недель, прежде чем я догадался попробовать новый метод.
  3. Так вот, как только загорается лампочка "кажется, я знаю, как можно забацать такую анимацию", я сажусь и начинаю программировать. Рисую базовые элементы, подбираю красивые цвета (чтобы не было противно смотреть на вырви-глаз, пока набираю код), накидываю небольшие элементы анимации. При этом весь код опутан какими-то магическими числами и странными функциями. А чисел действительно может быть много - координаты, амплитуды движений, скорости, силы взаимодействия - все просто числами. Думаю, сам код вообще не читабелен. Мне нормально, так как эта фаза длится не очень долго. Когда анимация готова, я перехожу к следующему пункту...
  4. Причесывание. Да, я немного ковыряю код, чтобы можно было вынести параметры в блок констант. Стараюсь повысить производительность кода, где это возможно. Где-то даже оставляю комментарии (но редко). Все - анимация готова!
  5. И здесь начинается самое интересное. Когда анимация готова, я пытаюсь понять, насколько она расширяема. Кладу на сцену несколько одинаковых анимаций, но у каждой чуть изменяю параметры (как раз для этого и нужен был предыдущий пункт). После этого сразу понятно, насколько анимация вышла разноплановой и можно ли ее применить в разных местах.
  6. Рисую разную графику, чтобы показать в туторах, что код взят один - а визуально все выглядит совершенно непохоже, но симпатично!

Туторы - будут ли еще?

Будут!
Но есть один момент - хочу попробовать выйти с этими туторами на patreon. Планы на монетизацию такие. Бесплатно для всех будут "туторы в одной гиф", а за небольшую плату можно будет получить исходники с кодом, артом и прочими прелестями жизни. Поэтому как раз сейчас в расслабленном режиме я стараюсь запастись рабочим материалом, чтобы в дальнейшем выкладывать туторы регулярно (пока планирую раз в неделю). Вот такие грандиозные у меня планы на две тысячи восемнадцатый!

Последние штуковины

Вы уже могли видеть новые гифки в моем твиттере... если нет - то вот мои последние процедурные анимации:





А вот "секретные" вещи, которые я еще нигде не выкладывал:


Итого

Вот такие дела... нагрузил вас целой кучей гифок, рассказал банальные вещи, поделился планами на будущее :)
Постараюсь до Нового Года еще какой-то заключительный пост написать, чтобы прям новогоднее настроение поднять! Ура, товарищи!

Сообщения, схожие по тематике:

0 коммент.:

Отправить комментарий