The Sharpest One #2 | Бандиты и анимации

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

В этой статье, я расскажу то, как продвигается работа над артом нашей игры The Sharpest One.

Для Pixel Art'а я использую Aseprite. Уверен, что он многим известен, кто хоть когда-то рисовал пиксельку. Aseprite специально заточен под этот стиль. Он пользуется большой популярностью и его используют многие инди-разработчики.

Сам по себе он платный, но исходный код опубликован на Github. Поэтому кто угодно может его скомпилировать и пользоваться на здоровье, а так уже готовый билд можно купить в Steam. Так я и сделал :D

В бете Aseprite 1.3., к слову, находится очень классный функционал для работы с Tilemap'ами. С нетерпением жду релизной версии!

Cуществует, кстати, его форк под названием LibreSprite. Он полностью бесплатный и опенсорсный. Имеет тот же основной функционал, что и оригинал.

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

Начну с простого — с бандитов...

Для начала я срисовал фигуру главного героя для того, чтобы на её основе сделать фигуру будущих бандитов.

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

P.S. Хотя сейчас пришла идея немного поиграться с пропорциями: изменить размер головы или рук. Напишу потом по этому поводу :D

Вот что получилось:

Далее я начал просто рисовать разные варианты бандитов. Потом итерировался на самых интересных из них, комбинировал фишки между каждыми вариантами и в итоге, вот как это выглядело:

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

Но этого было не достаточно и поэтому я решил вообще убрать плащ и добавить больше МЕТАЛЛАА, кхм, извините. Добавить больше брони. Сначала я убрал плащ полностью, но потом всё-таки оставил его. Сделал его больше похожим на какое-то рваньё. Ведь в этом обычно ходят фентезийные бандиты, да?

Далее прошёл день и я снова глянул на рефы и мне пришла идея сделать вариант с таким колпаком, как у одного из персонажей в Dark Souls 3.

Мне эта идея показалась классной и вот что получилось:

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

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

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

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

Хочу оговориться, что всё это не конечный вариант и я 100% буду ещё итерироваться над этими персонажами.

Я хотел сделать так, чтобы персонаж не просто бил и проигрывалась анимация атаки, а чтобы анимация менялась в зависимости от того, сколько раз он нажал и как он нажал на кнопку (т.е. происходила "комбо-атака").

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

Она разделена на три фазы:

В итоге, вот как выглядит каждая фаза:

В момент, когда я решил попробовать протестировать эту анимацию в движке (а используем мы Unity), то появилась одна проблема. Расскажу о ней по-подробнее...

Далее пойдет разговор сугубо о движке Unity и проблеме 2D анимирования.

UPD: в комментах привели то как можно справится с этой проблемой. Оказывается мне надо лучше читать документацию 😅

Для тех, кто делает 2D, и даже 3D, в Unity не секрет, что использование стандартной стейт-машины Animation Controller может привести примерно к следующему:

В нашем проекте такого большого количество переходов и анимаций пока нет, но всё шло именно к такой "паутине". Имея 4 анимации (бег, стояние на месте, прыжок и падение) уже начинались первые проблемы с положением состояний графа в более или менее нормальном виде. А добавляя ещё одну анимацию (анимацию легкой атаки), приходилось ещё больше парится со связями. Да, есть блок "Any State", но он не сильно помогал.

С одной стороны, если у тебя немного анимаций, а переходы между ними просты, то можно просто пользоваться Animation Controller'ом. Однако, Animation Controller не предназначен для 2D. Все эти параметры, как "время перехода между анимациями", Blend'ы и так далее — они не нужны для покадровой анимации.

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

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

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

И вот к чему я пришел...

Вдруг я вспомнил об одном англоговорящем разработчике, который ведет свой блог на YouTube. Он тоже столкнулся с этой проблемой и решил попробовать разобраться с ней самостоятельно. В итоге он сделал пакет под названием Reanimation.

Прочитав описание пакета, пересмотрев его видео и потестив демку я понял, что это, в теории, может подойти для "The Sharpest One".

Суть Reanimator'а в том, что он использует не обычный граф, как стандартный Animator, а древовидный граф. Граф состоит из переключателей ("Switch") и самих анимаций (листья древа). Switch в соответствии с текущими параметрами, которые называются "Driver", меняет текущие анимации.

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

Не могу сказать, что я до конца понял принцип работы Reanimator. Мне предстоит ещё долго играться с этой системой, но, как мне кажется, сама идея интересна и тот результат, который получается, мне очень нравится. Вот как это выглядит в Astortion — проекте автора Reanimation. Следите за положением ног:

По словами автора, Reanimation находится в сыром состоянии. В нём также отсутствует графический редактор. Настраивать анимации приходится в инспекторе ScriptableObject'ов.

Следующее, над чем я буду работать — это Reanimation. Попробую сделать для него простенький визуальный редактор с помощью xNode. Это легковесный пакет для отрисовки графов в редакторе Unity.

Я новичок в Pixel Art'е. До этого я ограничивался размером 16х16 и 4-мя или 6-ю фреймами в анимациями. Буду очень рад вашему фидбеку.

Если вы работали c аниматором Unity — напишите, были ли у вас с ним проблемы.

Постараемся выпустить новый девлог как можно скорее. А на этом у меня всё. Спасибо вам за внимание и до встречи в следующих девлогах!

P.S. Кстати, наш ГД и сценарист Никита завтра сдаёт ЕГЭ (15.06). Пожелайте ему удачи, а также остальным членам команды, которые сейчас сдают летнюю сессию ^_^

Пис ✌

Наша группа ВК

#девлог #TheSharpestOne #TSO

#pixelart #pixel