Анимационные кривые — лучший инструмент дизайна

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Jul 21, 2022|27 Мин
Анимационные кривые — лучший инструмент дизайна
Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.

Это третья запись в блоге Кристо Ноббса в его серии для игровых дизайнеров. Серия расширяет его вклад в «Пособие для разработчиков игр Unity»— подробное руководство объемом более 100 страниц, в котором гейм-дизайнерам объясняют, как создавать прототипы, создавать и тестировать игровой процесс в Unity. Ссылки на предыдущие записи в блоге Христо приведены в конце этой статьи.

В Unity существует несколько «типов», которые мы можем использовать для хранения данных, которые столь же полезны, как и рычаги проектирования для систем балансировки, игрового процесса, настроек персонажей, профилей транспортных средств и т. д. Кривые анимации — один из типов компонентов, который предлагает разработчикам и дизайнерам игр интересные возможности, особенно при создании прототипов. Используйте их в своем проекте, например, в системе частиц для управления анимированными переменными или в компоненте источника звука для управления спадом и другими свойствами.

Кривая — это линейный график, показывающий реакцию (по оси Y) на изменяющееся значение входного сигнала (по оси X). Unity использует кривые в различных контекстах, в частности в анимации. Редакторы кривых имеют ряд различных опций и инструментов, которые вы можете использовать.

В этой статье мы рассмотрим работу с кривыми анимации через API Unity с типом переменной AnimationCurve. Таким образом, их можно использовать для сбора и хранения данных, что полезно для анализа результатов. Кривые также совместимы с объектами ScriptableObjects, которые, как обсуждалось в руководстве, отлично подходят для редактирования данных игрового процесса.

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

Свойство кривой анимации в инспекторе
Свойство кривой анимации в инспекторе: При нажатии на нее открывается редактор кривых, в котором вы можете настроить кривую и сохранить ее в своей библиотеке, выбрав значок шестеренки.
Ключ касательной в Unity
Двойной щелчок по кривой создает новый ключ, который можно использовать для управления им, а также предоставляет несколько вариантов управления маркерами ключа.

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

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

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

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

Коричневая дверь открывается и закрывается на зеленом щуре в редакторе Unity
Открытие и закрытие двери с использованием кривых на временной шкале анимации
Кривая открывания двери
Кривая открывания двери
Кривая закрытия двери
Кривая закрытия двери

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

Анимационная кривая C# код
Ознакомьтесь с этим обзором того, как кривая анимации в Инспекторе возвращает данные по оси Y в заданной позиции по оси X. Нижний метод показывает, как использовать метод EvaluateCurve, передавая желаемую кривую и положение.

При создании кривой анимации для редактирования в Инспекторе вы сможете оценить кривую, передав параметр, который в Unity называется временем . Далее в этой статье мы рассмотрим, почему положение становится более наглядным, если не использовать ось X для времени.

«Псевдо»-кривая крутящего момента двигателя для управления выходной мощностью двигателя

Давайте рассмотрим, как можно использовать анимационную кривую для управления выходной мощностью двигателя транспортного средства. Вы можете создать «псевдо»-кривую крутящего момента двигателя, чтобы вычислить силу, приложенную к транспортному средству, на основе текущих оборотов двигателя (оборотов в минуту). Со временем этот показатель увеличивается, если игрок нажимает на педаль газа.

Вместо того чтобы отображать полный диапазон оборотов для каждой передачи и транспортного средства, вы можете «нормализовать» или установить обороты в диапазоне от 0 до 1. Созданные вами кривые «крутящего момента» затем можно сохранить и использовать повторно для других транспортных средств и передач.

Установите это значение, разделив исходное или текущее значение на максимальное значение:

нормализованныйТекущийОб/мин = текущийОб/мин / максимальныйОб/мин

Выходная мощность (ось Y) также будет использоваться в диапазоне от 0 до 1, чтобы редактор кривых оставался управляемым, а сами кривые можно было использовать повторно. Это значение можно добавить к силе движения транспортного средства, чтобы переместить Rigidbody транспортного средства вперед по оси Z.

