Основы создания 2D персонажа в Unity 3D 4.3. Часть 1: заготовка персонажа и анимация покоя
Всем добрый день. В относительно недавно вышедшей Unity 4.3 появились инструменты для создания 2D игр. Конечно, такие игры можно было создавать и раньше, но это делалось при помощи дополнительных ухищрений (вот пример с хабра). Теперь же появилась поддержка 2D «из коробки». Надеюсь, разработчики продолжат ее развивать, а пока я хочу рассказать о некоторых приемах работы с новыми 2D инструментами.
Для основы урока я взял официальный видеоурок с сайта Unity3d.com. В нем создается анимированный управляемый 2D персонаж. Он может стоять, бегать, прыгать. Все это сопровождается соответствующими анимациями. Урок довольно длинный (почти полтора часа) и содержит немного «воды», поэтому я решил сделать некий текстовый перевод. В этой части речь пойдет о самых основах — создадим статичную платформу для нашего персонажа, самого персонажа, и сделаем персонажу анимацию покоя. Бег и прыжки рассмотрим позже, но основу для этого создадим сейчас. Все операции я постараюсь описывать подробно, но основные знания об интерфейсе Unity у вас должны быть. На том же официальном сайте Unity есть хорошие и быстрые уроки по интерфейсу.
Итак, начнем. Создадим новый проект в Unity. Выберем папку для расположения проекта, импортировать дополнительные пакеты не будем. Обязательно укажем, что мы создаем проект, настроенный на 2D игру (Setup defaults for: 2D).
Проект создан. В окне Project у нас должна быть одна папка — Assets. Давайте создадим в ней подпапку Sprites, где будем хранить спрайты — графические файлы, необходимые для отображения персонажей, фона, пола, бонусов и прочих игровых объектов. Нам нужен спрайт, для отображения платформы, по которой будет бегать наш персонаж. Для этого подойдет любое прямоугольное изображение. В конце поста я указал ссылку на архив со спрайтами, которые использовались в уроке. Это немного спрайтов из игры Capitan Claw. Файл спрайта платформы называется Platform.png. Скопируем его в папку Sprites. Теперь нам надо перетащить спрайт Platform на окно Scene. В нашем проекте есть камера с именем Main Camera. Она-то и будет отображать то, что мы видим в игре. Перетащим спрайт платформы так, чтобы она оказалась в нижнем углу поля зрения камеры (если кликнуть по камере, то внизу сцены появится окошко Camera Preview, по которому можно контролировать, что в данный момент видит камера). Unity автоматически создаст игровой объект с двумя компонентами — Transform и Sprite Render. Первый отвечает за положение нашей платформы, второй — за ее отрисовку. Но нам еще нужно, чтобы персонаж не падал сквозь эту платформу, поэтому добавим к объекту платформы компонент Box Collider 2D, из раздела Physics 2D. Итого, сейчас у нас должно быть что-то вроде этого:
Теперь займемся персонажем. Создадим пустой игровой объект (Game Object — Create Empty) и перетащим его так, чтобы он висел над левой частью платформы. Переименуем этот объект как Character и добавим к нему компонент Rigidbody 2D, для придания нашему персонажу физических свойств твердого тела. В компоненте Rigidbody 2D установим флажок Fixed Angle, чтобы предотвратить случайные вращения нашего персонажа, например, от столкновения с другими твердыми телами. Затем установим в поле Interpolate значение Interpolate. Документация Unity рекомендует устанавливать это значение для персонажей, управляемых игроком, особенно, если за ним следует камера. Это связано с синхронизацией расчета физики и отрисовкой графики. Подробности в документации.
Следующим шагом нам нужно добавить компонент Sprite Render, для отрисовки персонажа. Почему мы не можем просто перенести нужный спрайт, и получить автоматически сгенерированный Sprite Render, как в случае с платформами? Потому что наш персонаж, в отличии от платформ, будет отрисовываться не одним, а несколькими спрайтами, чтобы получился анимированный персонаж. Для этого нам придется выполнить ряд действий и первое из них — достать подходящие спрайтшиты (Sprite Sheet). Спрайтшит — это изображение, на котором содержаться кадры анимации для нашего персонажа. Думаю, ни для кого не секрет, что анимация — последовательное и быстрое отображение неанимированных кадров, каждый из которых немного отличается от предыдущего. Погуглите по запросу Sprite Sheet, и вы сразу поймете, что это такое. Нам нужны спрайтшиты для состояний покоя, бега и прыжка. В архиве со спрайтами есть файлы Idle.png, Run.png, и Jump.png. Скопируем их в папку Sprites. На данном этапе должно быть следующее:
Приступим к анимированию персонажа, а конкретно — к анимированию состояния покоя, когда персонаж просто стоит и ничего не делает. Точнее говоря, он ничего не делает с точки зрения игровой логики, но он может переминаться с ноги на ногу, моргать, делать жесты, показывающие, что ему скучно так просто стоять и так далее. Для анимации покоя нам понадобиться файл Idle из нашей папки Sprites. Выделим этот файл. В окне Inspector отображаются свойства этого файла. Свойство Texture Type задано как Sprite, и это то, что нам нужно, а вот значение свойства Sprite Mode надо изменить с Single на Multiple. Таким образом, мы указали, что файл играет роль не одиночного спрайта, а представляет собой коллекцию спрайтов. Однако, эту коллекцию еще надо инициализировать. Для этого чуть кликнем по кнопке Sprite Editor, которая находится все в том же окне Inspector чуть ниже свойства Pixels To Units. Откроется новое окно. В нем мы видим содержимое нашего спрайтшита для состояния покоя: несколько похожих друг на друга кадров. Нам нужно их нарезать на отдельные изображения. Для этого нажмем на кнопку Slice в левом верхнем углу окна. Во-первых, нам надо задать способ (Type) нарезки изображения: Grid или Automatic. Первый способ нарежет наше изображение сеточкой с настраиваемыми размерами ячеек (Pixel Size — X… Y. ). То есть, в этом режиме надо подобрать такие значения, чтобы все кадры нормально уместились в ячейках, чтобы ничего лишнего не было отрезано и т.п. Во втором режиме нарезка на кадры будет произведена автоматически. Сама нарезка произойдет после нажатия кнопки Slice. Попробуйте применить разные способы нарезки и посмотрите, что из этого получается. В случае с моим спрайтшитом нормально подходит способ Automatic. Даже если какой-то из кадров вышел немного неудачно — его можно отредактировать, кликнув по нему и изменив значения высоты/ширины/расположения и других параметров в соответствующем окне или при помощи мышки. Подтвердим нарезку нажатием на кнопку Apply в правом верхнем углу и закроем это окно.
Теперь нам надо найти наш импортированный файл 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 позволяет изменять положение объекта из самой анимации (что нам сейчас не нужно), а включенный флаг Anymate Physics задает выполнение анимации в цикле расчета физики, что как раз рекомендовано для движущихся твердых тел. Теперь создадим в папке 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 + видео
Доброго времени суток друзья, в этой статье я хочу показать вам, как использовать анимацию в Unity 5 при создании 2d игры.
Итак, начнем. Откроем Unity и создадим новый 2d проект
Далее создадим две папки с названием Sprite и Animation
В папку Sprite перенесем заранее подготовленный спрайт, у меня это будет такая «Птица», которая будет махать крыльями. Заметьте что на спрайте изображено 2 разные птицы , каждое изображение мы вырежем уже в Unity и будем использовать как кадры, ведь, по сути, анимация — это проигрывание некое количество кадров. Соответственно чем кадров будет больше – тем анимация будет выглядеть реалистичней, но пока остановимся на 2-х.
Перенесли спрайт и теперь выделим его. Справа появится его свойства. В свойствах нам пока понадобится только одно свойство Sprite Mode. Установим режим Multiple, так как наше изображение имеет несколько элементов, и нажмем кнопку Apply.
Далее, для того чтобы разделить наш спрайт на несколько элементов перейдем в редактор спрайта Sprite Editor в том же свойстве этого спрайта.
Перед нами откроется редактор, в котором мы просто выделяем наши 2 элемента по отдельности.
Примечание. Старайтесь выделять элементы одного размера, чтобы при проигрывании анимации картинка не прыгала из-за не точных расположений.
Вырезали элементы и далее просто закрываем редактор, на что он спросит вас сохранить изменения или нет.
Итак, наша птица готова, переходим к анимированию. Перенесем спрайт на сцену и Unity спросит у нас куда сохранить файл .anim, в котором будут хранится все последующие анимации данного объекта. Выберем папку Animation и сохраним туда этот файл.
Далее на сцене выберем нашу «Птицу» и откроем для нее новое окно Animation во вкладке Window.
В окне создания анимации выберем наш файл Ptica.anim и создадим новую анимацию Create a new Clip…
Когда наша новая анимация будет выбрана, рядом в параметре Sample укажем количество кадров 2 , так как у нас всего 2 элемента Спрайта.
Затем перенесем наши 2 элемента в окно редактора анимации, нажмем кнопку записи и кнопку Play.
На этом окно редактора анимации можно закрыть. Если вы запустите игру сейчас, то увидите что наша птица начала махать крыльями. Но, на мой взгляд, скорость анимации очень велика. Ее можно отредактировать.
Перейдем в папку Animation и откроем файл Ptica.anim
Здесь вы увидите все те анимации, которые будут использовать наш объект. Для изменения скорости выделим анимацию, которая проигрывается первая по умолчанию (она будет оранжевым цветов) и справа в окне свойства анимации изменим параметр Speed на другое значение.
Теперь при запуске игры птица выглядит более реалистичней (конечно не на сто %, но мне нравится). Далее можно создать скрипт, который будет двигать нашу «Птицу» в каком-нибудь направлении, но об этом в других уроках. Удачных проектов!
Руководство для начинающих по созданию 2D-анимации в Unity
Считается, что приложение Unity — наиболее подходящий инструмент ля создания анимированных 3D-игр. Однако приложение также позволяет создавать 2D-анимации.
В руководстве собраны последовательные инструкции по началу работы с Unity для создания 2D-анимацией и добавления элементов в вашу игру.
В этой статье
Часть 1 Можно ли использовать Unity для создания 2D-анимации?
Во-первых, разберем главный вопрос: «Можно ли использовать Unity для создания 2D-анимации?». Да! Unity — полнофункциональное игровое приложение, которое разработчики/дизайнеры могут использовать для создания потрясающих 2D-анимаций. Приложение поддерживает специальные 2D-пакеты со всеми необходимыми высококачественными элементами — это наиболее рекомендуемый инструмент для создания игровых анимаций в Unity.
Важно отметить, что для каждого объекта вам придется разделять каждый уровень листов спрайтов для настройки 2D-анимации. Пользователям также доступны альтернативные пакеты 2D-анимации для установки. Последние версии Unity также предлагают специальную библиотеку спрайтов, облегчающую управление и работу с листами.
Библиотека спрайтов 2D-анимации Unity исключает проблемы в работе над анимацией. Дизайнеры получают возможность с легкостью управлять десятками анимационными 2D-объектами. Редактор спрайтов поможет управлять движениями объектов для создания более плавной анимации. Выделяя главное, Unity — программное обеспечение, позволяющее создавать 2D-анимацию для видео или специальной мобильной игры.
Часть 2 Как создать 2D-анимацию в Unity?
Первый шаг в разработке 2D-анимации с Unity — создание выделенного листа спрайтов. Вам доступно множество сторонних программ для создания листа спрайтов. Выбор приложения зависит от проекта и личных предпочтений самого дизайнера. Однако, какой бы инструмент вы ни использовали для создания спрайтов, убедитесь, что конечное изображение представляет собой PNG-файл без фона, что облегчит работу в Unity.
После успешного создания спрайтов (изображения с прозрачным фоном) необходимо импортировать файл в Unity. По окончанию импорта обязательно создайте отдельную папку спрайтов, чтобы быстрее найти файл в будущем и организовать данные. Кроме того, выделенная папка спрайтов позволит с легкостью проверять каждый файл.
Приложение также поддерживает настройку при импорте 2D-анимации в Unity, которую вы можете использовать для создания наиболее подходящего игрового дизайна. Рекомендуем сохранить размер пикселей на единицу ваших визуальных компонентов. Так, вы поддержите визуальную согласованность элементов, а проект будет выглядить лучше.
Обязательно переключитесь в режим «Редактор спрайтов». Редактор позволяет улучшить изображение с управлением общими настройками и движением каждой анимации. В окне спрайтов также доступны параметры нарезки с функцией сохранения данных готового изображения.
Далее вы можете перейти к созданию 2D-анимации в Unity. Воспользуйтесь вкладками «Анимация» и «Аниматор» на панель редактирования UnityParts. К опциям также поможет перейти функция «Windows» на вашем экране.
Готово! На вашем экране появится панель редактирования на основе временной шкале. Пришло время анимировать каждый объект проекта. Изменения напрямую зависят от ваших персональных игровых требований. Не бойтесь творить, пробовать различные элементы Unity, чтобы оживить ваши 2D-анимации.
Часть 3 Создание 2D-анимации для ваших видео — эффективное решение для видеоредакторов
Говоря о создании 2D-анимации для видео, Unity — не самое подходящее приложение. Дело в том, что приложение нацелено на создание анимационных объектов для игр. Более того, в программе действительно сложно разобарться новичкам и обычным пользователям.
Итак, видеоредактором Wondershare Filmora — альтернативное приложение для создания 2D-анимации к видео. Многофункционально программное обеспечение для редактирования видео, специально разработано для редактирования высококачественных видеороликов. Не важно, создаете ли вы видео на YouTube или редактируйте ролик для клиентов, Wondershare Filmora поможет реализовать вашу творческую задумку.
Filmora поддерживает встроенную медиатеку с шаблонами анимаций, а также видеоэффектов. Вы можете импортировать любую анимацию в свое видео одним щелчком мыши, улучшить качество видео и увеличить количество просмотров. Настройки помогут подготовить анимацию именно к вашему проекту. Более того, в программе доступен медиаплеер со звуковыми эффектами для ваших уникальных роликов.
Наконец, ПО поддерживает множество расширенных функций редактирования: создание ключевых кадров, обнаружение движения и редактирование хромакея. Инструменты ускоряют вашу работу над проектом, позволяют создать более эффективный и качественный ролик для привлечения зрителей.
Для Win 7 и более поздней версии (64-бит)
Для macOS 10.12 и более поздней версии
Несколько основных инструментов надежного ПО Filmora, включают:
● Тысячи аннимационнх шаблонов и видеоэффектов для ваших проектов
● Простая в использовании панель редактирования на основе временной шкалы
● Уникальный аудиоредактор для управления качеством звука
● Кроссплатформенная поддержка
Итак, если вы также планируете выложить масштабное видео для YouTube или любой другой платформы, добавив несколько анимационных элементов, воспользуйтесь инструкциями из нашей статьи!
Главное из статьи
●Unity позволяет создавать 2D-анимации, однако необходимо обладать определенным уровнем знаний в области разработки игр программе.
● Для создания 2D-анимации Unity необходимо создать листы спрайтов, а затем импортировать файлы в Unity для добавления эффекта движения.
● Обычные пользователи, редакторы и новички в области 2D-анимации видео доступно многофункциональное программное обеспечение Wondershare Filmora Pro для выполнения любых задач.