Ещё один маленький инструмент для разработчиков игр - знакомьтесь, Squishy

Ещё один маленький инструмент для разработчиков игр - знакомьтесь, Squishy

Я занимаюсь разработкой игр и вместе с этим ищу способы как упростить себе жизнь в этом нелегком деле.

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

Она была призвана ускорить разработку игр, которым не нужны сложные шейдеры, а достаточно "вшить" обводку в уже нарисованные спрайты.

На этот раз я замахнулся на кое-что помасштабнее, а именно решил создать свой редактор анимаций.

И создал! Но обо всем по порядку.

Поприветствуйте Squishy!

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

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

Иногда достаточно простых трансформаций типа Scale, Move, Rotate и т.д., чтобы получить необходимый результат.

Возьмем к примеру вот такую анимацию:

Неужели для нее нам нужно изучать целые туториалы, чтобы научиться работать в каком-нибудь сложном редакторе анимаций? Ну это же буквально обычный скейл и больше ничего?

Как раз для таких задач и пригодится утилита Squishy - в ней можно анимировать такие свойства картинок, как позиция, поворот, скейл, тем самым создавая простые, но приятные анимации. А получившийся результат можно скачать в виде отдельных кадров.

Вот так выглядит создание такой анимации в Squishy - всего две трансформации:

Что еще умеет Squishy?

Помимо анимирования скейла, Squishy умеет анимировать и другие параметры изображения.

Ещё один маленький инструмент для разработчиков игр - знакомьтесь, Squishy

В нем можно анимировать перемещение, поворот, скейл и прозрачность картинки.

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

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

Может показаться, что этот список возможностей Squishy слишком мал, однако его вполне достаточно, чтобы придать жизни вашим изображениям, спрайтам или даже UI - элементам.

Примеры анимаций

Здесь я прикреплю для вас несколько анимаций, которые мне удалось сделать со Squishy всего за 15 минут.

Я взял статичную картинку оленя, и попытался заставить его бегать)
Здесь используется статичная картинка молотка и всего две простых трансформации вперед и назад - всю остальную красоту за нас делает правильно подобранная интерполяция
Простенькая анимация загрузки из одного повторяющегося белого кружочка
Здесь я взял два отдельных изображения - крышки ящика и тела ящика, выставил у крышки origin в левый нижний угол и добавил две анимации поворота. Все остальное, опять же, делает интерполяция
Тут используются две картинки половинок ножниц, которые я соединил в одну анимацию
Интересный пример простой но приятной анимации для UI. Здесь использовались две картинки и три анимации (скейл на обоих картинках и  изменение прозрачности)

Вас заинтересовало?

Действительно ли Squishy поможет разработчикам игр или же им привычнее использовать полноценные редакторы анимаций - вопрос все еще открытый.

И за ответом на него я обращаюсь именно к вам - как вы думаете?

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

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

Пишите что думаете по этому поводу, а если попробовали утилиту, то обязательно дайте знать что вы о ней думаете и что бы вы хотели в ней изменить :)

Ну и ставьте реакции, если хотите, чтобы я продолжал развивать идею этого проекта и дальше.

Ссылка на Squishy:

22