Анімація 2D спрайтів¶

Вступ¶

У цьому уроці ви дізнаєтеся, як створювати анімованих 2D персонажів за допомогою класів AnimatedSprite та AnimationPlayer. Як правило, коли ви створюєте, або завантажуєте, анімованого персонажа, він надходить одним з двох способів: як окремі зображення, або як єдиний спрайт-лист, що містить всі кадри анімації. Обидва можуть бути анімовані в Godot з допомогою класу AnimatedSprite.

Спершу ми будемо використовувати AnimatedSprite, щоб анімувати колекцію окремих зображень. Потім ми анімуємо спрайтовий лист за допомогою цього класу. Нарешті, ми дізнаємося ще один спосіб анімації спрайтового листа за допомогою AnimationPlayer та властивості Animation зі Sprite.

Примітка

Зображення для наступних зразків https://opengameart.org/users/ansimuz і https://opengameart.org/users/tgfcoder

Окремі зображення з AnimatedSprite¶

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

../../_images/2d_animation_run_preview.gif

Завантажити зображення можна тут: run_animation.zip

Розпакуйте зображення та розташуйте їх у папці проекту. Налаштуйте дерево сцен за допомогою таких вузлів:

Примітка

Кореневим вузлом також може бути Area2D, або RigidBody2D. Анімація все одно буде зроблена таким же чином. Після завершення анімації можна призначити форму зіткнення CollisionShape2D. Докладніше про це можна дізнатися зі Вступу до фізики.

Тепер виберіть AnimatedSprite і в його властивості SpriteFrames виберіть "New SpriteFrames".

../../_images/2d_animation_new_spriteframes.png

Натисніть на новий ресурс SpriteFrames, і ви побачите, що в нижній частині вікна редактора з'явиться нова панель:

../../_images/2d_animation_spriteframes.png

На панелі Файлова система з лівого боку перетягніть 8 окремих зображень у центральну частину панелі "Кадри Спрайта". З лівого боку змініть назву анімації з "default" на "run".

../../_images/2d_animation_spriteframes_done.png

Повернувшись до Інспектора, установіть галочку для властивості Playing. Тепер ви повинні побачити анімацію, що відтворюється в вікні перегляду. Однак вона трохи повільна. Щоб виправити це, змініть параметр Швидкість: на панелі Кадри спрайту на 10.

Ви можете додати додаткові анімації, натиснувши кнопку "Нова анімація" та додавши додаткові зображення.

Керування анімацією¶

Після завершення анімації ви можете керувати анімацією за допомогою коду користуючись методами play() та stop(). Ось короткий приклад для відтворення анімації під час утримання клавіші зі стрілкою вправо та зупинки її, коли клавіша буде випущена.

extends KinematicBody2D

onready var _animated_sprite = $AnimatedSprite

func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animated_sprite.play("run")
    else:
        _animated_sprite.stop()

public class Character : KinematicBody2D
{
    private AnimatedSprite _animatedSprite;

    public override void _Ready()
    {
        _animatedSprite = GetNode<AnimatedSprite>("AnimatedSprite");
    }

    public override _Process(float _delta)
    {
        if (Input.IsActionPressed("ui_right"))
        {
            _animatedSprite.Play("run");
        }
        else
        {
            _animatedSprite.Stop();
        }
    }
}

Аркуш спрайтів з AnimatedSprite¶

Ви також можете легко анімувати з спрайтового аркуша з класом AnimatedSprite. Ми будемо використовувати цей благодійний спрайт:

../../_images/2d_animation_frog_spritesheet.png

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

Налаштуйте своє дерево сцен так само, як і раніше при використанні окремих зображень. Виберіть AnimatedSprite і в його властивості SpriteFrames виберіть "New SpriteFrames".

Натисніть на новий ресурс SpriteFrames. Цього разу, коли з'явиться нижня панель, виберіть "Додати кадри з аркуша спрайтів".

../../_images/2d_animation_add_from_spritesheet.png

Вам буде запропоновано відкрити файл. Виберіть спрайтовий аркуш.

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

../../_images/2d_animation_spritesheet_select_rows.png

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

../../_images/2d_animation_spritesheet_selectframes.png

Тепер ви побачите свою анімацію під списком анімацій на нижній панелі. Двічі клацніть default, щоб змінити назву анімації на jump.