Пример скрипта для нормализации RPM
Ниже приведен пример скрипта для «нормализации» оборотов двигателя с последующим добавлением силы на основе значения Y кривой крутящего момента при заданных оборотах двигателя, умноженного на мощность двигателя.

Вы можете получить различные результаты с той же настройкой для других транспортных средств, оставаясь между значениями 0,0 и 1,1 на кривой.

Восходящая зеленая кривая

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

Если вы не хотите использовать физическую систему Unity, поскольку у вас есть собственный контроллер автомобиля, вы можете создать порожние и нагруженные варианты кривых и менять эти кривые во время выполнения, чтобы заставить транспортное средство двигаться так, как вам нужно.

Хотя вы не будете часто этим пользоваться, вы можете добавлять ключи, изменять ключи (что приводит к удалению и добавлению новых ключей) и полностью удалять ключи на кривых во время выполнения с помощью API Unity . Это дает вам больше контроля над изменением кривых, что также может включать сглаживание касательных по мере необходимости.

Кривые для тяжелого транспортного средства, например, грузовика с автоматической коробкой передач, который медленно трогается с места, но затем не теряет мощность после достижения пиковых оборотов: На этой кривой показан грузовик без груза.
На этой кривой изображен грузовик с тяжелым грузом. Например, добавив еще один ключ и снижение мощности после того, как автомобиль начал движение, вы можете создать ощущение, что у грузовика затянута вторая передача, что придаст ему больше индивидуальности.
Одиночная кривая для транспортного средства с несколькими передачами
Одиночная кривая для транспортного средства с несколькими передачами

Анимационные кривые позволяют создавать превосходные абстракции более сложных систем, которыми можно управлять в визуальном формате. В примере с двигателем можно со временем добавлять мощность при ускорении с помощью кривой, показанной выше (которая представляет собой «псевдо» коробку передач), чтобы создать ощущение переключения передач автомобилем — повышая свой тон по мере подачи мощности, а затем снова понижая его по мере снижения мощности на верхней границе каждой передачи. Это идеальный вариант для прототипирования движения транспортного средства, поскольку вся мощность автомобиля распределяется по одной кривой, отображающей все передачи, от начала первой передачи в точке x0,y0 до вершины пятой передачи в точке x1,y1.

При ускорении обороты обычно накапливаются с течением времени, поэтому по сути вы строите график значений во времени, что похоже на добавление линейного движения к движущемуся объекту. Подробнее об этом читайте в разделе о тайминге и анимации в книге «Игровой дизайнер».

Три футуристических автомобиля мчатся по большой сетке дороги, окруженной неоновыми синими огнями.
«Псевдо»-физика полезна в играх, где движение не соответствует правилам реальной физики, например, в футуристической гоночной игре Antigraviator, созданной на Unity .

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

При создании механики на основе raycast для транспортного средства, будь то летающее или колесное, обычным выбором для создания эффекта «подвески» в движке является направленная вверх сила, приложенная к каждому лучу, и алгоритм ПИД-регулятора (пропорционально-интегрально-дифференциального) для управления отскоком или, в некоторых случаях, закон Гука для демпфирования. Пример этого можно увидеть в Hover Racer Live 7/21 Cycle 4.2от Unity, а также в примере ниже в этой статье, использующем PID на его основе.

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

  • Заставить транспортное средство регулировать целевую скорость в режиме круиз-контроля, при этом непредсказуемо подвергаясь влиянию других факторов, таких как перевозимая масса, действия игрока или неровности рельефа.
  • Управление точностью вражеских ИИ-агентов при стрельбе по вашим игрокам, при этом избегая попаданий.
  • Прогнозирование задержки в многопользовательских играх.

