Включение интерактивности через eventMode

В PixiJS интерактивность элементов управляется через свойство eventMode, которое заменяет устаревшие методы interactive и buttonMode в последних версиях библиотеки. Правильное использование eventMode позволяет точно контролировать реакции спрайтов, графических объектов и контейнеров на события мыши и касаний.

Свойства eventMode и их значения

Свойство eventMode определяет, как объект обрабатывает события ввода:

  • "none" — объект не реагирует на события. Это значение по умолчанию для большинства графических объектов.
  • "passive" — объект реагирует на события, но не блокирует события на родительских элементах. Полезно для визуальных эффектов, когда нужно прослушивать события, но не вмешиваться в обработку выше.
  • "static" — объект может получать события, но не меняет курсор мыши.
  • "dynamic" — объект полностью интерактивен, включая изменение курсора при наведении. Используется для кнопок и кликабельных элементов.

Пример установки eventMode для спрайта:

const sprite = new PIXI.Sprite(texture);
sprite.eventMode = "dynamic";
sprite.cursor = "pointer";

Добавление обработчиков событий

Для интерактивных объектов используются стандартные события:

  • pointerdown — нажатие на объект (мышь или касание).
  • pointerup — отпускание кнопки.
  • pointerupoutside — отпускание вне границ объекта.
  • pointermove — перемещение указателя над объектом.
  • pointerover / pointerout — наведение и уход курсора.

Пример назначения событий:

sprite.on("pointerdown", (event) => {
    console.log("Спрайт нажат", event);
});

sprite.on("pointerover", () => {
    sprite.tint = 0xff0000; // изменение цвета при наведении
});

sprite.on("pointerout", () => {
    sprite.tint = 0xffffff; // возврат цвета
});

Использование interactiveChildren для контейнеров

Контейнеры в PixiJS могут содержать несколько объектов. Свойство interactiveChildren определяет, будут ли дочерние элементы реагировать на события:

  • true — события обрабатываются дочерними объектами.
  • false — только сам контейнер реагирует на события, дочерние объекты игнорируются.

Пример:

const container = new PIXI.Container();
container.eventMode = "dynamic";
container.interactiveChildren = true;

const child = new PIXI.Sprite(texture);
child.eventMode = "dynamic";

container.addChild(child);

При наведении или клике на child события будут корректно обработаны.

Управление курсором через cursor

Свойство cursor работает только с объектами, у которых eventMode установлен в "dynamic". Оно позволяет менять вид курсора при наведении:

sprite.cursor = "pointer"; // стандартная рука
sprite.cursor = "grab";    // для перетаскиваемых объектов

Курсор изменяется автоматически при наведении на объект.

Комбинация с графическими объектами

Графические примитивы (PIXI.Graphics) также могут быть интерактивными. Чтобы обработка событий работала корректно, нужно учитывать область, определяемую графикой. Если фигура не закрыта (например, только линия), событие может не срабатывать, так как PixiJS использует hit test по заполненной области.

Пример интерактивного прямоугольника:

const rect = new PIXI.Graphics();
rect.beginFill(0x00ff00);
rect.drawRect(0, 0, 100, 50);
rect.endFill();

rect.eventMode = "dynamic";
rect.cursor = "pointer";
rect.on("pointerdown", () => {
    rect.alpha = 0.5;
});

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

  • Не делайте все объекты "dynamic", если интерактивность нужна только на части сцены.
  • Отключайте interactiveChildren, если дочерние элементы не требуют событий.
  • Используйте eventMode: "passive" для объектов, реагирующих только на визуальные изменения, чтобы минимизировать нагрузку.

Итоговая структура интерактивного объекта

  1. Выбор объекта: спрайт, графика или контейнер.
  2. Установка eventMode согласно требованиям.
  3. Назначение обработчиков событий через .on(...).
  4. Настройка курсора при необходимости.
  5. Контроль наследования событий через interactiveChildren.
  6. Оптимизация для производительности при больших сценах.

Использование eventMode в PixiJS упрощает управление интерактивностью и делает код более читаемым, устраняя устаревшие методы interactive и buttonMode.

Оглавление