../../_images/2d_animation_spritesheet_animation.png

Нарешті, запустіть Playing AnimatedSprite в Інспекторі, щоб побачити стрибок жаби!

../../_images/2d_animation_play_spritesheet_animation.png

Спрайтовий аркуш з AnimationPlayer¶

Ще один спосіб анімування з допомогою спрайтового аркуша - це використовувати стандартний вузол Sprite для відображення текстури, а потім анімувати зміни від текстури до текстури за допомогою AnimationPlayer.

Розглянемо цей спрайтовий аркуш, який містить 6 кадрів анімації:

../../_images/2d_animation_player-run.png

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

Наша мета полягає в тому, щоб відображати ці зображення один за одним в циклі. Почніть з налаштування вашого дерева сцени:

Примітка

Кореневим вузлом також може бути Area2D, або RigidBody2D. Анімація все одно буде зроблена таким же чином. Після завершення анімації можна призначити форму зіткнення CollisionShape2D. Докладніше про це можна дізнатися зі Вступу до фізики.

Перетягніть спрайтовий аркуш у властивість спрайта Sprite Texture, і ви побачите весь аркуш на екрані. Щоб розділити його на окремі кадри, розгорніть розділ Animation в Інспекторі та встановіть в Hframes значення 6. Hframes і Vframes - це кількість горизонтальних і вертикальних кадрів у вашому спрайтовому аркуші.

../../_images/2d_animation_setframes.png

Тепер спробуйте змінити значення властивості Frame. Ви побачите, що коли воно коливається від 0 до 5 то зображення, що відображає Sprite, відповідно змінюється. Це та власність, яка буде задавати анімацію.

Виберіть AnimationPlayer і натисніть кнопку "Animation", а потім "New". Назвіть нову анімацію "walk". Встановіть довжину анімації 0.6 та натисніть значок зациклення, щоб наша анімація повторювалася.

../../_images/2d_animation_new_animation.png

Тепер виберіть вузол Sprite і натисніть значок ключа, щоб додати нову доріжку.

../../_images/2d_animation_new_track.png

Продовжуйте додавати кадри в кожній точці часової шкали (0.1 секунди за замовчуванням), поки у вас не будуть всі кадри від 0 до 5. Ви побачите кадри, які насправді з'являються в анімаційній доріжці:

../../_images/2d_animation_full_animation.png

Натисніть "Відтворити" на анімації, щоб побачити, як вона виглядає.

Керування анімацією AnimationPlayer¶

Як і у випадку з AnimatedSprite, ви можете керувати анімацією за допомогою коду використовуючи методи play() та stop(). Знову ж таки, ось приклад для відтворення анімації під час утримання клавіші зі стрілкою вправо, і зупинки її, коли клавіша буде відпущена.

extends KinematicBody2D

onready var _animation_player = $AnimationPlayer

func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animation_player.play("walk")
    else:
        _animation_player.stop()

public class Character : KinematicBody2D
{
    private AnimationPlayer _animationPlayer;

    public override void _Ready()
    {
        _animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
    }

    public override void _Process(float _delta)
    {
        if (Input.IsActionPressed("ui_right"))
        {
            _animationPlayer.Play("walk");
        }
        else
        {
            _animationPlayer.Stop();
        }
    }
}

Примітка

Якщо оновлювати одночасно анімації і окрему властивість (наприклад, платформер може оновити властивості спрайта h_flip/v_flip, коли персонаж повертається під час запуску анімації "повороту"), важливо мати на увазі, що play() не застосовується миттєво. Застосування відбувається під час наступної обробки AnimationPlayer. І може, в кінцевому підсумку, опинитися на наступному кадрі, викликаючи "збій" кадра, де була застосована зміна властивості, але анімація не відбулася. Якщо це виявиться проблемою, після виклику play() можна відразу викликати advance(0), щоб оновити анімацію.

Підсумок¶

Ці приклади ілюструють два класи, які ви можете використовувати в Godot для 2D-анімації. AnimationPlayer є трохи складнішим, ніж AnimatedSprite, але він забезпечує додаткову функціональність, оскільки ви також можете анімувати інші властивості, такі як положення або масштаб. Клас AnimationPlayer також можна використовувати з AnimatedSprite. Поекспериментуйте, щоб побачити, що найкраще підходить для ваших потреб.