заготовка персонажа и анимация покоя / Хабр
Часть 1: заготовка персонажа и анимация покоя
Часть 2: бегущий персонаж
Часть 3: прыжки (и падения)
Всем добрый день. В относительно недавно вышедшей Unity 4.3 появились инструменты для создания 2D игр. Конечно, такие игры можно было создавать и раньше, но это делалось при помощи дополнительных ухищрений (вот пример с хабра). Теперь же появилась поддержка 2D «из коробки». Надеюсь, разработчики продолжат ее развивать, а пока я хочу рассказать о некоторых приемах работы с новыми 2D инструментами.
Для основы урока я взял официальный видеоурок с сайта Unity3d.com. В нем создается анимированный управляемый 2D персонаж. Он может стоять, бегать, прыгать. Все это сопровождается соответствующими анимациями. Урок довольно длинный (почти полтора часа) и содержит немного «воды», поэтому я решил сделать некий текстовый перевод. В этой части речь пойдет о самых основах — создадим статичную платформу для нашего персонажа, самого персонажа, и сделаем персонажу анимацию покоя.
Итак, начнем. Создадим новый проект в Unity. Выберем папку для расположения проекта, импортировать дополнительные пакеты не будем. Обязательно укажем, что мы создаем проект, настроенный на 2D игру (Setup defaults for: 2D).
Проект создан. В окне Project у нас должна быть одна папка — Assets. Давайте создадим в ней подпапку Sprites, где будем хранить спрайты — графические файлы, необходимые для отображения персонажей, фона, пола, бонусов и прочих игровых объектов. Нам нужен спрайт, для отображения платформы, по которой будет бегать наш персонаж. Для этого подойдет любое прямоугольное изображение. В конце поста я указал ссылку на архив со спрайтами, которые использовались в уроке. Это немного спрайтов из игры Capitan Claw.
Теперь займемся персонажем. Создадим пустой игровой объект (Game Object — Create Empty) и перетащим его так, чтобы он висел над левой частью платформы.
Переименуем этот объект как Character и добавим к нему компонент Rigidbody 2D, для придания нашему персонажу физических свойств твердого тела. В компоненте Rigidbody 2D установим флажок Fixed Angle, чтобы предотвратить случайные вращения нашего персонажа, например, от столкновения с другими твердыми телами. Затем установим в поле Interpolate значение Interpolate. Документация Unity рекомендует устанавливать это значение для персонажей, управляемых игроком, особенно, если за ним следует камера. Это связано с синхронизацией расчета физики и отрисовкой графики. Подробности в документации.
Следующим шагом нам нужно добавить компонент Sprite Render, для отрисовки персонажа. Почему мы не можем просто перенести нужный спрайт, и получить автоматически сгенерированный Sprite Render, как в случае с платформами? Потому что наш персонаж, в отличии от платформ, будет отрисовываться не одним, а несколькими спрайтами, чтобы получился анимированный персонаж.
Для этого нам придется выполнить ряд действий и первое из них — достать подходящие спрайтшиты (Sprite Sheet). Спрайтшит — это изображение, на котором содержаться кадры анимации для нашего персонажа. Думаю, ни для кого не секрет, что анимация — последовательное и быстрое отображение неанимированных кадров, каждый из которых немного отличается от предыдущего. Погуглите по запросу Sprite Sheet, и вы сразу поймете, что это такое. Нам нужны спрайтшиты для состояний покоя, бега и прыжка. В архиве со спрайтами есть файлы
Приступим к анимированию персонажа, а конкретно — к анимированию состояния покоя, когда персонаж просто стоит и ничего не делает. Точнее говоря, он ничего не делает с точки зрения игровой логики, но он может переминаться с ноги на ногу, моргать, делать жесты, показывающие, что ему скучно так просто стоять и так далее. Для анимации покоя нам понадобиться файл Idle из нашей папки Sprites.
Выделим этот файл. В окне Inspector отображаются свойства этого файла. Свойство Texture Type задано как Sprite, и это то, что нам нужно, а вот значение свойства Sprite Mode надо изменить с Single на Multiple. Таким образом, мы указали, что файл играет роль не одиночного спрайта, а представляет собой коллекцию спрайтов. Однако, эту коллекцию еще надо инициализировать. Для этого чуть кликнем по кнопке Sprite Editor, которая находится все в том же окне Inspector чуть ниже свойства Pixels To Units. Откроется новое окно. В нем мы видим содержимое нашего спрайтшита для состояния покоя: несколько похожих друг на друга кадров. Нам нужно их нарезать на отдельные изображения. Для этого нажмем на кнопку Slice в левом верхнем углу окна. Во-первых, нам надо задать способ (Type) нарезки изображения: Grid или Automatic. Первый способ нарежет наше изображение сеточкой с настраиваемыми размерами ячеек (Pixel Size — X… Y.
..). То есть, в этом режиме надо подобрать такие значения, чтобы все кадры нормально уместились в ячейках, чтобы ничего лишнего не было отрезано и т.п. Во втором режиме нарезка на кадры будет произведена автоматически. Сама нарезка произойдет после нажатия кнопки
Теперь нам надо найти наш импортированный файл Idle в окне Project. В правой части файла есть треугольник (или в левой, при самом мелком мастабе значков). Кликнув по треугольнику, мы развернем коллекцию изображений, полученных в результате нарезки.
Они будут иметь имена Idle_0, Idle_1 и т. д. Теперь в окне Hierarchy выберем наш Character, и перетащим изображение Idle_0 в поле Sprite компонента Sprite Render. Наш персонаж отобразиться на сцене. Если он получился маленьким — можно увеличить его размеры до необходимых. Вот так:
Давайте сразу добавим к нашему персонажу компонент Box Collider 2D, что не проваливаться сквозь платформу. При этом откорректируем размеры и местоположение коллайдера так, чтобы он не был слишком большим и располагался на уровне ног персонажа. Этого достаточно, чтобы персонаж не падал сквозь платформу. Можете запустить игру и проверить.
Вернемся к анимации покоя. Для этого добавим к нашему Character еще один компонент — Animator (раздел Miscellaneous). Изменим некоторые его свойства — снимем флаг с Apply Root Motion и установим флаг Anymate Physics. Apply Root Motion позволяет изменять положение объекта из самой анимации (что нам сейчас не нужно), а включенный флаг
Теперь создадим в папке Assets файл Animator Controller. Назовем его CharacterController. В окне Hierarchy выделим нашего персонажа Character и перетащим CharacterController в поле Controller компонента Animator:Кликнем дважды по CharacterController — откроется новое окно Animator. В нем мы будем создавать различные состояния анимации (покой, бег, прыжок) и задавать условия перехода между ними. Для создания непосредственно анимаций нам нужно окно Animation. Если оно у вас еще не отображается его можно включить из главного меню Unity (Window — Animation). Теперь выберем нашего персонажа Character
в окне Hierarchy, а в окне Animation нажмем кнопку для создания новой анимации и выберем Create New Clip. На скриншоте ниже я отметил эту кнопку красной окружностью:В стандартном диалоге сохранения файла сперва создадим папку Animations, а в нее сохраним наш файл анимации, назвав его Idle.
После сохранения, в окне Animator появится наша анимация Idle в виде прямоугольника оранжевого цвета. Оранжевый цвет означает, что это будет анимация по умолчанию — как раз то, что нам сейчас нужно.
Осталось всего пара шагов. Переходим в папку Sprites, разворачиваем спрайт Idle, выделяем первое изображение Idle_0, зажимаем шифт и выделяем последнее изображение Idle_7. Все выделенные изображения переносим мышью на окно Animation. Зададим значение Sample равное 10 — этот параметр означает количество кадров анимации в секунду. Как известно, для хорошей анимации необходимо, чтобы она отображалась со скоростью не менее 24 кадров в секунду, однако, в нашем случае анимация состоит из довольно маленького числа кадров и при значении 24 она будет отображаться слишком быстро.
Запустим игру! Если все сделано правильно, наш Капитан Коготь должен стоять на платформе, дышать, и вилять хвостом.
На этом пока все.
В следующий раз поговорим о реализации бегущего вправо-влево персонажа и соответствующей анимации.
Ссылка на спрайты.
Как с нуля собрать 2D персонажа и оживить его в Unity. Часть 1
Павел Попов — Senior Unity Developer в команде NIX. В течение восьми лет он взаимодействует с архитектурой проектов и сетевой составляющей, а также периодически делает инди-игры. Знаком со стеком разработки с нуля, включая наброски картинок. Для ArtCraft Media Павел написал подробный туториал о том, как создать и анимировать 2D персонажа с помощью Unity 2020 LTS и пакетов PackageManager.
Почему Unity?
Выбор пал на эту технологию потому, что в ней у меня больше опыта. Средства Unreal Engine, например, лучше всего использовать в 3D-разработке. Godot вполне в силах потягаться с Unity, но там еще есть нюансы с производительностью и стабильностью. Adobe Animate или Toon Boom Animation — для тех, кто рисует покадрово, например, для художников и профессиональных аниматоров.
Мы же нацелены на автоматизацию, и применение этих анимаций в играх или кат-сценах. Так мы сможем управлять широким спектром составляющих картины, не прибегая к прорисовке каждого кадра, а используя сам движок и наработки: освещение, эффекты, симуляции боев и тому подобное.
Пока еще на Unity из коробки проще выдать хороший результат. Разработчики регулярно обновляют пакеты с исходниками, и дают возможность кастомизировать продукт под себя.
Сейчас мы создадим готового к анимации персонажа средствами Unity из картинки, разбитой на части. Освоив описанные ниже инструменты, ты сможешь оживить любую картинку, привести в нужный вид персонажа и также оживить его. Кроме того, в будущем ты будешь гораздо точнее ставить задачи художникам. Итак, погнали!
Начальная настройка Unity
Поставив 2D PSD Importer, за ним подтянется 2D Animation, который нам понадобится для инверсной кинематики (далее IK). Далее все, что нам нужно — правильно настроенный арт, и здесь есть свои тонкости.
Возьмем для наглядности программу Gimp (последующие действия идентичны для Photoshop).
Используемые пакеты (Окно PackageManager (Windows->PackageManager). Источник: личный архив автора
Разбиваем персонажа на слои в Gimp (или Photoshop)
Арт с сайта «порезал» художник-любитель. В файле учитывается приоритет по слоям — какой будет выставлен в Gimp, такой же будет на Unity сцене. Изменения можно будет проводить только в самих объектах или в исходнике. Зачеркнутый/скрытый слой — это персонаж в сборе одной картинкой, чтобы точно собрать его по кусочкам. Далее скрываем этот слой, чтобы не импортировать по умолчанию (в настройках импорта Unity есть возможность включить в импорт скрытые слои, — прим. авт.).
Персонаж, разобранный по слоям в Gimp. Источник: личный архив автора
Если используешь Photoshop, выбери при экспорте формат .psb. Если Gimp, то экспортируем .psd, и потом вручную меняем формат файла на psb в проводнике.
Они отличаются большим объемом поддерживаемого разрешение вплоть до 300 000 x 300 000 в отличии от обычного .psd (30 000 x 30 000). Если кидать обычный формат (.psd), Unity его не увидит. Перейдем к самому интересному инструменту с пакета PSD Importer.
Настройка персонажа в Unity
Благодаря PSD Importer пакету мы видим дополнительные возможности — Secondary Textures. Они нужны, чтобы наложить дополнительные карты нормалей или высот, и сделать нашу картинку объемнее.
Выбираем нашего персонажа (Окно SpriteEdtior по клику на на файл персонажа.psb, youtubeIntro). Источник: личный архив автора
Накладывая нормаль, можно сделать имитацию углублений и выпуклостей без использования 3D, а лишь освещая поверхность. На этих инструментах я не буду подробно останавливаться, но пример может выглядеть вот так:
Результат — свет знает, как осветить sprite. Высоты и углубления знаем благодаря NormalMap.
Источник: личный архив автора
Идем дальше: проверяем, распознались ли все элементы в главном окне корректно, и можем переименовать или изменить pivot по необходимости. Теперь нас интересует Skinning Editor.
Окно Skinning Editor. Источник: личный архив автора
Полезные ссылки о PSD Importer о SkiningEditor. Рекомендую ознакомиться с примерами, если есть желание создать что то отличное от нашего персонажа, и чтобы понять разные стороны инструмента.
Оранжевым цветом на скриншоте подсвечено, какую панель стоит включить. С ее помощью мы правильно выложим наши кости, и она работает как стандартная иерархия объектов в Unity (Hierarchy — главная панель, переставления родительских объектов в дочерние, — прим. авт.).
Советую сразу именовать новосозданную кость в панели Visibility -> Bone (на скриншоте ниже выделено оранжевым).
Финальный результат настройки костей. Источник: личный архив автора
Нажимаем AutoGeometry для построения геометрии под каждый спрайт.
Это позволяет в тонкой настройке задать нужный Mesh Deformation. Убрав выделение с какого-либо спрайта, жмем AutoWeight.
Маловероятно, что тулза на 100% распознала все верно. Перейдем в детальные настройки. Первое, что нас интересует — какой спрайт и область привязалась к кости. Для этого открываем Bone Influence.
Bone Influence — настройка привязки костей к изображению и его областям. Источник: личный архив автора
В нашем случае будет достаточно того, чтобы одна кость управляла только одним спрайтом и всей его областью.
Примечание: есть более продвинутый режим — это, например, когда надо сделать, чтобы плащ был анимирован. Для этого вручную настроена сетка (вкладка Edit Geometry), и заданы несколько костей с областями с помощью инструмента Weight Brush. Но для первичного разбора нам достаточно правильно задать привязки костей к картинкам.
Когда мы уберем лишние кости, увидим, что вся область подсвечивается цветом этой кости.
Если что-то не так, перегенерируйте Weight (AutoWeights -> Generate).
Финальный результат настройки. Источник: личный архив автора
В случае правильной настройки костей к областям изображения (у нас же — ко всему слою картинки), переходим к настройке иерархии. На вкладке visibility мы видим финальный результат. Если у тебя было подобное наименование костей, ты легко можешь это проверить.
Примечание: Рекомендую для ног и рук сделать три кости, или позже добавить их в режиме префаба. Так нам будет проще с помощью LimbSolver 2D (из пакета 2D Animation — компонент инверсной кинематики, — прим. авт.) настроить конечности. Не забываем нажать Apply, перекидываем наш префаб в Unity:
Настроенный персонаж исходное состояние. Источник: личный архив автора
Выглядит уже интереснее, но что-то сильно много костей, и нужно нажимать на «родителей» кости, чтоб сдвинуть их так, как мы хотим. Тут на помощь приходят инструменты инверсной кинематики из пакета 2D Animation.
C их помощью мы настроим поведение всей руки или ноги одной финальной точкой. Пошаговая настройка и пример от самих Unity такого этапа есть по ссылке.
Настройка персонажа для анимации с помощью инверсной кинематики
Перед тем, как мы дополним персонажа элементами управления, нужна предварительная настройка. Создадим родительский объект для нашего героя и проверим, что у него нулевые координаты и стандартный масштаб равный одному:
Создание родительского объекта для персонажа. Источник: личный архив автора
Создаем префаб персонажа. У новой системы префабов Unity (начиная с версии 2018 года, — прим. авт.) есть некоторые особенности. Например, объект, который мы создали из ассета, не будет сохранять изменения. Даже если это исходник, как и любая 3D-модель. Поэтому для сохранения своих трудов рекомендую вкладывать подобные объекты в еще один родительский:
Исходный файл персонажа. Источник: личный архив автора
Далее добавляем четыре Limb Solver — это будут наши конечности.
И один ССD, так как у нас между головой и туловищем всего две кости. Здесь мы можем настроить точнее. Если нет желания заморачиваться, можно просто создать пустой объект (в нашем случае — вместо меча), и сдвинуть его, или вовсе учесть в настройках костей шагом ранее.
Примечание: CCD и FABRIK отличаются точностью и количеством проходов по иерархии. Рекомендую ознакомиться с документацией подробнее.
Добавляем Limb Solver. Источник: личный архив автора
Теперь именуем наши вновь созданные объекты, и создаем по одному простому GameObject под каждый. Желательно их тоже назвать, чтобы в дальнейшем не теряться. Устанавливаем Target в каждом созданном Solver — четыре Limb и один CCD.
Устанавливаем Target в дочерние объекты. Источник: личный архив автора
Теперь устанавливаем Effector-точку для каждого IK Solver:
ArmL Solver Setup. Источник: личный архив автора
Мы можем задать длину воздействия на потомков (выделено зеленым на скриншоте) до плечей, или в нашем случае до Roota.
Когда поднимем наши точки с пола, увидим, что пока не все так гладко.
Результат первичной настройки. Источник: личный архив автора
Здесь мы видим две проблемы. Во-первых, наши суставы смотрят не в ту сторону. Во-вторых, наш управляющий point направляет руки персонажа не туда, куда надо.
Для начала поправим положение рук. Для этого переходим в конечную иерархию в Sword. Наведя курсор между X и значением, появляется альтернативный курсор — <>. Кликаем и понемногу меняем положения так, чтобы наш меч лег в руку. Ту же операцию проводим и для координаты Y при необходимости.
Настройка IK. Источник: личный архив автора
Сделаем так с обеими руками. Если у тебя кости находятся последовательно друг за другом, с этой проблемой ты не столкнешься. Также удостоверимся, что родительский объект не имеет смещения:
Проверка на смещение управляющих точек. Источник: личный архив автора
Переходим к суставам. Для этого кликаем на Flip-настройку.
Этот инструмент вывернет сустав в нужную сторону. Здесь все зависит от первоначального скелета. В нашей ситуации имеем дело с ногами:
Настройка суставов. Источник: личный архив автора
Мы получили настроенного персонажа, которым можем управлять с помощью пятью точек. Также нам доступен Root, который не привязан к инверсной кинематике. Сдвигая его, мы можем менять положения тела, а наши IK Solver оставят конечности в той же позиции.
Финальный результат настройки. Источник: личный архив автора
В считанные секунды мы можем поставить нашего персонажа в нужное положение и быстро анимировать в среде Unity для игры или ролика.
В следующей части рассмотрим создание кат-сцены и то, как мы можем скомпозировать управление камерой, эффектами и уже настроенным персонажем в одном таймлайне с помощью Cinemachine Package.
Конструктор Персонажей Вектор Арт PNG Изображения
конструктор персонажей мультяшных девочек с жестами и эмоциями вектор
конструктор персонажей мультяшных мальчиков с частями тела и эмоциями лица вектор конструктор персонажей мультфильм анимация вектор
конструктор мужских персонажей мультфильм вектор
конструктор мужского персонажа мультяшный парень вектор
мультяшный мальчик конструктор персонажей вектор эмоций
конструктор персонажей счастливый мужчина женщина вектор
набор конструкторов мужских персонажей включает эмоциональные лица вектор
коллекция конструктора персонажей изолированный вектор позы
анимированный конструктор персонажей с сумками для покупок вектор
Superwomn Constructor Constructor Изолированный вектор
Конструктор символов для анимации вектор
Конструктор символов для анимирующих вектор
9конструктор символов набор векторных иллюстраций
конструктор мужских персонажей мультфильм анимация вектор
конструктор персонажей мужчина цвет кожи и мужской вектор
конструктор хипстерских персонажей с частями тела вектор
женский теннисист конструктор персонажей изолированный вектор
6 конструкторы очков векторконструктор мужского персонажа набор с жестами рук ноги стрижки борода изолированные на синем фоне 3d изометрическая векторная иллюстрация
Businessman Constructor Constructor Construction Vector
Хипстерский конструктор символов мультфильма с вектором тела
Профессиональный конструктор символов спортсмена.
Изолированный вектор. Структура характеристика. запасные головы вектор
хипстер мультипликационный конструктор персонажей разные головы вектор
конструктор персонажей для анимации вектора
конструктор персонажей для анимации вектора
большой набор изометрических голов рук ноги тела для конструктора мужских персонажей ноги волосы 3d изометрические изолированные векторные иллюстрации
мультяшный плоский бизнесвумен конструктор векторных персонажей с набором частей тела и различными жестами рук
дедушка и бабушка абстрактный конструктор персонажей векторная иллюстрация с частями человеческого тела
врач скорой медицинской помощи конструктор персонажей модный плоский вектор
спортсмен в спортивной одежде модный плоский векторный конструктор персонажей набор элементов дизайна
изометрический набор конструктора персонажей с мужскими головами, руками, ногами, телами, униформой и инструментами, изолированными на синем фоне мужчина рабочий персонаж конструктор композиция с изолированными элементами ноги руки и головы векторная иллюстрация
рождество собака конструктор персонажей собака на зимних праздниках вектор собачка в шапке санта клауса эмоции и выражение лица питомца в вязаном теплом свитере мешок с подарками и празднование подарков
конструктор персонажей мужского пола с различными прическами, жестами тела и аксессуарами для работы, изолированными на синем фоне 3d изометрическая векторная иллюстрация
конструктор персонажей рождественских эльфов с частями тела в праздничных костюмах и праздничными подарками набор изолированных векторных иллюстраций мультфильмов на белом фоне
шеф-повар с блюдом на белом фоне вектор
мультфильм деловых людей конструктор вектор
Game UI Kit Kit Wooden Panel Panel Vector
1000*581
Businessman персонаж Анимация Анимация Изолированный мужской вектор
СТАВОРИТЕЛЬНЫЙ СТУДЕНИЕ СТУДЕНИЯ СТАТЬ СТАЦИОНАЛЬНЫЙ СТАТЕРИЧЕСКИ вектор
Создатель персонажей 2d By Mochakingup
Creator 2d
9000Create и Custom -Mochakingup
.
Создатель символов 2D Функции:
- Создание 2D Humanoid символы
- ОБРАЗОВАНИЕ ОБОРУДОВАНИЯ
- Регулируемые ползунок для тела
- выражение лица/Эмоции
- Amporte Apport
- Apportion CREAR/EMOTIONS
- . собственные части и оборудование
Character Creator 2D поставляется в двух формах: Пакет Unity и Автономная версия .
PS. Вы получите доступ к обеим версиям, если купите на itch
PPS. Веб-версия (в которую можно играть выше) — это просто демоверсия с отключенной функцией сохранения
PPPS. Демонстрационная версия включает в себя все доступные дополнительные пакеты, которые вы можете попробовать.
Дополнительные сведения см. в разделе «Дополнительное содержимое» ниже. Форум Юнити | Документация
Character Creator 2D в основном разрабатывался для использования в Unity.
В Unity вы можете экипировать и раскрасить каждую часть во время выполнения. Пакет поставляется с пользовательским интерфейсом для создания и сохранения вашего персонажа в редакторе, или вы можете изменить и использовать пользовательский интерфейс для создания персонажа в своей игре.
Особенности Unity:
- Настройка персонажа во время выполнения
- Сохранить как готовый
- Сохранить как JSON
Автономный
Автономный форум| Документация
По многочисленным просьбам приложение Character Creator 2D также доступно как отдельное приложение. Который вы можете использовать без Unity.
Вы можете экспортировать своих персонажей в формате PNG либо в виде отдельного изображения, либо в виде анимированной последовательности.
Вы можете использовать экспортированные изображения в выбранном вами игровом движке, создать портрет/аватар своих персонажей или использовать их для создания персонажей для своей следующей кампании DND.
Дополнительный контент
Расширьте свои возможности с дополнительным тематическим контентом, который можно приобрести отдельно.
Базовые инструменты содержат только содержимое темы Base и Fantasy.
Вы можете попробовать и просмотреть весь дополнительный контент в веб-демонстрации выше!
Проверьте все доступные пакеты здесь
Для отдельных дополнительных пакетов установите или поместите файлы в папку «Пакеты» в вашей установке Character Creator 2D.
Если вам нужны нестандартные и/или уникальные детали для Character Creator 2D, свяжитесь с нами, чтобы узнать цену.
Лицензия
Приобретая CC2D (Character Creator 2D), вы получаете право использовать персонажей, изображения и анимации, включенные/созданные с помощью CC2D, в некоммерческих и/или коммерческих проектах.
Изолированный вектор