2D анимация спрайтов¶
Введение¶
В этом уроке вы узнаете, как создавать анимированных 2D персонажей с помощью класса AnimatedSprite и AnimationPlayer. Как правило, когда вы создаете или загружаете анимированного персонажа, он представлен одним из двух способов: в виде отдельных изображений или в виде одного спрайт-листа, содержащего все кадры анимации. Оба могут быть анимированы в Godot с помощью класса AnimatedSprite.
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¶
В этом случае у вас есть коллекция изображений, каждое из которых содержит один из анимационных кадров вашего персонажа. Для этого примера мы будем использовать следующую анимацию:
Вы можете скачать изображения здесь: run_animation.zip
Распакуйте изображения и поместите их в папку вашего проекта. Настройте дерево сцены со следующими узлами:
Примечание
Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.
Теперь выберите AnimatedSprite и в свойстве Frames выберите "Новый SpriteFrames".
Нажмите на новый ресурс Sprite Frames, и вы увидите, что в нижней части окна редактора появится новая панель:
Из панели "Файловая система" слева перетащите 8 отдельных изображений в центральную часть панели "Спрайт кадры". С левой стороны измените название анимации с "default" на "run".
Вернувшись в Инспектор, установите флажок для свойства 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:
Щелкните правой кнопкой мыши изображение и выберите "Сохранить картинку как", чтобы загрузить его, а затем скопируйте изображение в папку вашего проекта.
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".
Вам будет предложено открыть файл. Выберите свой спрайт-лист.
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.
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.
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.
Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump!
Sprite sheet with AnimationPlayer¶
Другой способ, которым вы можете создавать анимацию используя спрайт-лист, - это использовать стандартный узел Sprite для отображения текстуры, а затем анимировать замену текстуры на текстуру с помощью AnimationPlayer.
Рассмотрим этот спрайт-лист, который содержит 6 кадров анимации:
Щелкните правой кнопкой мыши изображение и выберите "Сохранить изображение как" для загрузки, затем скопируйте изображение в папку вашего проекта.
Наша цель состоит в том, чтобы отображать эти изображения одно за другим в цикле. Начните с настройки дерева сцены:
Примечание
Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.
Перетащите спрайт-лист в свойство Texture спрайта, и вы увидите весь лист на экране. Чтобы разделить его на отдельные кадры, разверните раздел Animation в Инспекторе и установите для Hframes значение 6. Hframes и Vframes - это количество горизонтальных и вертикальных кадров на спрайт-листе.
Теперь попробуйте изменить значение свойства Frame. Вы увидите, что он колеблется от 0 до 5, и изображение, отображаемое спрайтом, соответственно меняется. Это свойство, которое мы будем анимировать.
Выберите AnimationPlayer и нажмите кнопку "Анимация", за которой следует "Новый". Назовите новую анимацию "walk". Установите длину анимации на 0.6 и нажмите кнопку "Зацикливание анимации", чтобы наша анимация повторялась.
Теперь выберите узел Sprite и нажмите значок ключа, чтобы добавить новую дорожку.
Продолжайте добавлять кадры в каждой точке временной шкалы (по умолчанию``0.1`` секунды), пока не получите все кадры от 0 до 5. Вы увидите кадры, которые на самом деле появляются в анимационной дорожке:
Нажмите "Воспроизвести выбранную анимацию с текущей позиции" , чтобы увидеть, как она выглядит.
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.