Инди Анатолий Логиновских
4 839

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

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

В закладки
Аудио
Один спит, второй читает, третий валяет дурака.

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

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

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

Грибные Коты и волшебный Мухомор.

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

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

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

Четыре волшебных кадра.

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

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

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

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

Ушастый Кот.
Умный Кот. Читает трудовой кодекс.
Кот, который любит кофе.
Зеленый Кот.
Кот машет хвостом.

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

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

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

Влиятельный Свин.

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

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

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

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

Пиксельный грибочек. Несъедобный.
Ещё один пиксельный грибочек.

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

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

Грибочки из игры "Merry Glade".

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

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

Кот и Хвост.

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

Лысое Солнце.

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

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

  • Целостности игры можно добиться, используя ограниченное количество кадров для всех персонажей. Я использую 4-е кадра на каждую анимацию. Этого достаточно.
  • Я отказался от пиксельной графики - это слишком сложно и долго.
  • Сэкономленное время на кадрах анимации лучше использовать для увеличения разнообразия контента.

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

Не надо рисовать то, что можно прописать кодом.

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

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

Печальный Кот на бревне.

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

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

Кит из игры "Mister Burnhouse".

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

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

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

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

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

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

Спасибо!

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Анатолий Логиновских", "author_type": "self", "tags": [], "comments": 28, "likes": 212, "favorites": 390, "is_advertisement": false, "subsite_label": "indie", "id": 53877, "is_wide": false, "is_ugc": true, "date": "Tue, 11 Jun 2019 07:25:11 +0300" }
Подкаст «Жиза ГД»:
Press X to win
Слушать фоном🎧
{ "id": 53877, "author_id": 64535, "diff_limit": 1000, "urls": {"diff":"\/comments\/53877\/get","add":"\/comments\/53877\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/53877"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64960, "last_count_and_date": null }

28 комментариев 28 комм.

Популярные

По порядку

Написать комментарий...
19

Думаю не стоит останавливаться. Новая цель - два кадра на анимацию.За статью спасибо.

Ответить
18

Уже пробовал и два кадра :))) Иногда весьма неплохо смотрится...
В Shovel Knight очень много побочных персонажей в два кадра нарисованы - удачная практика.

Ответить
10

Простите, но тяжело развидеть один грибочек сверху-слева, из игры "Merry Glade"))

Ответить
9

Взгляд художника скромен в сравнении с буйством природных форм:
Phallus impudicus var. togatus
;)

Ответить
3

Экология уже не та... Грибы мутируют. Скажем так - это взгляд художника :)))

Ответить
0

Он там такой не один

Ответить
9

Спасибо автору. Ради таких статей и захожу на DTF.

Ответить
1

И Вам спасибо большое!

Ответить
3

После предыдущего поста поиграл в мелкие игры автора)
Больше всего понравилась про жуков с паническими атаками, первая игра в Steam, где я получил 100% достижений :D

Ответить

Комментарий удален

Комментарий удален

5

Ну, не переживайте Вы так. Уверен, что моя безграмотность никак на Вас не повлияет.
Ваш сарказм я понял. Спасибо!

Ответить
–3

Твои способности не перестают поражать.

Ответить
3

Можете подписаться на меня в инстаграме и удивляться каждый день!
Я привнесу немного радости в Вашу жизнь! Спасибо!

Ответить
1

Тогда ссылку на аккаунт в студию! Вы же не думаете, что мы ясновидящие и знаем ваш ник в инстаграмме? Мне ведь, правда, интересно 😉

Ответить
1

Большое спасибо за статью! Но...
Это я такой испорченный, или так и задумано?)

Ответить
1

Видимо у человека на секунду проскочило определенное настроение, прежде, чем он снова взял себя в руки)

Ответить
0

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

Ответить
1

Это ведь растровая графика? Есть какие-нибудь условия к графике, чтобы программный сквош-стретч ее не портил (ломал, смазывал)?

Ответить
1

Да, это растровая графика. Я делаю игры в Game Maker Studio. В программе можно отключить интерполяцию между пикселями, чтобы добиться четкости картинки. Но я этого не делаю. Легкое смазывание никто не заметит, тем более рядовой пользователь.

Ответить
1

Симпатично

Ответить
1

Посоветуете, пожалуйста, уроки/курсы/книги программисту, который хочет научиться рисовать 2д графику для игр.

Ответить
0

Я начинал с того, что просто срисовывал картинки, которые мне понравились. Больше практики.

Ответить
1

На эту тему есть неплохой доклад:

Ответить
0

Можно.. но выглядит как упячка

Ответить
1

Идеально.

Ответить
0

я лучше нарисую "десят" разных

подправьте

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Пять простых способов разогнать свой ПК
с помощью соли и чайной ложки
Подписаться на push-уведомления