Вступ до функцій анімації

Вузол :ref:`class_AnimationPlayer`дозволяє створювати будь-яку просту, чи складну, анімацію.

З цього посібника ви дізнаєтеся про:

  • Роботу з панеллю Анімації

  • Анімацію будь-якої властивості будь-якого вузла

  • Створення простої анімації

  • Виклик функцій з допомогою потужних Доріжок Виклику Методів

У Godot ви можете анімувати все, що доступно в інспекторі, наприклад, перетворення вузлів, спрайти, елементи інтерфейсу користувача, частинки, видимість і колір матеріалів тощо. Ви також можете змінювати значення змінних у скриптах і викликати будь-яку функцію.

Створення вузла AnimationPlayer (Відтворювач Анімації)

Щоб використовувати інструменти анімації, спочатку потрібно створити вузол AnimationPlayer.

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

Вузол AnimationPlayer

Вузол AnimationPlayer

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

Розташування панелі анімації

Розташування панелі анімації

Панель складається з чотирьох частин:

Панель анімації

Панель анімації

  • Елементи керування анімацією (наприклад, додавання, завантаження, збереження та видалення анімацій)

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

  • Шкала часу з ключовими кадрами

  • Керування Шкалою Часу та Доріжками, де ви можете масштабувати шкалу часу, або редагувати доріжки.

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

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

Фігурки ромбиків на шкалі часу - це ключові кадри. Лінія між двома ключовими кадрами вказує на те, що значення не змінилося.

Ключові кадри в Godot

Ключові кадри в Godot

Рушій інтерполює значення між ключовими кадрами, що призводить до поступової зміни значень з плином часу.

Два ключових кадри - це все, що потрібно для отримання плавного руху

Два ключових кадри - це все, що потрібно для отримання плавного руху

Шкала часу дозволяє вставляти ключові кадри та змінювати їх час. Вона також визначає тривалість анімації.

Шкала часу на панелі анімації

Шкала часу на панелі анімації

Кожен рядок панелі анімації є анімаційною доріжкою. Звичайні і доріжки Перетворення відстежують властивості вузла. Їх ім'я, або ідентифікатор - це шлях до вузла та анімованої властивості.

Зразок Звичайних анімаційних доріжок

Зразок Звичайних анімаційних доріжок

Порада

Якщо ви анімували неправильну властивість, ви можете змінити шлях доріжки в будь-який час. Двічі клацніть по ній і введіть новий шлях. Відтворіть анімацію за допомогою кнопки "Відтворити з початку" Play from beginning (або натиснувши Shift + D на клавіатурі), щоб одразу побачити зміни.

Урок: Створення простої анімації

Налаштування сцени

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

Налаштування нашої сцени

Налаштування нашої сцени

Попередження

AnimationPlayer є спадкоємцем Node, а не Node2D, чи Spatial, що означає, що дочірні вузли не будуть успадковувати перетворення від батьківських вузлів через наявність голого Node в ієрархії.

Тому не рекомендується додавати вузлу AnimationPlayer в нащадки вузли, які мають 2D/3D перетворення.

Спрайт містить текстуру зображення. Ми анімуємо цей спрайт, щоб переміщатися між двома точками на екрані. Для цього уроку використовуйте типову піктограму Godot в якості текстури спрайта. Перемістіть спрайт у ліве положення на екрані, це буде точка старту.

Виберіть вузол AnimationPlayer, а потім натисніть кнопку "Анімація" в редакторі анімації. Зі списку виберіть "Новий" (|Додати анімацію|), щоб додати нову анімацію. І введіть ім'я анімації в діалоговому вікні.

Додавання нової анімації

Додавання нової анімації

Додавання доріжки

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

Зручні кнопки

Зручні кнопки

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

Зніміть з вибору обертання, тому що в цьому уроці нас цікавить лише розташування нашого спрайту та натисніть на кнопку ключа.

Оскільки у нас немає доріжки, вже створеної для властивості перетворення/розташування, Godot запитує, чи повинна він налаштувати її для нас. Натисніть кнопку Створити.

Це створює нову доріжку і наш перший ключовий кадр на початку шкали часу:

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

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

Другий ключовий кадр

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

Скажімо, ми хочемо, щоб переміщення зайняло 2 секунди. За замовчуванням анімація триває всього 1 секунду, тому змініть тривалість анімації на 2.

Тривалість анімації

Тривалість анімації

На часовій шкалі натисніть поблизу 2-секундної позначки та перемістіть спрайт до місця призначення справа.

Знову натисніть кнопку ключа на панелі інструментів. Це створить наш другий ключовий кадр.

Запуск анімації

Натисніть на кнопку "Грати з початку" (Play from beginning).

Вау! Наша анімація працює:

Анімація

Анімація

Туди-сюди

Godot має тут додаткову особливість. Як вже говорилося раніше, Godot завжди обчислює кадри між двома ключовими кадрами. В зацикленій анімації перший ключовий кадр також є останнім ключовим кадром, якщо в кінці не вказано конкретний ключовий кадр.

Циклічність анімації

Циклічність анімації

Якщо зараз встановити тривалість анімації на 4 секунди, спрайт переміститься туди-сюди. Цю поведінку можна змінити, якщо змінити режим циклу доріжки. Про це йдеться в наступному розділі.

Параметри доріжки

Кожна доріжка в кінці має панель налаштувань, де ви можете встановити режим оновлення, інтерполяцію доріжки та режим циклу.

Параметри доріжки

Параметри доріжки

