Глобальные события на stage

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

Основные типы событий

В PixiJS события делятся на несколько категорий:

  1. Мышь и указатель

    • pointerdown — срабатывает при нажатии кнопки мыши или касании экрана.
    • pointerup — срабатывает при отпускании кнопки мыши или завершении касания.
    • pointermove — фиксирует движение указателя по сцене.
    • pointerover / pointerout — отслеживают наведение и покидание области интерактивного объекта.

  2. Клавиатура PixiJS напрямую не обрабатывает события клавиатуры, поэтому нужно использовать стандартные события браузера:

    window.addEventListener('keydown', (e) => {
    console.log(`Нажата клавиша: ${e.key}`);
});
window.addEventListener('keyup', (e) => {
    console.log(`Отпущена клавиша: ${e.key}`);
});

  3. Глобальные обновления и таймеры Для постоянной проверки состояния сцены используется метод ticker:

    const ticker = app.ticker;
ticker.add((delta) => {
    // delta — коэффициент времени, полезен для плавной анимации
});

Подключение событий к stage

Stage наследует от Container, что позволяет использовать интерактивность на уровне сцены. Для этого необходимо включить флаг interactive:

app.stage.interactive = true;

app.stage.on('pointerdown', (event) => {
    console.log('Нажатие на сцену', event.data.global);
});

app.stage.on('pointermove', (event) => {
    const pos = event.data.global;
    console.log(`Курсор перемещен: x=${pos.x}, y=${pos.y}`);
});
  • event.data.global — объект с глобальными координатами указателя относительно сцены.
  • В отличие от локальных координат объектов, глобальные координаты позволяют реагировать на события независимо от позиции и масштабирования контейнеров.

Отслеживание нескольких типов указателей

PixiJS поддерживает мультитач и сенсорные экраны через систему pointer events. Для корректной обработки нескольких касаний необходимо использовать массивы или идентификаторы указателей:

const activePointers = {};

app.stage.on('pointerdown', (e) => {
    activePointers[e.data.pointerId] = e.data.global;
});

app.stage.on('pointerup', (e) => {
    delete activePointers[e.data.pointerId];
});

app.stage.on('pointermove', (e) => {
    if (activePointers[e.data.pointerId]) {
        activePointers[e.data.pointerId] = e.data.global;
    }
});
  • pointerId уникально идентифицирует каждый активный указатель.
  • Это позволяет отслеживать несколько касаний одновременно без конфликтов.

Взаимодействие с другими контейнерами

Иногда глобальные события используются для управления камерами или слоем интерфейса, не реагирующим на отдельные спрайты. Для этого применяется преобразование координат:

app.stage.on('pointerdown', (e) => {
    const localPos = someContainer.toLocal(e.data.global);
    console.log('Координаты внутри контейнера:', localPos);
});
  • Метод toLocal переводит глобальные координаты указателя в локальные координаты контейнера.
  • Аналогично, toGlobal позволяет определить положение объекта относительно сцены.

Комбинирование с ticker для динамических эффектов

Глобальные события часто используются вместе с ticker для реализации интерактивной анимации сцены:

let isDragging = false;
let dragStart = null;

app.stage.on('pointerdown', (e) => {
    isDragging = true;
    dragStart = e.data.global.clone();
});

app.stage.on('pointerup', () => {
    isDragging = false;
});

app.ticker.add(() => {
    if (isDragging && dragStart) {
        app.stage.x += (dragStart.x - app.renderer.plugins.interaction.mouse.global.x);
        app.stage.y += (dragStart.y - app.renderer.plugins.interaction.mouse.global.y);
        dragStart = app.renderer.plugins.interaction.mouse.global.clone();
    }
});
  • Здесь реализован drag-подход для перемещения всей сцены.
  • Использование глобальных координат гарантирует корректное смещение вне зависимости от масштаба или трансформаций отдельных контейнеров.

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

  • Всегда включать interactive = true для контейнера, на котором обрабатываются события.
  • Для сложных сцен рекомендуется использовать отдельные слои: один для интерактивных объектов, другой для фона или UI.
  • Использовать глобальные события для управления камерой, drag-n-drop объектов, жестов и мультитач.
  • Комбинировать с ticker для плавной анимации и обновления состояния сцены.

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

Оглавление