Элементарные приёмы 2D анимации. Быстро и эффективно

Хочешь сделать свою игру? Но не умеешь рисовать... Пустяки! Существует множество простых и эффективных приёмов, которые помогут. Об этом и поговорим...

Буквально на днях я запустил очередной бесплатный проект. Это компьютерная игра "Mushroom Cats". Она доступна на Steam вот по этой ссылке.

И сегодня хотелось бы затронуть некоторые аспекты, связанные с анимацией. Я подготовил много гифок на основе "Грибных Котов". Они помогут продемонстрировать несколько эффективных приёмов. Речь пойдет о простенькой покадровой анимации. Полезные советы для начинающих игроделов!

Для начала небольшой трейлер, чтобы освежить взгляд.

Я уже давно придерживаюсь одного основного правила, когда рисую и делаю анимацию. Есть ещё одно небольшое правило, но про него чуть позже.

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

А вот и сами правила! Несмотря на то, что их всего два - различных приёмов будет гораздо больше. Просто я обобщил разные навыки и два больших постулата.

Вот и первое правило - очень простое и эффективное.

Всё очень просто. Я уже давно ограничиваю свою фантазию 4-ми кадрами анимации. Очевидно, что такой подход существенно экономит время и силы. Можно бесконечно прорисовывать каждый кадр и добиваться невероятной плавности анимации, но зачем?

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

Посмотрите на Котов! На их элементарную анимацию!

Все эти персонажи выполнены в 4-е кадра. И это очень просто и эффективно!

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

Вот ещё пример анимации в 4-е кадра. Это уже персонаж с моего сайта.

Безусловно ограничение анимации в 4-е кадра вынужденное и очень универсальное. Дело в том, что изначально я руководствовался принципами анимации Диснея. Их двенадцать и вы легко сможете найти эти принципы на просторах сети. Рекомендую ознакомиться!

С опытом я пришёл к тому, что достаточно использовать всего 2-3 принципа, чтобы добиться живого эффекта. Например, если вы внимательно посмотрите ещё раз на Котов, то обнаружите, что я активно использую принцип "сжатия и растяжения" совместно с принципом "дуг". И этого достаточно!

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

Вот ещё несколько интересных примеров. Очень много кадров и очень много времени.

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

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

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

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

А вот Солнышко, но без лучиков...

Пора подвести промежуточный итог!

Вот советы, которые вошли в первое правило:

А теперь второе правило!

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

Вот несколько примеров.

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

Вот ещё один наглядный пример.

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

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

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

На этом у меня всё!

Не забудьте поиграть в "Грибных Котов" - игра абсолютно бесплатная!

Буду очень рад, если посмотрите и другие мои проекты. Вот тут. Смело пополняйте свой вишлист!

Спасибо!