События мыши и сенсорные события

В PixiJS обработка пользовательских взаимодействий с элементами сцены строится на системе событий, которая охватывает как мышь, так и сенсорные экраны. Любой объект, наследующийся от PIXI.DisplayObject, может реагировать на события, если у него включена интерактивность. Для этого используется свойство:

sprite.interactive = true;

Без установки interactive = true объект не будет получать события мыши или касания.

Типы событий

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

  1. Мышиные события

    • pointerdown — срабатывает при нажатии кнопки мыши или касании экрана.
    • pointerup — срабатывает при отпускании кнопки мыши или завершении касания.
    • pointerupoutside — событие отпускания вне границ объекта.
    • pointermove — движение указателя над объектом.
    • click — клик мышью, эквивалент pointerdown + pointerup внутри объекта.
    • rightclick — правая кнопка мыши.
    • mouseover и mouseout — наведение и уход указателя с объекта.

  2. Сенсорные события

    • На мобильных устройствах большинство событий мыши заменяются на pointer-события (pointerdown, pointerup, pointermove).
    • touchstart, touchend, touchmove также поддерживаются, но использование pointer унифицирует обработку.

Важно: pointer события работают универсально — они покрывают и мышь, и сенсорный экран, и стилус.

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

Для добавления обработчика используется метод .on():

sprite.on('pointerdown', (event) => {
    console.log('Нажатие на спрайт');
});

Параметры обработчика:

  • event — объект типа PIXI.InteractionEvent, содержащий информацию о событии.
  • event.data — объект InteractionData, с помощью которого можно получить координаты, идентификаторы касаний и ссылку на целевой объект.

Пример получения координат клика относительно сцены:

sprite.on('pointerdown', (event) => {
    const pos = event.data.getLocalPosition(sprite.parent);
    console.log(`Координаты: x=${pos.x}, y=${pos.y}`);
});

События ввода и взаимодействие с несколькими объектами

PixiJS поддерживает стек событий:

  • События сначала проверяются на верхнем объекте (topmost object under pointer), затем всплывают к родителям.
  • Свойство event.stopPropagation() предотвращает дальнейшее распространение события.
sprite.on('pointerdown', (event) => {
    event.stopPropagation();
    console.log('Событие обработано на этом спрайте');
});

Для объектов с перекрытием важно правильно настроить interactive и hitArea.

HitArea и оптимизация интерактивности

По умолчанию интерактивная область объекта совпадает с его глобальными границами текстуры. Для тонкой настройки используется свойство hitArea:

sprite.hitArea = new PIXI.Rectangle(50, 50, 100, 100);

Можно задавать любую фигуру из доступных примитивов PIXI.Rectangle, PIXI.Circle, PIXI.Ellipse, PIXI.Polygon. Это полезно для оптимизации и точного реагирования на пользовательский ввод.

Обработка мультитач и несколько указателей

PIXI.InteractionManager поддерживает многоточечные касания и одновременную работу мыши и сенсора:

sprite.on('pointerdown', (event) => {
    const pointerId = event.data.identifier;
    console.log(`Нажатие указателя ID: ${pointerId}`);
});
  • event.data.identifier уникален для каждого активного указателя.
  • Это позволяет отслеживать несколько касаний одновременно, управлять жестами и создавать сложные интерактивные элементы.

События перемещения и перетаскивания

Перетаскивание реализуется через комбинацию pointerdown, pointermove и pointerup:

sprite.on('pointerdown', (event) => {
    sprite.data = event.data;
    sprite.dragging = true;
});

sprite.on('pointermove', () => {
    if(sprite.dragging){
        const newPosition = sprite.data.getLocalPosition(sprite.parent);
        sprite.x = newPosition.x;
        sprite.y = newPosition.y;
    }
});

sprite.on('pointerup', () => {
    sprite.dragging = false;
    sprite.data = null;
});

sprite.on('pointerupoutside', () => {
    sprite.dragging = false;
    sprite.data = null;
});

Ключевые моменты:

  • Хранение ссылки на event.data позволяет получать корректные координаты при движении.
  • Обработка pointerupoutside предотвращает «залипание» объекта вне его границ.
  • Поддержка сенсорных устройств автоматически интегрирована через pointer события.

Анимация и события

События в PixiJS можно комбинировать с анимацией. Например, плавное перемещение объекта при клике:

sprite.on('pointerdown', () => {
    gsap.to(sprite, { x: sprite.x + 100, duration: 0.5 });
});

Использование событий вместе с библиотеками анимации позволяет создавать интерактивные игры и интерфейсы с динамическим откликом на действия пользователя.

Особенности взаимодействия с контейнерами

Контейнеры (PIXI.Container) тоже могут быть интерактивными. Если контейнер интерактивен, события распространяются ко всем его дочерним объектам:

  • Родительский контейнер может блокировать события дочерних объектов через interactiveChildren = false.
  • Это удобно для создания интерфейсов с группами элементов, где нужно управлять событиями централизованно.
container.interactive = true;
container.interactiveChildren = false;

Практические советы

  • Всегда включать interactive = true перед назначением событий.
  • Для оптимизации производительности использовать hitArea вместо полного текстурного интерактивного покрытия.
  • Универсальные pointer события заменяют устаревшие mousemove, mousedown, mouseup и сенсорные аналоги.
  • В мультиплатформенных приложениях важно использовать pointer события для поддержки мыши, сенсора и стилуса без дублирования кода.
  • Для сложных интерфейсов и игр стоит управлять всплытием событий и stopPropagation, чтобы избежать конфликтов между объектами.
Оглавление