2D анимация спрайтов

Введение

In this tutorial, you'll learn how to create 2D animated characters with the AnimatedSprite class and the AnimationPlayer. Typically, when you create or download an animated character, it will come in one of two ways: as individual images or as a single sprite sheet containing all the animation's frames. Both can be animated in Godot with the AnimatedSprite class.

First, we'll use AnimatedSprite to animate a collection of individual images. Then we will animate a sprite sheet using this class. Finally, we will learn another way to animate a sprite sheet with AnimationPlayer and the Animation property of Sprite.

Примечание

Изображения для следующих примеров предоставлены https://opengameart.org/users/ansimuz и https://opengameart.org/users/tgfcoder

Отдельные изображения и AnimatedSprite

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

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

Вы можете скачать изображения здесь: run_animation.zip

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

../../_images/2d_animation_tree1.png

Примечание

Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.

Теперь выберите AnimatedSprite и в свойстве Frames выберите "Новый SpriteFrames".

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

Нажмите на новый ресурс Sprite Frames, и вы увидите, что в нижней части окна редактора появится новая панель:

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

Из панели "Файловая система" слева перетащите 8 отдельных изображений в центральную часть панели "Спрайт кадры". С левой стороны измените название анимации с "default" на "run".

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

Вернувшись в Инспектор, установите флажок для свойства Playing. Теперь вы должны увидеть анимацию, воспроизводимую в окне просмотра. Однако она немного медленная. Чтобы исправить это, измените параметр Скорость (FPS) на панели "Спрайт кадры" на 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();
        }
    }
}

Sprite sheet with AnimatedSprite

You can also easily animate from a sprite sheet with the class AnimatedSprite. We will use this public domain sprite sheet:

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

Щелкните правой кнопкой мыши изображение и выберите "Сохранить картинку как", чтобы загрузить его, а затем скопируйте изображение в папку вашего проекта.

Set up your scene tree the same way you did previously when using individual images. Select the AnimatedSprite and in its SpriteFrames property, select "New SpriteFrames".

Click on the new SpriteFrames resource. This time, when the bottom panel appears, select "Add frames from a Sprite Sheet".

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

You will be prompted to open a file. Select your sprite sheet.

A new window will open, showing your sprite sheet. The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet. In this sprite sheet, we have four images horizontally and two images vertically.

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

Next, select the frames from the sprite sheet that you want to include in your animation. We will select the top four, then click "Add 4 frames" to create the animation.

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

You will now see your animation under the list of animations in the bottom panel. Double click on default to change the name of the animation to jump.

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

Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump!

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

Sprite sheet with AnimationPlayer

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

Рассмотрим этот спрайт-лист, который содержит 6 кадров анимации:

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

Щелкните правой кнопкой мыши изображение и выберите "Сохранить изображение как" для загрузки, затем скопируйте изображение в папку вашего проекта.

Наша цель состоит в том, чтобы отображать эти изображения одно за другим в цикле. Начните с настройки дерева сцены:

../../_images/2d_animation_tree2.png

Примечание

Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.

Перетащите спрайт-лист в свойство Texture спрайта, и вы увидите весь лист на экране. Чтобы разделить его на отдельные кадры, разверните раздел Animation в Инспекторе и установите для Hframes значение 6. Hframes и Vframes - это количество горизонтальных и вертикальных кадров на спрайт-листе.

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

Теперь попробуйте изменить значение свойства Frame. Вы увидите, что он колеблется от 0 до 5, и изображение, отображаемое спрайтом, соответственно меняется. Это свойство, которое мы будем анимировать.

Выберите AnimationPlayer и нажмите кнопку "Анимация", за которой следует "Новый". Назовите новую анимацию "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

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

../../_images/2d_animation_running.gif

Controlling an AnimationPlayer animation

Как и в случае с 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), чтобы немедленно обновить анимацию.

Подведение итогов

These examples illustrate the two classes you can use in Godot for 2D animation. AnimationPlayer is a bit more complex than AnimatedSprite, but it provides additional functionality, since you can also animate other properties like position or scale. The class AnimationPlayer can also be used with an AnimatedSprite. Experiment to see what works best for your needs.