2D анимация спрайтов¶
Введение¶
В этом уроке вы узнаете, как создавать анимированных 2D персонажей с помощью класса AnimatedSprite и AnimationPlayer. Как правило, когда вы создаете или загружаете анимированного персонажа, он представлен одним из двух способов: в виде отдельных изображений или в виде одного спрайт-листа, содержащего все кадры анимации. Оба могут быть анимированы в Godot с помощью класса AnimatedSprite.
Сначала мы будем использовать AnimatedSprite для анимации коллекции отдельных изображений. Затем мы анимируем спрайт-лист, используя этот класс. Наконец, мы изучим ещё один способ анимации спрайт-листа с помощью Animation Player и свойства Animation узла : ref:Sprite <class_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) с использованием AnimatedSprite¶
Вы также можете легко анимировать из спрайт-листа с помощью класса AnimatedSprite. Мы будем использовать этот спрайт-лист из открытых источников:
Щелкните правой кнопкой мыши изображение и выберите "Сохранить картинку как", чтобы загрузить его, а затем скопируйте изображение в папку вашего проекта.
Настройте дерево сцены так же, как вы делали это ранее при использовании отдельных изображений. Выберите AnimatedSprite и в свойстве Frames выберите "New SpriteFrames".
Нажмите на новый ресурс Sprite Frames. На этот раз, когда появится нижняя панель, выберите "Add frames from a Sprite Sheet".
Вам будет предложено открыть файл. Выберите свой спрайт-лист.
Откроется новое окно, в котором будет показан ваш спрайт-лист. Первое, что вам нужно будет сделать, это изменить количество вертикальных и горизонтальных изображений на листе спрайта. На этом спрайт-листе у нас есть четыре изображения по горизонтали и два изображения по вертикали.
Затем выберите кадры из спрайт-листа, которые вы хотите включить в анимацию. Мы выберем четыре верхних кадра, затем нажмите "Add 4 frames", чтобы создать анимацию.
Теперь вы увидите свою анимацию в списке анимаций в нижней панели. Дважды щёлкните по "default", чтобы изменить название анимации на "jump".
Наконец, отметьте "Playing" у "AnimatedSprite" в инспекторе, чтобы увидеть, как прыгает ваша лягушка!
Спрайтовый лист с использованием 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. Вы увидите кадры, которые на самом деле появляются в анимационной дорожке:
Нажмите "Воспроизвести выбранную анимацию с текущей позиции" , чтобы увидеть, как она выглядит.
Управление анимацией 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. Поэкспериментируйте, чтобы увидеть, что лучше всего подходит для ваших нужд.