Режим оновлення доріжки повідомляє Godot, коли оновлювати значення властивостей. Він може бути:

  • Неперервний: Властивість оновлюється в кожному кадрі.

  • Дискретний: Властивість оновлюється тільки в ключових кадрах.

  • Тригерний: Властивість оновлюється в ключових кадрах, або тригерах. Тригери — це тип ключового кадру, який використовується властивістю current_animation AnimationPlayer, і доріжкою Animation Playback.

  • Захоплення: Якщо час першого ключового кадру більший за 0.0, поточне значення властивості запам'ятається та буде змішуватися з першим ключем анімації. Наприклад, за допомогою режиму Захоплення можна перемістити вузол, розташований у будь-якому місці, до певного розташування.

Режими доріжки

Режими доріжки

У звичайних анімаціях зазвичай використовується "Безперервний". Інші типи використовуються для складної анімації.

Інтерполяція розповідає Godot, як розрахувати значення кадрів між ключовими кадрами. Підтримуються такі режими інтерполяції:

  • Найближчий: встановлює найближче значення ключового кадру

  • Лінійний: Встановлює значення на основі обчислення лінійної функції між двома ключовими кадрами

  • Кубічний: Встановлює значення на основі обчислення кубічної функції між двома ключовими кадрами

Режими інтерполяції

Режими інтерполяції

Кубічна інтерполяція призводить до більш природного руху, де анімація сповільнюється на ключовому кадрі і прискорюється між ключовими кадрами. Зазвичай цей режим використовується для анімації персонажів. Лінійна інтерполяція створює більше роботизований рух.

Godot підтримує два режими циклу, які впливають на анімацію, якщо для неї встановлено циклічність:

Режими циклу

Режими циклу

  • Затиснута інтерполяція циклу: Коли вибрано цей режим, анімація зупиняється після останнього ключового кадру цієї доріжки. Коли перший ключовий кадр буде досягнутий знову, анімація скинеться до своїх початкових значень.

  • Загорнута інтерполяція циклу: Коли вибрано цей режим, Godot обчислює анімацію після останнього ключового кадру, повертаючись значень першого ключового кадру.

Ключові кадри для інших властивостей

Godot не обмежує вас лише редагуванням властивостей перетворення. Кожну властивість можна анімувати за допомогою доріжки з ключовими кадрами.

Якщо ви виберете спрайт, коли відображається панель анімації, ви отримаєте невелику кнопку ключового кадру для всіх властивостей спрайта. Натисніть на цю кнопку, і Godot автоматично створить доріжку і ключовий кадр до поточної анімації.

Ключові кадри для інших властивостей

Ключові кадри для інших властивостей

Редагування ключових кадрів

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

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

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

Крім того, ви також можете змінити значення заспокоєння для цього ключового кадру, клацнувши та перетягнувши параметр Easing. Він вказує Godot, як змінити значення властивості, при досягненні цього ключового кадру.

Зазвичай до редагування цього параметру приступають, коли рух не "виглядає правильно".

Додатково: Доріжки виклику методів

Анімаційний рушій Godot не зупиняється на досягнутому. Якщо вам вже знайомі зі скриптовою мовою Основи GDScript і Godot API , то ви знаєте, що кожен тип вузла є класом і має купу методів, які можна викликати.

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

Чи не було б чудово використовувати метод в певному ключовому кадрі в анімації? Ось де стануть в нагоді "Доріжки Виклику Методів". Ці доріжки теж посилаються на вузол, але без посилання на властивість. Натомість ключовий кадр містить назву та аргументи методу, який Godot повинен викликати, коли досягне цього ключового кадру.

Щоб продемонструвати, ми використаємо доріжку виклику методів для відтворення звуку в певному ключовому кадрі. Зазвичай для відтворення звуку ви повинні використовувати аудіо-доріжку, але заради демонстрації методів ми зробимо це таким чином.

Додайте AudioStreamPlayer до дерева сцени та налаштуйте аудіо за допомогою аудіо-файлу, який ви помістили у свій проект.

Натисніть "Додати доріжку" (|Додати доріжку|) на панелі анімації.

Виберіть "Доріжку виклику методів" зі списку можливих типів доріжок.

Додавання доріжки виклику методів

Додавання доріжки виклику методів

Виберіть вузол AudioStreamPlayer у вікні вибору. Godot додає доріжку з посиланням на вузол.

Виберіть AudioStreamPlayer

Виберіть AudioStreamPlayer

Клацніть правою кнопкою мишки шкалу часу в місці, де Godot повинен відтворити зразок, і натисніть опцію "Вставити ключ". Це відкриє список методів, які можна викликати для вузла AudioStreamPlayer. Виберіть перший.

../../_images/animation_method_options.png

При досягненні ключового кадру, Godot викликає функцію play вузла AudioStreamPlayer, і зразок відтворюється.

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

../../_images/animation_call_method_keyframe.png

Використання доріжок RESET

Ви можете налаштувати спеціальну анімацію RESET, щоб містити "позу за замовчуванням". Вона використовується для відновлення пози за замовчуванням під час збереження сцени та повторного відкриття її в редакторі.

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

Якщо властивість Reset On Save (Скинути при зберіганні") AnimationPlayer увімкнена, сцена буде збережена зі скинутими застосованими ефектами анімації (ніби її вернули до часу 0.0). Це впливає лише на збережений файл – доріжки властивостей у редакторі залишаються там, де вони були.

Якщо ви хочете скинути доріжки в редакторі, виберіть вузол AnimationPlayer, відкрийте Редагувати на панелі анімації, а потім виберіть Застосувати скидання з спливаючого меню.

Під час додавання доріжок до нових анімацій редактор попросить вас автоматично створити доріжку RESET під час використання значка ключового кадру поруч із властивістю в інспекторі. Це не застосовується до доріжок, створених за версіями Godot до 3.4, оскільки функція відстеження скидання анімації була додана в 3.4.