Анимации

Введение

Анимационная система Godot чрезвычайно мощная и гибкая.

Для начала воспользуемся сценой из предыдущего урока (Заставка). Цель заключается в добавлении «появляющейся» анимации к заставке. Вот копия на всякий случай: robisplash.zip.

Добавление анимации персонажу

Прежде всего, добавьте AnimationPlayer в сцену как дочерний узел «background» (корневой узел):

../../_images/robisplash_anim_inspector.png

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

../../_images/robisplash_anim_editor.png

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

Создание анимации

Пришло время создать новую анимацию! Нажмите на кнопку создания новой анимации и, когда появится диалоговое окно, назовите анимацию «intro».

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

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

../../_images/robisplash_anim_property_keys.png

Редактирование анимации

Мы хотим чтобы logo появился вверху экрана.

Открыв панель редактора анимации, выберите узел «logo» и установите свойство «Rect / Position» на (118, -400) и нажмите на ключ, расположенный рядом со свойством:

../../_images/robisplash_anim_logo_inspector_key.png

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

Ключевой кадр будет добавлен в редактор плеера анимации:

../../_images/robisplash_anim_editor_keyframe.png

Переместите курсор вперед по временной шкале, щелкнув здесь:

../../_images/robisplash_anim_editor_track_cursor.png

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

../../_images/robisplash_anim_editor_keyframe_2.png

Нажатие на кнопку «Воспроизвести выбранную анимацию с самого начала. (или Shift-D ) на панели анимации, заставит logo опуститься.

../../_images/robisplash_anim_editor_play_start.png

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

../../_images/robisplash_anim_editor_autoplay.png

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

../../_images/out.gif