Управление воспроизведением: play, stop, gotoAndPlay

В PixiJS анимации обычно реализуются с помощью класса PIXI.AnimatedSprite, который позволяет управлять последовательностью кадров из текстур. Для создания анимации необходимо собрать массив текстур:

const textures = [];
for (let i = 0; i < 10; i++) {
    const texture = PIXI.Texture.from(`frame${i}.png`);
    textures.push(texture);
}

const animSprite = new PIXI.AnimatedSprite(textures);

Ключевые параметры:

  • animationSpeed — скорость воспроизведения, где 1 соответствует исходной частоте кадров (обычно 60 FPS).
  • loop — логическое значение, определяющее, будет ли анимация зациклена.
  • play() — запускает воспроизведение с текущего кадра.
  • stop() — останавливает воспроизведение на текущем кадре.
  • gotoAndPlay(frameNumber) — перемещает анимацию на указанный кадр и запускает воспроизведение.
  • gotoAndStop(frameNumber) — перемещает анимацию на указанный кадр и останавливает её.

Управление воспроизведением

Метод play()

Метод play() запускает анимацию с текущего кадра. Если объект только что создан и метод play() ещё не вызывался, воспроизведение начнётся с первого кадра.

animSprite.loop = true;
animSprite.animationSpeed = 0.5;
animSprite.play();
  • Если анимация уже воспроизводится, вызов play() не вызывает сдвига или перезапуска.
  • Метод работает как для зацикленных, так и для однократных анимаций.

Метод stop()

Метод stop() приостанавливает воспроизведение на текущем кадре:

animSprite.stop();
console.log(animSprite.currentFrame); // выводит текущий кадр
  • Очень полезен для синхронизации с логикой игры или интерфейса.
  • После stop() можно использовать gotoAndPlay() или gotoAndStop() для точного управления кадром.

Методы gotoAndPlay() и gotoAndStop()

Эти методы позволяют мгновенно перейти к конкретному кадру:

animSprite.gotoAndPlay(5); // с 5-го кадра воспроизводить дальше
animSprite.gotoAndStop(2); // перейти на 2-й кадр и остановиться

Особенности использования:

  • Нумерация кадров начинается с 0.
  • Если указанный кадр выходит за пределы массива текстур, будет выброшена ошибка.
  • gotoAndPlay() автоматически запускает воспроизведение независимо от предыдущего состояния.
  • gotoAndStop() удобно использовать для интерактивных элементов интерфейса, где требуется отображение конкретного состояния (например, кнопка в состоянии hover).

Настройка анимации

Скорость воспроизведения (animationSpeed) регулируется числом с плавающей точкой:

animSprite.animationSpeed = 0.2; // замедление анимации
animSprite.play();
  • Значение 1 соответствует стандартной частоте кадров.
  • Значения меньше 1 замедляют анимацию, больше 1 ускоряют.

Цикличность анимации (loop) управляет повторением:

animSprite.loop = false; // анимация выполнится один раз
animSprite.onCompl ete = () => {
    console.log("Анимация завершена");
};
animSprite.play();
  • onComplete срабатывает при окончании не зацикленной анимации.
  • В сочетании с gotoAndPlay() можно реализовать динамическое воспроизведение разных участков спрайта.

Синхронизация и события

PixiJS позволяет реагировать на события анимации:

  • onFrameChange — вызывается при смене кадра:
animSprite.onFrameCha nge = (currentFrame) => {
    console.log(`Сменился кадр на ${currentFrame}`);
};
  • onLoop — вызывается при завершении одного цикла воспроизведения зацикленной анимации:
animSprite.onL oop = () => {
    console.log("Цикл завершён");
};

Эти события полезны для синхронизации звуков, визуальных эффектов и игровой логики.

Практические рекомендации

  • Для оптимизации лучше использовать спрайтлисты (spritesheets) вместо отдельных файлов, так как это снижает нагрузку на GPU.
  • Комбинация gotoAndPlay() и stop() позволяет создавать сложные сценарии воспроизведения, где анимация может быть интерактивно управляемой и изменяться в зависимости от состояния игры.
  • Использование animationSpeed вместе с игровым таймером обеспечивает гибкое управление временем анимации.

Пример комплексного использования

animSprite.loop = false;
animSprite.animationSpeed = 0.3;

animSprite.onCompl ete = () => {
    animSprite.gotoAndPlay(0); // повторяем с первого кадра
};

animSprite.gotoAndPlay(3); // начинаем с кадра 3

В этом примере анимация запускается с конкретного кадра, проходит до конца, а затем автоматически перезапускается. Это позволяет создавать циклические анимации с произвольной точкой начала.

Оглавление