Ticker приложения и общий Ticker.shared

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

Ticker не зависит от конкретного рендера, но тесно интегрирован с объектом Application, автоматически вызывая его метод render при каждом обновлении, если это настроено.

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

Для создания собственного Ticker используется класс PIXI.Ticker:

const ticker = new PIXI.Ticker();

После создания можно добавлять функции-обработчики, которые будут вызываться на каждом кадре:

ticker.add((delta) => {
    sprite.x += 1 * delta;
});

Параметр delta отражает количество прошедших “кадров” с момента предыдущего вызова. Это позволяет корректировать скорость анимации в зависимости от фактической частоты кадров, обеспечивая frame-independent motion.

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

ticker.start(); // Запуск цикла
ticker.stop();  // Остановка цикла

Частота обновления и deltaTime

Ticker по умолчанию обновляется с частотой ~60 FPS, но её можно изменить:

ticker.maxFPS = 30;

Каждая функция, добавленная в Ticker, получает deltaTime, который вычисляется как отношение фактической задержки между кадрами к стандартному времени кадра:

sprite.rotation += 0.05 * delta;

Использование delta позволяет анимации оставаться плавной даже при падении FPS.

Ticker.shared: глобальный Ticker

PixiJS предоставляет глобальный Ticker.shared, который можно использовать вместо создания отдельного экземпляра. Это удобно для небольших проектов или при необходимости синхронизации нескольких объектов.

PIXI.Ticker.shared.add((delta) => {
    sprite.y += 2 * delta;
});

Преимущества Ticker.shared:

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

Ограничения:

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

Методы управления подписчиками

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

ticker.add(fn, context, priority);
ticker.addOnce(fn, context);
ticker.add(fn, context, priority); // priority — порядок выполнения
ticker.remove(fn, context);
  • add — добавляет обработчик в Ticker.
  • addOnce — вызовет обработчик только один раз.
  • remove — удаляет обработчик.
  • context позволяет привязать this к нужному объекту.
  • priority определяет порядок вызова обработчиков. Высокий приоритет — выполнение раньше остальных.

Пример использования при приоритете:

ticker.add(highPriorityUpdate, this, PIXI.UPDATE_PRIORITY.HIGH);
ticker.add(lowPriorityUpdate, this, PIXI.UPDATE_PRIORITY.LOW);

Свойства Ticker, важные для анимации

  • autoStart — автоматически запускать Ticker после добавления обработчиков (по умолчанию true для Application.ticker).
  • started — возвращает true, если Ticker запущен.
  • deltaTime — количество кадров с момента последнего обновления.
  • elapsedMS — время в миллисекундах, прошедшее с последнего кадра.
  • speed — множитель скорости для всех обработчиков (по умолчанию 1):
ticker.speed = 2; // ускоряем все анимации в два раза

Интеграция с PIXI.Application

Каждое приложение PixiJS автоматически создаёт Ticker, доступный через app.ticker. Он является экземпляром Ticker и по умолчанию запускается автоматически.

const app = new PIXI.Application({ width: 800, height: 600 });
app.ticker.add((delta) => {
    sprite.x += 5 * delta;
});

Использование app.ticker и PIXI.Ticker.shared возможно одновременно, но следует помнить, что они управляют независимыми циклами обновления.

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

  • Для сложных сцен предпочтительно использовать один Ticker для обновления множества объектов.
  • Избегать тяжелых вычислений внутри Ticker-обработчиков.
  • Разделять обработчики на высокоприоритетные и низкоприоритетные, чтобы критические обновления выполнялись быстрее.

Особенности работы с анимацией

Ticker идеально подходит для:

  • Изменения позиции, масштаба, вращения спрайтов.
  • Анимации текстур через AnimatedSprite.
  • Обновления логики игры и пользовательского интерфейса.
  • Синхронизации с внешними событиями (например, сетевыми).

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

Оглавление