Анимация ходьбы спрайта: как сделать и подключить в Godot

Автор: Егор.

Ходьба из четырёх кадров на каждое направление: как её собрать, как подключить в Godot 4 и какой код нужен, чтобы персонаж поворачивался куда идёт.

Как устроена ходьба

Анимация ходьбы в двумерной игре это короткий цикл, который играет по кругу, пока персонаж идёт. Ноги расходятся, сходятся, расходятся другой ногой и снова сходятся. Корпус при этом слегка покачивается вверх и вниз. Цикл из четырёх кадров уже читается как шаг. Шесть и восемь кадров дают больше плавности, но их дольше рисовать и дольше проверять.

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

Четыре кадра ходьбы Эльфа-лучника вниз, увеличено в четыре раза
Четыре кадра цикла ходьбы вниз, увеличено в четыре раза.

Если рисовать вручную

В Aseprite делают так. На временной шкале создают цикл, включают режим «луковой кожи» (onion skin), чтобы видеть предыдущий кадр полупрозрачным, и сдвигают ноги и руки от кадра к кадру. Корпус поднимают и опускают на один пиксель. Частая беда новичков называется «скольжение»: ноги двигаются, но стопа скользит по земле, потому что за кадр стопа сдвигается на другое расстояние, чем сам персонаж. Лечится это подгонкой скорости движения под длину шага.

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

Если собрать в Пиксельне

Сервис делает цикл из четырёх кадров на каждое направление. Порядок такой:

  1. Откройте «Генерировать», отдел «Персонажи», вкладка «Анимация».
  2. Выберите готового персонажа, которого вы уже сделали на вкладке «Лист 8 направлений», или опишите нового.
  3. Действие выберите «Ходьба». Есть ещё «Покой», «Атака» и «Своё»: в нём вы словами пишете, что делает персонаж, например «падает и умирает».
  4. Выберите число направлений: четыре или восемь. У босса 128 доступны четыре.
  5. Нажмите «Сделать».

Ходьба и покой играют по кругу. Атака и «Своё» играют один раз. Это важно для кода, ниже я к этому вернусь.

На выходе вы получаете GIF для каждой стороны, лист кадров PNG, JSON с длительностью кадров и архивы для Godot, Unity, Aseprite и GameMaker. Плюс универсальный набор из отдельных PNG для любого другого движка. Цена: 15 кристаллов за четыре направления и 30 за восемь. Поштучно это 22 и 44 ₽. Если персонажа ещё нет и вы описали нового, к цене анимации добавляется лист персонажа.

Лист ходьбы Эльфа-лучника: четыре ряда по четыре кадра, направления вниз, влево, вправо, вверх
Готовый лист кадров: ряды сверху вниз это вниз, влево, вправо и вверх, в каждом по четыре кадра.
Анимация ходьбы Эльфа-лучника вниз
GIF одного направления, так его видно сразу после генерации.

Если ракурс получился неровным, служба один раз перерисовывает сетку бесплатно, а дальше можно нажать «Переделать» за 15 кристаллов. Недочёты в отдельных кадрах можно поправить в Aseprite: для него в архиве лежит готовый файл и JSON.

Подключаем к Godot 4

В архиве для Godot лежат лист кадров, файл ресурса SpriteFrames с расширением .tres, сцена-пример и текстовая инструкция. Дальше шаги такие.

  1. Положите папку из архива в проект, куда угодно внутри res://, и дождитесь импорта картинки.
  2. Откройте сцену-пример и запустите её клавишей F6. Персонаж проиграет первую анимацию. Так вы убедитесь, что всё импортировалось.
  3. В своей сцене добавьте узел AnimatedSprite2D. В свойстве Sprite Frames выберите «Load» и укажите файл .tres из архива.
  4. Для чёткого пикселя поставьте у узла CanvasItem, Texture, Filter значение Nearest. Лучше сделать это для всего проекта: Project Settings, Rendering, Textures, Default Texture Filter.

Имена анимаций в ресурсе складываются из действия и стороны света: walk_s, walk_n, walk_e и walk_w для четырёх направлений. Для восьми добавляются walk_se, walk_sw, walk_ne и walk_nw. Для покоя и атаки префиксы idle и attack. Буква s значит «вниз», n «вверх», e «вправо», w «влево».

Код: герой ходит в четыре стороны

Скрипт для узла CharacterBody2D с дочерним AnimatedSprite2D. Входные действия ui_left, ui_right, ui_up и ui_down уже есть в любом новом проекте Godot 4.

extends CharacterBody2D

const SKOROST := 90.0

@onready var sprite: AnimatedSprite2D = $AnimatedSprite2D

var storona := "s"

func _physics_process(_delta: float) -> void:
	var vvod := Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
	velocity = vvod * SKOROST
	move_and_slide()

	if vvod == Vector2.ZERO:
		sprite.stop()
		return

	if absf(vvod.x) > absf(vvod.y):
		storona = "e" if vvod.x > 0.0 else "w"
	else:
		storona = "s" if vvod.y > 0.0 else "n"
	sprite.play("walk_" + storona)

Метод play с тем же именем, которое уже играет, цикл не перезапускает, поэтому вызывать его каждый кадр можно. Когда игрок отпускает кнопки, stop возвращает анимацию на первый кадр, и герой стоит ровно.

Восемь направлений

Для листа на восемь сторон нужно выбрать из вектора движения одно из восьми имён. Угол вектора делят на сектора по 45 градусов. В Godot ось Y направлена вниз, поэтому угол растёт по часовой стрелке, начиная с «вправо».

const SUFFIKSY := ["e", "se", "s", "sw", "w", "nw", "n", "ne"]

func _suffiks(vvod: Vector2) -> String:
	var sektor := roundi(vvod.angle() / (TAU / 8.0))
	return SUFFIKSY[posmod(sektor, 8)]

В _physics_process после проверки на ноль останется одна строка: sprite.play("walk_" + _suffiks(vvod)). Блок с выбором между «e» и «w» уже не нужен.

Атака один раз

Если вы сделали анимацию «Атака», её удобно проиграть до конца и вернуть управление. Для этого в панели SpriteFrames у анимации attack должен быть выключен Loop: у зацикленной анимации сигнал animation_finished не приходит.

var atakuet := false

func udar() -> void:
	if atakuet:
		return
	atakuet = true
	velocity = Vector2.ZERO
	sprite.play("attack_" + storona)
	await sprite.animation_finished
	atakuet = false

В начале _physics_process добавьте if atakuet: return, чтобы герой не шёл во время удара.

Unity и другие движки

Для Unity в архиве есть лист с настройками нарезки и готовые клипы анимации. Для GameMaker складываются папки спрайтов в двух форматах, для версий 2.3 до 2023 и для 2024 и новее. В универсальном наборе лежат отдельные кадры и JSON с длительностью каждого кадра: по нему легко собрать анимацию в любом движке. У ходьбы в этом JSON стоит 150 миллисекунд на кадр, это около шести с половиной кадров в секунду.

Попробовать

Сделайте ходьбу для своего героя в четыре или восемь сторон и заберите архив для Godot.

Открыть мастерскую

Читайте дальше