2D спрайтовая анимация
Введение
В этом уроке вы узнаете, как создавать 2D анимированных персонажей с помощью классов AnimatedSprite2D и AnimationPlayer. Обычно, когда вы создаете или загружаете анимированного персонажа, он будет представлен одним из двух способов: как отдельные изображения или как единый лист спрайтов, содержащий все кадры анимации. Оба варианта можно анимировать в Godot с помощью класса AnimatedSprite2D.
Сначала мы будем использовать AnimatedSprite2D для анимации коллекции отдельных изображений. Затем мы анимируем лист спрайтов с помощью этого класса. Наконец, мы изучим другой способ анимации листа спрайтов с помощью AnimationPlayer и свойства Animation Sprite2D.
Примечание
Иллюстрации к следующим примерам: https://opengameart.org/users/ansimuz и tgfcoder.
Отдельные изображения с AnimatedSprite2D
В этом случае у вас есть коллекция изображений, каждое из которых содержит один из анимационных кадров вашего персонажа. Для этого примера мы будем использовать следующую анимацию:
Вы можете скачать изображения здесь: 2d_sprite_animation_assets.zip
Распакуйте изображения и поместите их в папку вашего проекта. Настройте дерево сцены со следующими узлами:
Примечание
Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.
Теперь выберите свойство AnimatedSprite2D и в свойстве SpriteFrames, выберите "New SpriteFrames".
Нажмите на новый ресурс Sprite Frames, и вы увидите, что в нижней части окна редактора появится новая панель:
Из панели "Файловая система" слева перетащите 8 отдельных изображений в центральную часть панели "Спрайт кадры". С левой стороны измените название анимации с "default" на "run".
Используйте кнопки "Play" в верхнем правом вводах * Filter Animation * для предварительного просмотра анимации. Теперь вы должны увидеть анимацию, играющую в просмотре. Однако это немного медленно. Чтобы исправить это, измените настройку Speed (FPS) на панели SpriteFrames на 10.
Вы можете добавить дополнительную анимацию, нажав кнопку "Add Animation" и добавив дополнительные изображения.
Управление анимацией
После завершения анимации вы можете управлять ею с помощью кода, используя методы play() и stop(). Вот краткий пример воспроизведения анимации при удержании клавиши со стрелкой вправо и ее остановки при отпускании клавиши.
extends CharacterBody2D
@onready var _animated_sprite = $AnimatedSprite2D
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animated_sprite.play("run")
else:
_animated_sprite.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimatedSprite2D _animatedSprite;
public override void _Ready()
{
_animatedSprite = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.Stop();
}
}
}
Спрайт лист с AnimatedSprite2D
Вы также можете легко оживить из листа спрайта с классом AnimatedSprite2D. Мы будем использовать этот лист спрайта общедоступного достояния:
Щелкните правой кнопкой мыши изображение и выберите "Сохранить картинку как", чтобы загрузить его, а затем скопируйте изображение в папку вашего проекта.
Установите дерево сцены так же, как и раньше при использовании отдельных изображений. Выберите свойство AnimatedSprite2D и в свойстве SpriteFrames, выберите "New SpriteFrames".
Нажмите на новый ресурс Sprite Frames. На этот раз, когда появится нижняя панель, выберите "Add frames from a Sprite Sheet".
Вам будет предложено открыть файл. Выберите свой спрайт-лист.
Откроется новое окно, в котором будет показан ваш спрайт-лист. Первое, что вам нужно будет сделать, это изменить количество вертикальных и горизонтальных изображений на листе спрайта. На этом спрайт-листе у нас есть четыре изображения по горизонтали и два изображения по вертикали.
Затем выберите кадры из спрайт-листа, которые вы хотите включить в анимацию. Мы выберем четыре верхних кадра, затем нажмите "Add 4 frames", чтобы создать анимацию.
Теперь вы увидите свою анимацию в списке анимаций в нижней панели. Дважды щёлкните по "default", чтобы изменить название анимации на "jump".
Наконец, проверьте кнопку воспроизведения в редакторе SpriteFrames, чтобы увидеть прыжок лягушки!
Спрайтовый лист с использованием AnimationPlayer
Другой способ, которым вы можете анимировать при использовании листа спрайта, - это использовать стандарт Sprite2D Узел для отображения текстуры, а затем анимировать изменение от текстуры на текстуру с помощью AnimationPlayer.
Рассмотрим этот спрайт-лист, который содержит 6 кадров анимации:
Щелкните правой кнопкой мыши изображение и выберите "Сохранить изображение как" для загрузки, затем скопируйте изображение в папку вашего проекта.
Наша цель состоит в том, чтобы отображать эти изображения одно за другим в цикле. Начните с настройки дерева сцены:
Примечание
Корневым узлом также может быть Area2D или RigidBody2D. Анимация по - прежнему будет выполнена таким же образом. Как только анимация будет завершена, вы можете назначить фигуру CollisionShape2D. См. Введение в физику для получения дополнительной информации.
Перетащите спрайт-лист в свойство Texture спрайта, и вы увидите весь лист на экране. Чтобы разделить его на отдельные кадры, разверните раздел Animation в Инспекторе и установите для Hframes значение 6. Hframes и Vframes - это количество горизонтальных и вертикальных кадров на спрайт-листе.
Теперь попробуйте изменить значение свойства Frame. Вы увидите, что он варьируется от `` 0`` до `` 5``, и изображение, отображаемое с помощью Sprite2D, соответственно. Это свойство, которое мы будем анимировать.
Выберите AnimationPlayer и нажмите кнопку "Анимация", за которой следует "Новый". Назовите новую анимацию "walk". Установите длину анимации на 0.6 и нажмите кнопку "Зацикливание анимации", чтобы наша анимация повторялась.
Теперь выберите узел Sprite2D и нажмите значок ключа, чтобы добавить новый трек.
Продолжайте добавлять кадры в каждой точке временной шкалы (по умолчанию``0.1`` секунды), пока не получите все кадры от 0 до 5. Вы увидите кадры, которые на самом деле появляются в анимационной дорожке:
Нажмите "Воспроизвести выбранную анимацию с текущей позиции" , чтобы увидеть, как она выглядит.
Управление анимацией AnimationPlayer
Как и в случае с AnimatedSprite2d, вы можете управлять анимацией с помощью кода, используя методы play() и stop(). Опять же, вот пример воспроизведения анимации, в то время как правая клавиша стрелки удерживается, и остановите ее, когда ключ будет выпущен.
extends CharacterBody2D
@onready var _animation_player = $AnimationPlayer
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animation_player.play("walk")
else:
_animation_player.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimationPlayer _animationPlayer;
public override void _Ready()
{
_animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animationPlayer.Play("walk");
}
else
{
_animationPlayer.Stop();
}
}
}
Примечание
При обновлении как анимации, так и отдельного свойства одновременно (например, платформер может обновить свойства Sprite `` h_flip` '/`` v_flip``, когда персонаж поворачивается, начав анимацию «поворот»), важно помнить, что play() не применяется мгновенно. Вместо этого он применяется в следующий раз AnimationPlayer когда обрабатывается. Это может в конечном итоге оказаться на следующем кадре, вызывая кадр 'glitch', где было применено изменение свойства, но анимация не была. Если это оказывается проблемой, после вызова play(), вы можете вызвать advance(0), чтобы немедленно обновить анимацию.
Подведение итогов
Эти примеры иллюстрируют два класса, которые вы можете использовать в Godot для 2D -анимации. AnimationPlayer немного сложнее, чем AnimatedSprite2D, о он обеспечивает дополнительную функциональность, поскольку вы также можете оживить другие свойства, такие как положение или масштаб. Класс AnimationPlayer также может использоваться с AnimatedSprite2D. Экспериментируйте, чтобы увидеть, что лучше всего подходит для ваших нужд.