Пауза и возобновление через stop и start

В PixiJS основой визуализации является объект Application, который управляет циклом рендеринга сцены и обработкой анимаций. Контроль над этим циклом позволяет оптимизировать производительность и реализовывать функции паузы и возобновления.

Методы stop() и start() встроены в Application и управляют внутренним тикером (ticker), который вызывает перерисовку сцены и обновление объектов каждый кадр.

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

Метод stop()

Метод stop() останавливает тикер приложения. При этом:

  • Прекращается автоматическое обновление сцены.
  • Анимации, завязанные на ticker, больше не выполняются.
  • Все объекты остаются на экране в последнем состоянии, но движение и интерактивные изменения прекращаются.

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

app.stop(); // остановка рендеринга

Этот метод полезен для реализации пауз в играх или при временной приостановке анимаций для снижения нагрузки на систему.

Метод start()

Метод start() возобновляет работу тикера. После вызова:

  • Сцена продолжает рендериться.
  • Анимации и функции, зарегистрированные через ticker, снова выполняются.
  • Можно использовать совместно с stop() для динамического управления циклом рендеринга.

Пример:

app.start(); // возобновление рендеринга

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

PixiJS использует объект PIXI.Ticker для управления обновлением каждого кадра. Application автоматически создает тикер при инициализации:

console.log(app.ticker); // экземпляр PIXI.Ticker

Методы stop и start фактически вызывают ticker.stop() и ticker.start(), что делает возможным управление всеми анимациями, привязанными к тикеру:

// Добавление пользовательской функции в тикер
app.ticker.add((delta) => {
    sprite.rotation += 0.1 * delta;
});

// Остановка всех обновлений
app.stop();

// Возобновление работы тикера
app.start();

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

  1. Пауза в игре В моменты, когда игрок открывает меню или игру нужно временно заморозить:
function pauseGame() {
    app.stop();
}

function resumeGame() {
    app.start();
}

  1. Оптимизация производительности Если сцена статична, нет смысла обновлять рендер каждую секунду. Остановка тикера снижает нагрузку на GPU и CPU.

  2. Управление сложными анимациями При использовании нескольких анимационных спрайтов или эффектов можно синхронизировать их работу через тикер. Остановка и запуск тикера позволяет контролировать все анимации одновременно.

Важные нюансы

  • События и интерактивность не зависят от stop() и start() напрямую. Клики и взаимодействия остаются активными, если не отключать интерактивность объектов.
  • Вызов stop() не удаляет объекты. Они остаются в сцене, их можно визуально модифицировать вручную.
  • Точность таймеров: если есть зависимость от времени, например, Date.now(), остановка тикера не влияет на эти значения.
  • Комбинирование с анимационными библиотеками: при использовании GSAP или других движков, которые не завязаны на тикер PixiJS, stop() не останавливает анимации этих библиотек.

Расширенное управление через кастомный тикер

Можно создать отдельный PIXI.Ticker для отдельных подсистем, сохраняя главный тикер приложения в состоянии start:

const customTicker = new PIXI.Ticker();
customTicker.add((delta) => {
    sprite.x += 5 * delta;
});
customTicker.start(); // запуск кастомного цикла
customTicker.stop();  // остановка кастомного цикла

Такой подход позволяет локально приостанавливать отдельные анимации без остановки всего приложения.

Итоговое понимание

Методы stop и start обеспечивают гранулированный контроль над рендерингом в PixiJS. Они позволяют:

  • Останавливать и возобновлять весь цикл рендеринга.
  • Управлять производительностью.
  • Синхронизировать анимации.
  • Реализовывать игровые паузы без удаления объектов или разрушения сцены.

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

Оглавление