PID можно использовать в любой области разработки игр, особенно в «песочницах» и симуляциях, требующих «точного и оптимизированного автоматического управления». Kerbal Space Program от Squad использует PID для поддержания движения космического корабля в одном направлении.

Согласно этому исследованию, «ПИД-регулирование является наиболее зрелой и широко используемой технологией непрерывных систем» за пределами разработки игр. Посмотрите это Лекция по системе управления: Введение в ПИД-регулирование для получения дополнительной информации.

Космическая ракета находится в ангаре, слева открыт интерфейс, демонстрирующий возможности настройки ракеты.
Kerbal Space Program от Squad, доступная в Steam, использует алгоритмы ПИД-регулятора.

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

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

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

Чтобы определить сжатие пружины, необходимо вычесть расстояние падения луча из длины пружины, равной 1,0f. Независимо от длины, при сжатии пружины на 25% значение сжатия составит 0,25. Установите это значение сжатия как значение X на кривой анимации, умножьте его на желаемую силу пружины (поскольку вы работаете с нормализованными значениями), а затем используйте его в AddForceAtPosition для приложения направленной вверх силы в каждой точке цикла на основе количества точек подвеса. Никаких дополнительных направленных вниз сил не требуется, кроме стандартной силы тяжести Unity -9,81f.

Вот формула:

upsForce = forceMultiplier * forceCurve.Evaluate(springCompressionNormalized);

rigidBody.AddForceAtPosition(hitNormal * upstreamForce, point.transform.position);

Используя соотношение массы к силе 13:110 и приведенную ниже кривую.

Белый фургон без колес падает на дорогу перед лесом в Unity .
Фургон без колес с увеличенной длиной подвески (длина пружины 1 метр): Фургон падает под неровным углом, вертикально вниз и качается вперед-назад.
Двойная сигмоидальная кривая
Двойная сигмоидальная кривая

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

Чтобы найти подходящие значения, начните с кривой y = b^x (которая похожа на четверть круга). Поддерживайте низкое сопротивление и устанавливайте реальную массу автомобиля. Затем подъемное усилие регулируется до тех пор, пока сжатие пружины транспортного средства не достигнет приблизительно 50%. Несколько раз уроните автомобиль, чтобы проверить, достигнет ли он дна, и посмотрите, где он остановится после подпрыгивания. Использование этого подхода для подвески транспортных средств, передвигающихся по неровной местности, где каждая точка сцепления может быть как улучшена, так и утеряна, позволяет создать быструю и управляемую систему подвески.

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

Серые шары падают с разными характеристиками и кривыми в Unity
Использование различных кривых для каждого твердого тела для просмотра характеристик при падении
Кривые для каждой сферы на предыдущем изображении
Кривые для каждой сферы на предыдущем изображении
Фрагмент кода на C# для удаления объектов
Фрагмент кода для сброса сфер

Ряд сфер на изображении выше был создан путем размещения последовательности твердых тел в ряд и ограничения их свойств заморозки по осям X и Z. Затем была применена направленная вверх сила с использованием анимационной кривой, основанной на направленной вверх силе сжатия, но с разными кривыми для каждой сферы, расположенными рядом для лучшей визуализации. Эту технику можно использовать для определения желаемого уровня отскока объекта или для настройки существующего отскока с целью сбалансировать характеристики. Как дизайнер, умение манипулировать характеристиками направленной вверх силы может помочь вам создавать абстракции более сложных функций.

Кривые — это мощный тип данных XY-диаграммы, и хотя они несовершенны с технической точки зрения, они могут помочь вам создать прототипы быстрых решений по демпфированию, которые можно визуально редактировать в Инспекторе и сохранять в качестве предустановок во время выполнения. В этом блоге об искусстве демпфирования Алексис Бакот подчеркивает все то, что «зависит от хорошего демпфирования». Камера, анимация, движение, цветовые градиенты, переходы пользовательского интерфейса и многое-многое другое... это используется везде! Понимание демпфирования является ключом к достижению отличной полировки. Только демпфирование может стать решающим фактором между хорошим и плохим опытом».

