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
. Поэкспериментируйте, чтобы увидеть, что лучше всего подходит для ваших нужд.