Класс Ticker и его роль

В PixiJS управление циклом рендеринга и обновлением объектов сцены осуществляется с помощью класса Ticker. Он является центральным механизмом для создания анимаций, синхронизации логики игры и плавного обновления визуальных элементов. Ticker обеспечивает вызов функций с определённой частотой кадров, управляемой внутренним таймером, и позволяет строить независимые от скорости процессора анимации.

Создание и использование Ticker

Объект Ticker создаётся через конструктор:

const ticker = new PIXI.Ticker();

или через глобальный синглтон:

const ticker = PIXI.Ticker.shared;

Ticker.shared используется для управления общим циклом приложения, что удобно, если требуется синхронизировать анимации разных объектов без создания множества отдельных тикеров.

Добавление функции для регулярного вызова выполняется методом:

ticker.add((deltaTime) => {
    // Логика обновления объектов
});

Параметр deltaTime отражает количество тикеров, прошедших с последнего кадра, нормализованное относительно 60 FPS. Это позволяет создавать анимации с одинаковой скоростью на различных устройствах, независимо от реальной частоты обновления экрана.

Управление частотой и запуск Ticker

Для контроля частоты кадров используется свойство ticker.speed, которое умножает значение deltaTime:

ticker.speed = 1.5; // Ускорение всех анимаций на 50%

Запуск и остановка тикера осуществляется методами:

ticker.start();
ticker.stop();

start() активирует внутренний цикл и начинает вызов добавленных функций, а stop() приостанавливает его, что полезно для пауз или оптимизации производительности при скрытых сценах.

Методы и свойства класса Ticker

  • add(fn, context, once) — добавляет функцию в очередь обновления. Если once = true, функция будет вызвана только один раз.
  • remove(fn, context) — удаляет ранее добавленную функцию.
  • update(deltaTime) — принудительно вызывает все функции обновления один раз с указанным deltaTime.
  • deltaTime — количество тиков, прошедших с последнего обновления.
  • deltaMS — фактическое время в миллисекундах между кадрами.
  • autoStart — определяет, запускается ли тикер автоматически при добавлении функций (по умолчанию true).

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

Применение в анимациях и играх

Ticker применяется для:

  1. Обновления позиции и состояния спрайтов:
ticker.add((delta) => {
    sprite.x += 5 * delta;
    sprite.rotation += 0.01 * delta;
});
  1. Управления игровым таймером и логикой:
let timeElapsed = 0;
ticker.add((delta) => {
    timeElapsed += delta;
    if (timeElapsed > 60) {
        spawnEnemy();
        timeElapsed = 0;
    }
});
  1. Интеграции с Tween-библиотеками: Ticker выступает источником обновлений для плавных переходов и анимационных эффектов, обеспечивая синхронизацию с глобальным циклом рендеринга.

Взаимодействие с Renderer

Ticker тесно связан с рендерером PixiJS. В большинстве случаев глобальный тикер добавляет в цикл метод renderer.render(stage), что позволяет автоматически обновлять сцену при каждом кадре:

ticker.add(() => {
    app.renderer.render(app.stage);
});
ticker.start();

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

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

  • Использовать Ticker.shared для большинства сценариев, чтобы избежать создания лишних циклов.
  • Для одноразовых эффектов применять once = true, чтобы не держать функцию в памяти дольше необходимого.
  • Контролировать ticker.speed для адаптации анимации под разные условия, например, ускорение или замедление игры.
  • Применять deltaTime для расчёта движения объектов, что обеспечивает одинаковую скорость на разных устройствах и частотах обновления.

Ticker является ядром системы анимации и управления временем в PixiJS. Его правильное использование обеспечивает плавность визуальных эффектов, стабильность игрового процесса и эффективное распределение ресурсов.

Оглавление