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

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

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

Работа с панелью анимации
Анимация любого параметра узла
Создание простой анимации
Вызов функций с помощью Call Function Tracks

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

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

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

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

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

Панель состоит из 4х частей:

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

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

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

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

Движок интерполирует (изменяет) значения между ключевыми кадрами, что приводит к постепенному изменению значений с течением времени.

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

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

Каждая строка на панели анимации — это анимационная дорожка (трек) . Трек параметра (Property) и трек трансформации (Transform) отслеживают свойства узла. Их имя или идентификатор — это путь к узлу и соответствующему свойству.

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

Совет

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

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

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

For this tutorial, we'll create a Sprite node with an AnimationPlayer as its child. We will animate the sprite to move between two points on the screen.

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

AnimationPlayer inherits from Node instead of Node2D or Spatial, which means that the child nodes will not inherit the transform from the parent nodes due to a bare Node being present in the hierarchy.

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

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

Выберите узел AnimationPlayer, затем нажмите кнопку «Анимация» в редакторе анимации. В списке выберите «Новый» ( Add Animation ), чтобы добавить новую анимацию. И введите имя для анимации в диалоговом окне.

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

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

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

Отмените выбор вращения(rot), сейчас нас интересует только анимация местоположения нашего спрайта и нажмите кнопку ключа.

As we don't have a track already set up for the transform/location property, Godot asks whether it should set it up for us. Click Create.

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

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

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

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

Click on the timeline header near the 2-second mark and move the sprite to the target destination on the right side.

Опять же, нажмите кнопку ключа на панели инструментов. Это создает наш второй ключевой кадр.

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

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

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

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

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

If you set the animation length to 4 seconds now, the animation moves back and forth. You can change this behavior if you change the track's loop mode. This is covered in the next chapter.

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

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

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

Непрерывный: Обновляйте свойство на каждом кадре.
Дискретный: Обновляйте свойство только на ключевых кадрах.
Trigger: Only update the property on keyframes or triggers. Triggers are a type of keyframe used by the current_animation property of a AnimationPlayer, and Animation Playback tracks.
Capture: If the first keyframe's time is greater than 0.0, the current value of the property will be remembered and will be blended with the first animation key. For example, you could use the Capture mode to move a node that's located anywhere to a specific location.

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

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

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

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

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

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

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

В Godot можно анимировать не только свойства трансформации. Любое свойство может иметь трек с ключевыми кадрами.

If you select your sprite while the animation panel is visible, you get a small keyframe button for all the sprite's properties. Click on this button and Godot automatically adds a track and keyframe to the current animation.

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

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

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

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

Дополнительно: Трек Вызова Метода¶

Движок анимации Godot на этом не останавливается. Если вы уже знакомы с языком сценариев Godot doc_gdscript`и :doc:/classes/index`, вы знаете, что каждый узел в сцене является экземпляром класса и имеет множество методов которые можно вызывать.

Например, тип узла AudioStreamPlayer имеет метод для воспроизведения аудиопотока.

Разве не здорово было бы вызывать метод на определенном ключевом кадре анимации? Вот где «Трек Вызова Метода» пригодятся. Эти треки ссылаются на узел, но на этот раз без ссылки на свойство. Вместо этого ключевой кадр содержит имя и аргументы метода, который Godot должен вызывать при достижении этого ключевого кадра.

В качестве демонстрации, мы собираемся использовать «Трек Вызова Метода» для воспроизведения аудио на определенном ключевом кадре. Обычно для воспроизведения аудио вы должны использовать “Трек Аудио Дорожки”, но для демонстрации мы собираемся сделать это следующим образом.

Add a AudioStreamPlayer to the Scene Tree and setup a stream using an audio file you put in your project.

Click on "Add track" () on the animation panel's track controls.

Select "Add Call Method Track" from the list of possible track types.

Select the AudioStreamPlayer node in the selection window. Godot adds the track with the reference to the node.

Right click the timeline where Godot should play the sample and click the "Insert Key" option. This will bring up a list of methods that can be called for the AudioStreamPlayer node. Select the first one.

../../_images/animation_method_options.png

When Godot reaches the keyframe, Godot calls the AudioStreamPlayer node's "play" function and the stream plays.

You can change its position by dragging it on the timeline, you can also click on the keyframe and use the keyframe settings in the inspector.

../../_images/animation_call_method_keyframe.png

Using RESET tracks¶

You can set up a special RESET animation to contain the "default pose". This is used to ensure that the default pose is restored when you save the scene and open it again in the editor.

For existing tracks, you can add an animation called "RESET" (case-sensitive), then add tracks for each property that you want to reset. The only keyframe should be at time 0, and give it the desired default value for each track.

If AnimationPlayer's Reset On Save property is set to true, the scene will be saved with the effects of the reset animation applied (as if it had been seeked to time 0.0). This only affects the saved file – the property tracks in the editor stay where they were.

If you want to reset the tracks in the editor, select the AnimationPlayer node, open the Animation bottom panel then choose Apply Reset in the animation editor's Animation dropdown menu.

When adding tracks on new animations, the editor will ask you to automatically create a RESET track when using the keyframe icon next to a property in the inspector. This does not apply on tracks created with Godot versions prior to 3.4, as the animation reset track feature was added in 3.4.