В том же посте он демонстрирует, как можно использовать SmoothDamp из Unity для создания красивого плавного входа и выхода, а также как он точно реагирует на изменение цели. Но он не подпрыгивает как «усовершенствованный пружинный амортизатор, который может колебаться, что отлично подходит для автомобильной подвески или имитации физики мяча» — пример того, где кривые анимации обеспечивают весомое преимущество.

Конечно, кривые имеют больше применений, чем просто тип данных XY, для управления игровым процессом. Их также можно рассматривать как инструмент оценки для визуального сбора данных с помощью AddKey через API Unity . Для оценки положения с течением времени, например, демпфирования в примере с подвеской транспортного средства или падающих сфер, используйте AddKey(elapsedTime, currentSpringCompression) в методе, а затем вызовите этот метод и передайте captureResolution в качестве частоты повторения через InvokeRepeating. Разрешение захвата 0,1f означает, что каждые 0,1 с к кривой добавляется ключ. Просмотрите мини-результат в Инспекторе или откройте график, чтобы увидеть полные данные.

Построенная кривая
Построенная кривая получена с использованием линейной кривой отскока, которая имеет прямую линию от 0,0 до 1,1
Построенная кривая
Построенная кривая, полученная с помощью нелинейной кривой, похожей на двойную сигмоиду, похожую на ту, что показана выше.
Назад к прыгающему фургону

Давайте в последний раз посмотрим на падающий фургон. Кривая анимации определяет величину приложенной силы на основе сжатия пружины и создает результат, близкий к целевому, который будет иметь немного больше колебаний при третьем отскоке. Вы можете сравнить подвеску, созданную с помощью кривой анимации, с подвеской ПИД-регулятора, используя ПИД в Unity Hover Racer Live 7/21 Cycle 4.2. Единственное отличие состоит в том, что результат ПИД умножается на силу зависания, а не на значение Y кривой анимации.

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

Белый фургон без колес, подвешенный в воздухе, в Unity
Окончательная реализация подвески транспортного средства с использованием ПИД, но на основе анимационных кривых, разработанных во время прототипирования: Подвеска по-прежнему усиленная, с пружинами длиной 1 метр.
Слева — целевая кривая затухания, справа — построенная результирующая кривая.
Слева показана целевая кривая демпфирования, полученная Алексисом Бакотом, а справа — график движения автомобиля после внедрения ПИД-регулятора.

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

  • Постройте график выходной мощности двигателя транспортного средства и получите плавную динамику мощности.
  • Создавайте реалистичные тормозные движения, например, когда тормозное усилие быстро применяется, а затем со временем уменьшается, чтобы имитировать торможение реального автомобиля; или, как в игре, например, iRacing, где водитель тормозит на пределе возможностей шин, чтобы автомобиль замедлился за короткий промежуток времени, не выходя из-под контроля.
  • Смоделируйте систему подвески, которая обеспечивает подъемную силу автомобиля.
  • Моделируйте боковое сцепление с расчетами боковой противодействующей силы, которые не позволяют автомобилю слишком сильно скользить влево или вправо.
  • Имитируйте рулевое управление с помощью контроллера (рулевое управление можно использовать около середины, около -0,5 до 0,5, но оно становится все быстрее, когда положение джойстика приближается к -1 или 1).
Зеленый блок, плывущий по синей воде, окруженный горами, в Unity
В этом прототипе curve.Evaluate(time) используется для перемещения преобразования платформы по оси Y с течением времени.

Помимо физики транспортных средств, кривые анимации можно использовать в качестве рычагов проектирования для прототипирования движения игрока, урона от попаданий с течением времени и многого другого. Являясь мощным инструментом прототипирования, Animation Curves позволяет разработчикам игр тестировать приложение различной силы и определять правильное «ощущение» механики без необходимости писать сложные алгоритмы или выполнять физические расчеты.

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