Как сделать плавную анимацию для абстрактного персонажа — краткое описание техники Статьи редакции

Частный пример, который может послужить источником вдохновения для создания собственной анимации.

Пользователь Reddit под ником Sid Fish Games опубликовал короткое видео, в котором показал, как сделать плавную анимацию передвижения персонажей. Разработчик применил эту технику в собственном пошаговом проекте, в котором пространство поделено на ячейки.

Полное видео

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

Слева изначальный вариант, справа — финальный

Первый шаг — скопируйте начальный кадр анимации и откройте его в бесплатном графическом редакторе paint.net.

Примените к изображению эффект motion blur — размытие в движении
Поместите размытое изображение между начальным и конечным кадрами
Скопируйте первый кадр анимации и немного «сожмите» персонажа — уменьшите его длину, но увеличьте высоту
Также «сожмите» его лицо: это нужно для того, чтобы движение выглядело правдоподобным

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

Процесс создания частиц пыли
Финальная анимация
{ "author_name": "Владимир Семыкин", "author_type": "editor", "tags": ["\u043e\u043f\u044b\u0442","\u0438\u043d\u0434\u0438","\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f"], "comments": 16, "likes": 131, "favorites": 382, "is_advertisement": false, "subsite_label": "gamedev", "id": 249688, "is_wide": true, "is_ugc": false, "date": "Wed, 25 Nov 2020 14:45:31 +0300", "is_special": false }
0
16 комментариев
Популярные
По порядку
Написать комментарий...
32

Так а в чем суть? Показать как делать покадровые анимации между ходами? Или как добавить "сочности" этой анимации? Если второе, то на эту тему есть гораздо более детальный и полезный доклад.

Ответить
4

Гораздо полезнее! И что ещё лучше, доклад менее привязан к какой-либо частной ситуации. А пост достаточно странноватый и скупой для "туториала")

Ответить
2

Пост просто иллюстрирует один из 12 популярных принципов анимации. Ничего плохого в этом нет =)

Ответить
3

Ничего не говорю про плохость, норм) Просто по одному из принципов анимации, здесь как-то преувеличен объём поста по сравнению с самим материалом) Думал, что здесь скрывается чего-то большее, а одной первой гифки может хватить)

Ответить
2

Я на всякий случай поделюсь данным видосом, так как для меня оказалось большой новостью, что многие мои друзья занимающиеся артом его не видели, а он очень интересный, даже банально для расширения кругозора:

Ответить
19

blur-ить в пиксель арте – "неправославненько", а так двачую коммент @Андрей Торчинский 

Ответить
0

а как иначе получить такой эффект?

Ответить
10

Растягивать объект и его детали (например глаза-точки сделать линиями) по направлению движения. Например, как на гифке ниже, в частности движение копья.

Ответить
7

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

Ответить
0

Выглядит конечно хорошо, но ведь такой кадр технически невозможен на сегментном дисплее. Ведь сегменты не могут пересекаться. Или смысл был не в аутентичности?

Ответить
1

конечно невозможен, как и вся 2Д мультипликация в реальной жизни. но что бы преукрасить и сделать картинку смачнее ведь можно, или нет? :)

Ответить
2

Я про техническую часть говорю. Про дисплей. Сегментом называется не часть тела Микки, а обособленная часть одного электрического контура которая расположена в дисплее. Например руки вместе с корзиной это один сегмент. Всего руки и корзина имеют 4 позиции, значит это четыре сегмента дисплея. Они не пресекаются с другими сегментами, поэтому они не косаются самого Микки. По той же причине нога смотрящего вправо Микки поднята, чтобы не задевать сегмент Микки слева. На фото все доступные сегменты. Технически невозможно на таком дисплее нарисовать новую форму которая будет накладываться на другие. Чтобы сделать сегмент более светлым нужен контроль питания, что тоже было нереально в рамках такого хендхелда. Как я и написал, у меня нет претензий к дизайну, к тому как это выглядит. Вопрос у меня в другом. Разве подобные вещи делаются не для того чтобы быть аутентичными? Ведь сама игра и графика в ней вряд ли кого-то сейчас удивят. Приведу пример. Когда вы рисуете окружение, допустим крепость, вы продумываете дизайн. Как эту крепость используют люди, что они делают. Чтобы всё это выглядело правдоподобно. Когда вы рисуете доспехи персонажу, вы думаете о том чтобы каждый элемент был к месту. Вы убеждаетесь в том, что в таких доспехах по крайней мере будет возможно двигаться. Точно так же когда рисуете Game & Watch вы изображаете такой дисплей который может работать в реальной жизни. Разве нет? Отсюда и вопрос: смысл был не в аутентичности? =)

Ответить
1

спасибо за ликбез, но я знаю как сделана эта игрушка. в советском детсве отыграл в "Ну, погоди!" и "Веселого повара" несколько лет, были во владении. "Тайны океана" были у одноклассника, есно экраны со всеми включенными элементами видел и не один раз. В моем случае сделано для красоты, что бы показать скорость перемещения персонажа. Задачи слепо скопировать один в один анимации оригинальной игры не было, так можно было бы и видео снять. Суть сего экзерсиса была в создании картинки в пиксель арт стилистике, на ежедневную тему "Микки". Чисто практики ради. Статика выглядело уныло, решил добавить анимацию. Версия без "этого" промежуточного кадра мне не понравилась, не хватало эффекта скорости. Типа один элемент уже погас, второй еще не включился, но все происходит так быстро, что на сетчатке остается "призрак" картинки. Да, когда я рисую концепт арты, то стараюсь думать о функциональности и дизайне элементов и объектов, изучаю референсы, хожу в музеи и т.д. Например, в этой картике у цветной подложки есть тени, которые отбрасываются на ЖК экран из-за толщины стекла :-Р Так короче, Денис, что ты сказать-то хотел? :) Ах, да, смысл был не в аутентичности! :)

Ответить
8

Добавил в закладки ( ͡° ͜ʖ ͡°)

Ответить
0

Зачем было открывать aseprite, если тут просто добавили моушн блур и пыль, которые в 90% случаев делают програмно?

Ответить
0

Уу, Р*ддит.

Ответить

Комментарии

null