Введение в возможности анимации

Узел AnimationPlayer позволяет создавать вам что угодно, от простой до сложной анимации.

В этом руководстве Вы узнаете:

Работа с панелью анимации
Анимация любого параметра узла
Создание простой анимации

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

Создание узла AnimationPlayer

Чтобы использовать инструменты анимации, мы сначала должны создать узел AnimationPlayer.

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

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

Анимационная панель состоит из четырех частей:

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

Компьютерная анимация опирается на ключевые кадры

Ключевой кадр определяет значение свойства в определенный момент времени.

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

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

Два ключевых кадра — все, что нужно для получения плавного движения

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

Каждая строка на панели анимации представляет собой дорожку анимации, которая ссылается на свойство Normal или Transform узла. Каждая дорожка хранит путь к узлу и свойство, на которое он влияет. Например, дорожка position на рисунке ссылается на свойство position узла Sprite2D.

Пример стандартной анимационной дорожки

Совет

Если вы анимируете неправильное свойство, вы можете в любой момент изменить путь к треку, дважды щёлкнув по нему и введя новый путь. Чтобы мгновенно увидеть изменения, воспроизведите анимацию, нажмите "Play from beginning" кнопку Воспроизвести с начала (или нажмите Shift + D на клавиатуре).

Руководство: Создание простой анимации

Настройка сцены

Для этого урока мы создадим узел Sprite с AnimationPlayer в качестве дочернего элемента. Мы анимируем спрайт для перемещения между двумя точками на экране.

Предупреждение

AnimationPlayer наследует от Node вместо Node2D или Node3D, что означает, что дочерние узлы не будут наследовать преобразование от родительских узлов из-за присутствия в иерархии пустого узла.

Поэтому не рекомендуется добавлять узлы с 2D/3D преобразованием в качестве дочерних узлов узла AnimationPlayer.

Спрайт содержит текстуру изображения. В этом руководстве выберите узел Sprite2D, щелкните Текстура в Инспекторе, а затем нажмите Загрузить. Выберите значок Godot по умолчанию для текстуры спрайта.

Добавление анимации

Выберите узел AnimationPlayer и нажмите кнопку "Animation" в редакторе анимации. В списке выберите "New" ( Добавить анимацию ), чтобы добавить новую анимацию. Введите имя анимации в диалоговом окне.

Управление библиотеками анимации

Для возможности повторного использования анимация регистрируется в списке ресурсов библиотеки анимации. Если вы добавите анимацию в AnimationPlayer без указания каких-либо конкретных настроек, анимация будет зарегистрирована в [Глобальной] библиотеке анимации, которая доступна в AnimationPlayer по умолчанию.

Если имеется несколько библиотек анимации и вы попытаетесь добавить анимацию, появится диалоговое окно с параметрами.

Добавить новую анимацию с опцией библиотеки

Добавление трека

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

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

Нажмите кнопку ключа, чтобы создать первый ключевой кадр. Поскольку у нас пока нет настроенной дорожки для свойства Position, Godot предложит создать ее для нас. Нажмите Create.

Godot создаст новый трек и вставит наш первый ключевой кадр в начало временной шкалы:

Второй ключевой кадр

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

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

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

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

Запуск анимации

Нажмите на кнопку «Воспроизвести с начала» ().

Ура! Наша анимация работает:

Автовоспроизведение при загрузке

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

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

Назад и вперед

У Godot есть интересная функция, которую мы можем использовать в анимации. Если задана опция зацикливания анимации, но в конце анимации не указан ключевой кадр, первый ключевой кадр становится последним.

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

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

Настройки трека

В конце каждой дорожки свойств имеется панель настроек, где можно установить режим обновления, интерполяцию дорожки и режим цикла.

Режим обновления дорожки сообщает Godot, когда обновлять значения свойств. Это может быть:

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

Обычно вы будете использовать режим "Continuous" («Непрерывный»). Другие типы используются для написания сложных анимаций.

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

Ближайший(Nearest): установить значение ближайшего ключевого кадра
Линейный(Linear): установить значение на основе вычисления линейной функции между двумя ключевыми кадрами
Кубическая(Cubic): установить значение на основе вычисления кубической функции между двумя ключевыми кадрами
Линейный угол (отображается только в свойстве поворота): Линейный режим с поворотом по кратчайшему пути
Кубический угол (отображается только в свойстве поворота): Кубический режим с поворотом по кратчайшему пути

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

Godot поддерживает два режима цикла, которые влияют на анимацию, когда она зациклена:

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

Ключевые кадры для других свойств

Система анимаций в Godot не ограничивается только изменениями положения, поворота или масштаба. Вы можете анимировать любые объекты.

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

Редактирование ключевых кадров

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

Редактор ключевых кадров для редактирования ключа

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

Вы можете настраивать свою анимацию до тех пор, пока движение не "будет выглядеть правильно".

Использование RESET-треков

Вы можете настроить специальную анимацию RESET, содержащую "позу по умолчанию". Это используется для обеспечения восстановления позы по умолчанию при сохранении сцены и повторном ее открытии в редакторе.

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

Если свойство AnimationPlayer Reset On Save установлено в true, сцена будет сохранена с эффектами анимации сброса (как если бы она была искана по времени 0.0). Это влияет только на сохраненный файл - дорожки свойств в редакторе остаются на своих местах.

Если вы хотите сбросить дорожки в редакторе, выберите узел AnimationPlayer, откройте нижнюю панель Animation, затем выберите Apply Reset в раскрывающемся меню Edit редактора анимации.

При использовании значка ключевого кадра рядом со свойством в инспекторе редактор попросит вас автоматически создать дорожку RESET.

Примечание

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

Очистка лука от шелухи

Редактор анимации Godot предоставляет функцию под названием "onion skinning"(очистка лука от кожуры), которая позволяет просматривать предыдущие кадры анимации при ее создании. Чтобы активировать эту функцию, щелкните значок лука в правом верхнем углу окна редактора анимации. При этом будут показаны прозрачные красные копии анимированного объекта на его предыдущих позициях.

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

Animation Markers

Animation markers can be used to play a specific part of an animation rather than the whole thing. Here is a use case example, there's an animation file that has a character doing two distinct actions, and the project requires the whole animation, as well as both actions individually. Instead of making two additional animations, markers can be placed on the timeline, and both actions can now be played individually.

To add a marker to an animation right click the space above the timeline and select Insert Marker....

../../_images/animation_marker_click_area.webp

All markers require a unique name within the animation. You can also set the color of the markers for improved organization.

To play the part of the animation between two markers use the play_section_with_markers() and play_section_with_markers_backwards() methods. If no start marker is specified then the beginning of the animation is used, and if no end marker is specified, then the end of the animation is used.

If the end marker is after the end of the animation then the AnimationPlayer will clamp the end of the section so it does not go past the end of the animation.

To preview the animation between two markers use Shift + Click to select the markers. When two are selected the space between them should be highlighted in red.

../../_images/animation_marker_selected.webp

Now all of the play animation buttons will act as if the selected area is the whole animation. Play Animation from Start will treat the first marker as the start of the animation, Play Animation Backwards from End will treat the second marker as the end, and so on.