Introduction to the animation features

Обзор

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

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

  • Работа с панелью анимации

  • Анимация любого параметра узла

  • Создание простой анимации

  • Вызов функций с помощью Call Function Tracks

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

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

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

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

The AnimationPlayer node

Узел AnimationPlayer

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

The animation panel position

Расположение панели анимации

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

The animation panel

Панель анимации

  • Управление анимацией(т.е. добавить, загрузить, сохранить и удалить анимацию)

  • Список дорожек(треков)

  • Шкала времени(таймлайн) с ключевыми кадрами

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

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

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

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

Keyframes in Godot

Ключевые кадры в Godot

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

Two keyframes are all it takes to obtain a smooth motion

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

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

The timeline in the animation panel

Шкала времени на панели анимации

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

Example of Normal animation tracks

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

Совет

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

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

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

For this tutorial, we'll create an AnimationPlayer node and a sprite node as its child.

Our scene setup

Наши установки сцены

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

AnimationPlayer inherits from Node instead of Node2D or Node3D, 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.

Therefore, it is not recommended to add nodes that have a 2D/3D transform as a child of an AnimationPlayer node.

The sprite holds an image texture. We animate that sprite to move between two points on the screen. For this tutorial, use the default Godot icon as the sprite's texture. As a starting point, move the sprite to a left position on the screen.

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

Add a new animation

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

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

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

Convenience buttons

Удобные кнопки

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

Отмените выбор вращения(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.

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

The sprite track

Дорожка спрайта

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

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

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

Animation length

Длительность анимации

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).

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

The animation

Анимация

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

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

Animation loop

Цикл анимации

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.

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

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

Track settings

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

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

  • Непрерывная(сontinuous): свойство обновляется в каждом кадре

  • Дискретная(discrete): свойство обновляется только на ключевых кадрах

  • Триггер(trigger): свойство обновляется только на ключевых кадрах или триггерах

  • Захват(capture): текущее значение свойства запоминается, и оно будет смешиваться с первым найденным ключом анимации

Track mode

Режим трека

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

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

  • Ближайший(Nearest): установить значение ближайшего ключевого кадра

  • Линейный(Linear): установить значение на основе вычисления линейной функции между двумя ключевыми кадрами

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

Track interpolation

Переходы трека

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

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

Loop modes

Режимы циклов

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

  • Обработка Перехода Зацикливания: 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.

Keyframes for other properties

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

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

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

Keyframe editor editing a key

Keyframe editor editing a key

Кроме того, вы можете также изменить значение параметра 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" (Add track) on the animation panel's track controls.

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

Add Call Method Track

Add Call Method Track

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

Select AudioStreamPlayer

Select AudioStreamPlayer

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