Анимации

Введение

Анимационная система 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

Move the editor cursor forward in time by clicking here:

../../_images/robisplash_anim_editor_track_cursor.png

Change the logo position to (118, 0) and add a keyframe again. With two keyframes with different values, the animation happens.

../../_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