Покадровая спрайтовая 2д анимация в Unity
В Unity, как и во многих других движках существует несколько видов анимации. Но в данной статье речь пойдёт о покадровой спрайтовой анимациии. Это именно та анимация, которая присутствовала в играх на наших игровых приставках, и к которой все привыкли. Суть спрайтовых анимаций заключается в быстрой смене готовых кадров, которые создают эффект анимации.
В данной статье мы разберём анимацию на примере трёх самых популярных состояний в 2д платформере:
- Состояние покоя
- Бег, или ходьба
- Прыжок
Подготовка кадров
Первым делом нам необходимо загрузить в окно Project спрайты для наших анимаций. На изображении ниже, я загрузил все необходимые кадры анимаций в три спрайта для каждого состояния(покоя, прыжок, бег). Вы можете все кадры использовать отдельными спрайтами, а можете сгруппировать как у меня. Это впринципе не важно.
Создание Анимации (Animation)
Теперь нам необходимо каждое из состояний анимировать. Для этого открываем окно Animation, с помощью вкладки Window — Animation — Animation. Откроется данное окно.
Благодаря этому окну, мы и будем превращать наши кадры в анимацию. Для этого выбираем игровой объект, который анимируем, в нашем случае это персонаж с именем Player. А далее нажимаем кнопку Create, которая изображена на рисунке выше. Далее откроется окно, в котором необходимо указать название для нашей первой анимации покоя. Назовём её idle. Готово, наша анимация создана, но пока она ещё пустая, и не имеет никаких кадров.
Важно №1. После создания ПЕРВОЙ анимации, автоматически создаётся и контроллер анимаций(Animator), с таким же названием, как и у объекта, которому мы и создаём анимацию. В моём случае название аниматора будет Player. Контроллер анимаций хранит ВСЕ состояния анимаций данного объекта(покой, бег, прыжок), и благодаря ему происходит смена этих состояний анимаций с одной на другую. На рисунке у нас создана пока ещё пустая анимация покоя idle, и контроллер анимаций Player.
Важно №2. Так же, после создания первой анимации, в Inspector-е данного объекта создаётся и компонент Animator, который несёт в себе ссылку на наш контроллер анимаций. Благодаря этому компоненту мы и будем в дальнейшем через скрипт C# менять состояния анимаций с одной в другую.
Перейдём к окну Animation. Перенесём наши спрайты из окна Project, в пустое пространство окна Animation. После нажатия клавиши «пробел«, Вы можете обнаружить, что ваш персонаж на игровой сцене начинает анимироваться.
Скорее всего смена кадров у Вас происходит очень быстро, и чтобы исправить эту проблему, необходимо ЛИБО вручную увеличить расстояние между Вашими кадрами, ЛИБО снизить частоту кадров в секунду. Обычно используют второй вариант.
Для этого открываем меню в правом верхнем углу(три точки), и ставим галочку на Show Sample Rate. А дальше снижаем значение кадров в поле Samples, например, до 12.
Отлично. Анимация состояния покоя idle готова! Теперь создадим вторую анимацию, бег. Для этого в окне Animation жмём треугольничек, напротив названия Вашей анимации, и в выпадающем списке жмём Create New Clip. После чего прописываем название Вашей анимации бега, например run, и сохраняем.
После чего была создана новая и пустая анимация бега. Теперь всё так же как и в предыдущем примере, перетаскиваем кадры бега в окно Animation, уменьшаем количество кадров, и всё. Таким же образом создаём анимацию прыжка, с названием, например, jump.
После всех проделанных манипуляций, у нас должно получится 3 анимации(idle, run, jump) и один контроллер(Animator) Player.
Контроллер Анимаций (Animator)
Теперь поработаем с контроллером анимаций. Открываем наш контроллер либо через вкладку Window — Animation — Animator, либо кликнув 2 раза по нашему аниматору Player в окне Project. Откроется окно Animator, которое будет выглядеть примерно так.
Для начала обратим своё внимание на зелёный блок Entry, это начальная точка аниматора. А оранжевая стрелочка, которая исходит от блока Entry указывает на стартовую анимацию, которая будет воспроизведена сразу после запуска сцены. С помощью таких стрелочек, нам нужно указать все возможные переходы от одних анимаций к другим.
Например, от состояния покоя idle анимация может быть переключена на анимацию бега run. И это нам нужно указать через стрелочки. Для этого правой кнопкой мыши нажмём на анимацию idle. Далее в выпадающем списке жмём Make Transition, и далее указываем к какому блоку будет вести стрелочка. Укажем на блок run. Ура, стрелочка прехода создана. Создаём такие же стрелочки и между другими анимациями. У Вас должно получится так:
Так же обратите внимание на блок Any Stay, что означает Любое Состояние. Например, чтобы не создавать много стрелочек от множества анимаций к анимации jump, можно сделать всего одну стрелочку от Any State. Это будет тоже самое.
Теперь настроим наши переходы. Для этого жмём на любую БЕЛУЮ стрелочку, и в окне Inspector проводим следующие настройки:
- В поле Has Exit Time убираем галочку, чтобы анимация прерывалась сразу же, как произойдёт смена анимаций на другую.
- В поле Transition Duration указываем значение 0, чтобы переход между анимациями был не плавный, а мгновенный.
Такие же настройки нужно проделать со ВСЕМИ БЕЛЫМИ стрелочками.
Готово! Теперь необходимо создать условия, при которых будет осуществляться переход из одной анимации к другой. Для этого создадим две переменные. Одна переменная будет хранить информацию о том, бежит ли наш персонаж — если да, то будем воспроизводить анимацию бега. А вторая переменная будет хранить информацию о том, находится ли наш персонаж в прыжке — если да, то воспроизводим анимацию прыжка.
Создадим эти две переменные с названиями moveX и Jumping с типами Float и Bool соответственно. Для этого в этом же окне выбираем Parametrs, жмём на плюсик, и выбираем тип. Далее указываем название этих переменных.
Переменные созданы, теперь необходимо создать 5 условий перехода, для каждой белой стрелочки. Приведу пример, как создать условие перехода с idle на run. Для этого жмём на белую стрелочку перехода между этими анимациями, и в окне Inspector находим отдел Conditions, в котором указываем, что переход осуществляется тогда, когда переменная moveX имеет значение больше чем 0.1 — то-есть находится в движении по оси X:
По такой же примеру необходимо создать ещё 4 условия для остальных белых стрелочек перехода.
- От run к idle: переменная moveX имеет значение меньше чем 0.1
- От Any State к jump: переменная jumping имеет значение true.
- От jump к idle: переменная jumping имеет значение false.
- От jump к run: переменная jumping имеет значение false.
Запуск анимаций через скрипт
Мы почти завершили. Отсалось совсем немного. Теперь нам необходимо в эти переменные занести данные из нашего скрипта C#, во время передвижения персонажа и прыжка.
Для этого откройте свой C# скрипт, в котором прописана ваша функция передвижения персонажа, и для начала объявите переменную anim, в котором будет хранится ссылка на наш контроллер.
public Animator anim;Далее в методе Start() или Awake() присвоим ссылку к нашей переменной:
anim = GetComponent();Отлично, теперь с помощью метода SetFloat() установим нашей переменной moveX значения полученное от нашего передвижения Mathf.Abs(Input.GetAxisRaw(«Horizontal»)) по модулю:
anim.SetFloat("moveX", Mathf.Abs(Input.GetAxisRaw("Horizontal")));Теперь как только персонаж начнёт своё движение, будет воспроизведена анимация бега. А если персонаж остановится, то анимация бега перейдёт в состояние покоя.
Теперь работа с прыжком:
В вашем скрипте должна быть переменная, которая отвечает за то, находится ли персонаж на земле или нет. У меня эта переменная называется isGround. Необходимо проверять, если персонаж на земле, то в переменную Jumping заносим false, и анимация прыжка не воспроизводится. А если персонаж находится не на земле, то нужно в переменную Jumping записать true — которая и воспроизведёт анимацию прыжка:
if(isGround) < anim.SetBool("Jumping", false); >else
На это всё! Поздравляем, анимация готова.
Важно: В некоторых случаях, в зависимости от анимации прыжка, нам необходимо отменить циклическое воспроизведение анимации прыжка. Поэтому нажмите на стрелочку, исходящую от Any State ведущая к jump, и в окне Inspector в поле Can Transition To поставьте галочку.
Теперь уже точно всё! Надеюсь мне получилось объяснить принцип создания спрайтовой покадровой анимации. Так же напомню, что существует так же и костная анимация, которая так же довольно часто используется. Поэтому, если Вам интересна данная тема, то можете посетить наш гайд по созданию костной 2д анимации.
Если возникли вопросы, задавайте их в комментариях. И не забудьте поставить лайк за столь большой труд 🙂
Как сделать анимацию 2D персонажа в Unity 5
В сегодняшнем уроке мы разберем, как сделать анимацию 2D персонажа в Unity 5. Продолжим мы с предыдущего урока, на котором остановились. Для начала нам необходимо навесить на нашего персонажа компонент Animator, а так же в папке, в которой хранится информация о данном объекте (желательно хранить информацию об объектах структурированно, чтоб не запутаться) создать ПКМ -> Create -> Animator Controller и соединить её со св-вом Controller в Animator у персонажа.
На данный момент к нашему персонажа привязан его контроллер, по которому он будет выбирать себе анимации. Для того, чтоб у персонажа была анимация необходимо несколько последовательных спрайтов персонажа в различных положениях, которые мы будем чередовать последовательно.
Создадим в папке с аниматором еще 4 Animation, и переименуем их соответствующе сторонам передвижения UpAnimation, DownAnimation, LeftAnimation, RightAnimation. Откроем наш Animator Controller (Я его переименую в PlayerAnimator). Перед нами будет такое окно:
Выделив все 4 анимации перенесем их в темную зону. Появятся 4 новых элемента, кликнув на один из них и перейдя в окно Animation(либо открыв через Window -> Animation) мы попадем в окно управления этой анимацией. Желательно это окно удобно расположить, чтоб в быстрой доступности была вкладка Scene и Inspector (для этого я выношу его в отдельное окошко).
Красная полоска справа отвечает за то, в какой момент времени произайдет определенное действие. А Samples — отображает кол-во кадров. Увеличение этого числа увеличит скорость анимации. Я поставлю себе 30 кадров.
Теперь при нажатии на красный кружок Unity начнет записывать ваши действия относительно объекта (не забудте его выбрать на сцене), на который навешан аниматор с данной анимацией (кнопки управления сверху меняют свой цвет для того, чтоб не забыть выключить запись). Нам необходимо только менять 2D спрайты нашего персонажа. Теперь перемещая красный указатель по кадрам выставляем необходимые спрайты. У меня получилось что-то такое
Проигрывайте анимацию, чтоб подобрать лучший тайминг смены спрайтов для вашего персонажа. Не забудте вконце выключить запись.
Теперь проделайте такие-же действия для каждой анимации. Теперь удаляем эти 4 объекта из темной зоны аниматора. Наша анимация лежит просто в папке, В левом верхнем углу мы выбираем Parameters и нажатием на «+» добавляем 2 float значения x и y.
В темной зоне мы создаем при помощи ПКМ -> CreateState -> FromNewBlendTree (BlendTree за нас сам будет выбирать нужную для воспроизведеня анимацию) и кликаем по нему дважды, открываются внутренности BlendTree и в правом верхнем углу инспектора выбираем BlendType 2D Simple Directional. А в Parameters ставим x и y. Это значит, что за наш BlendTree будет отвечать 2 параметра. Так же необходимо добавить 4 новых Motion через + -> AddMotionField. Для каждой Motion мы выбираем соответствующую анимацию из папки и значение направления x и y. У меня получилось так
Далее необходимо нажать на каждую анимацию в папке и поставить галочку напротив LoopTime. Это нужно для того, чтоб анимация шла бесконечно. Наш BlendTree теперь готов, но если выбрать его постоянным он будет вечно идти. Чтоб это исправить необходимо открыть аниматор и создать там Empty, который мы установим стандартным и переименуем в Idle. Для этого необходимо нажать на него ПКМ и выбрать Set as Layer default state. Теперь нажмем на Idle ПКМ и выберем Make Transition и укажем на Blend Tree, обратное действие надо сделать и на BlendTree. Теперь необходимо добавить новый bool параметр в аниматоре, который назовем IsWalking.
Нажав ЛКМ по соединению необходимо убрать галочку с Has Exit Time и в Conditions добавить новое условие, выбрав IsWalking и поставив необходимое значение. В другом соединении нужно сделать тоже самое, только вместо true сделать false. И теперь, когда наш параметр IsWalking будет поставлен в true, то 2D персонаж будет анимировать свое движение, а как движение прекратится, то он перестает анимироваться.
Теперь необходимо сделать включение передвижения и изменение параметров в скрипте для анимации. В PlayerController необходимо написать:
public class PlayerController : MonoBehaviour < Rigidbody2D rigidBody2d; Animator anim; private void Start() < rigidBody2d = GetComponent(); anim = GetComponent(); >bool NeedToGo=false; public float Speed=0.05f; Vector2 worldPos; void Update () < if (Input.GetMouseButtonUp(0)==true) < Vector2 mousePos = Input.mousePosition; worldPos = Camera.main.ScreenToWorldPoint(mousePos); NeedToGo = true; //Вычисляем разницу позиций Vector3 diff = worldPos - (Vector2)transform.position; //И нормализуем её (приводим к значению от -1 до 1) diff.Normalize(); //Заносим её в наши x и y anim.SetFloat("x", diff.x); anim.SetFloat("y", diff.y); //Устанавливаем значение походки в аниматоре anim.SetBool("IsWalking",true); >if (NeedToGo) < rigidBody2d.MovePosition(Vector2.MoveTowards(transform.position,worldPos,Speed*Time.deltaTime)); if (Vector2.Distance(transform.position, worldPos) < 0.01) < NeedToGo = false; //Останавливаем анимацию когда дошли anim.SetBool("IsWalking", false); >> > >
В итоге данного урока мы разобрали как Как сделать анимацию 2D персонажа в Unity 5
Как с нуля собрать 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).
Если используешь 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. Они нужны, чтобы наложить дополнительные карты нормалей или высот, и сделать нашу картинку объемнее.
Накладывая нормаль, можно сделать имитацию углублений и выпуклостей без использования 3D, а лишь освещая поверхность. На этих инструментах я не буду подробно останавливаться, но пример может выглядеть вот так:
Результат — свет знает, как осветить sprite. Высоты и углубления знаем благодаря NormalMap. Источник: личный архив автора
Идем дальше: проверяем, распознались ли все элементы в главном окне корректно, и можем переименовать или изменить pivot по необходимости. Теперь нас интересует Skinning Editor.
Полезные ссылки о PSD Importer о SkiningEditor. Рекомендую ознакомиться с примерами, если есть желание создать что то отличное от нашего персонажа, и чтобы понять разные стороны инструмента.
Оранжевым цветом на скриншоте подсвечено, какую панель стоит включить. С ее помощью мы правильно выложим наши кости, и она работает как стандартная иерархия объектов в Unity (Hierarchy — главная панель, переставления родительских объектов в дочерние, — прим. авт.).
Советую сразу именовать новосозданную кость в панели Visibility -> Bone (на скриншоте ниже выделено оранжевым).
Нажимаем AutoGeometry для построения геометрии под каждый спрайт. Это позволяет в тонкой настройке задать нужный Mesh Deformation. Убрав выделение с какого-либо спрайта, жмем AutoWeight.
Маловероятно, что тулза на 100% распознала все верно. Перейдем в детальные настройки. Первое, что нас интересует — какой спрайт и область привязалась к кости. Для этого открываем 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 отличаются точностью и количеством проходов по иерархии. Рекомендую ознакомиться с документацией подробнее.
Теперь именуем наши вновь созданные объекты, и создаем по одному простому GameObject под каждый. Желательно их тоже назвать, чтобы в дальнейшем не теряться. Устанавливаем Target в каждом созданном Solver — четыре Limb и один CCD.
Теперь устанавливаем Effector-точку для каждого IK Solver:
ArmL Solver Setup. Источник: личный архив автора
Мы можем задать длину воздействия на потомков (выделено зеленым на скриншоте) до плечей, или в нашем случае до Roota. Когда поднимем наши точки с пола, увидим, что пока не все так гладко.
Здесь мы видим две проблемы. Во-первых, наши суставы смотрят не в ту сторону. Во-вторых, наш управляющий point направляет руки персонажа не туда, куда надо.
Для начала поправим положение рук. Для этого переходим в конечную иерархию в Sword. Наведя курсор между X и значением, появляется альтернативный курсор — <>. Кликаем и понемногу меняем положения так, чтобы наш меч лег в руку. Ту же операцию проводим и для координаты Y при необходимости.
Сделаем так с обеими руками. Если у тебя кости находятся последовательно друг за другом, с этой проблемой ты не столкнешься. Также удостоверимся, что родительский объект не имеет смещения:
Переходим к суставам. Для этого кликаем на Flip-настройку. Этот инструмент вывернет сустав в нужную сторону. Здесь все зависит от первоначального скелета. В нашей ситуации имеем дело с ногами:
Мы получили настроенного персонажа, которым можем управлять с помощью пятью точек. Также нам доступен Root, который не привязан к инверсной кинематике. Сдвигая его, мы можем менять положения тела, а наши IK Solver оставят конечности в той же позиции.
В считанные секунды мы можем поставить нашего персонажа в нужное положение и быстро анимировать в среде Unity для игры или ролика.
В следующей части рассмотрим создание кат-сцены и то, как мы можем скомпозировать управление камерой, эффектами и уже настроенным персонажем в одном таймлайне с помощью Cinemachine Package.
Основы создания 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 она будет отображаться слишком быстро.
Запустим игру! Если все сделано правильно, наш Капитан Коготь должен стоять на платформе, дышать, и вилять хвостом.
На этом пока все. В следующий раз поговорим о реализации бегущего вправо-влево персонажа и соответствующей анимации.