Анимация спрайтов: playAnimation

В Babylon.js анимация спрайтов реализуется через объект Sprite и менеджер спрайтов SpriteManager. Спрайты позволяют отображать 2D-изображения в 3D-сцене и создавать сложные анимационные эффекты без использования тяжелых 3D-моделей. Ключевой метод для управления анимацией спрайта — playAnimation.

sprite.playAnimation(from, to, loop, delay);
  • from — индекс начального кадра в спрайтовой последовательности.
  • to — индекс конечного кадра.
  • loop — булево значение, определяющее повторение анимации (true — бесконечный цикл, false — один прогон).
  • delay — задержка между кадрами в миллисекундах.

Настройка SpriteManager

Перед созданием спрайтов необходим SpriteManager, который управляет текстурой и количеством спрайтов:

const spriteManager = new BABYLON.SpriteManager(
    "playerManager",
    "textures/player.png", // текстура со спрайтами
    10,                    // максимальное количество спрайтов
    {width:64, height:64}, // размер одного кадра
    scene
);
  • Первый параметр — уникальное имя менеджера.
  • Второй — путь к изображению, содержащему спрайты (spritesheet).
  • Третий — максимальное число спрайтов, которое будет использоваться.
  • Четвёртый — размеры отдельного кадра спрайта.

После создания менеджера можно добавлять отдельные спрайты:

const player = new BABYLON.Sprite("player", spriteManager);
player.position.y = 1;
player.size = 2;

Метод playAnimation

Метод playAnimation позволяет задать последовательность кадров и управлять цикличностью:

player.playAnimation(0, 5, true, 100);
  • Начальный кадр — 0.
  • Конечный кадр — 5.
  • Анимация будет повторяться бесконечно (loop = true).
  • Задержка между кадрами — 100 миллисекунд.

Для однократного воспроизведения достаточно установить loop = false:

player.playAnimation(6, 10, false, 80);

Комбинирование анимаций

Спрайт может иметь несколько анимационных последовательностей, например, «ходьба», «атака», «прыжок». Для переключения между ними используется playAnimation с разными диапазонами кадров:

function playWalk() {
    player.playAnimation(0, 5, true, 100);
}

function playAttack() {
    player.playAnimation(6, 10, false, 80);
}

Использование разных диапазонов кадров позволяет экономно хранить все состояния персонажа в одном spritesheet.

Управление скоростью анимации

Параметр delay определяет скорость смены кадров. Меньшее значение увеличивает частоту смены кадров, создавая более быструю анимацию. Например:

player.playAnimation(0, 5, true, 50); // анимация в два раза быстрее

Для динамического изменения скорости можно сохранять идентификатор анимации и корректировать delay через таймер:

let frame = 0;
let speed = 50;
scene.onBeforeRenderObservable.add(() => {
    frame++;
    if(frame % speed === 0){
        player.playAnimation(0, 5, true, speed);
    }
});

Советы по оптимизации

  • Использовать один SpriteManager для группы однотипных спрайтов.
  • Размер spritesheet должен быть кратен размеру кадра, чтобы избежать смещения изображений.
  • Для сложных анимаций лучше разбивать спрайты на несколько последовательностей с разными менеджерами, если необходимо отдельное управление.
  • Избегать частого вызова playAnimation без необходимости — метод автоматически перезапускает анимацию, что может вызывать визуальные «тормоза».

Встроенные события анимации

Babylon.js позволяет отслеживать конец анимации через onAnimationEndObservable:

player.onAnimationEndObservable.add(() => {
    console.log("Анимация завершена");
    player.playAnimation(0, 5, true, 100); // возвращаемся к ходьбе
});

Это удобно для перехода между состояниями персонажа, особенно когда loop = false.

Примеры продвинутого использования

  1. Петля с паузами: можно динамически изменять delay между кадрами для эффекта замедления.
  2. Смешивание анимаций: плавно переключать спрайт с одной последовательности кадров на другую через таймер или событие.
  3. Событийная реакция: запуск анимации удара при столкновении с объектом, а по завершении возвращение к idle.

Эта функциональность делает playAnimation центральным инструментом для создания интерактивных 2D-анимаций в 3D-сцене Babylon.js, позволяя эффективно управлять поведением персонажей и объектов, сохраняя при этом производительность.

Оглавление