Курсор cursor и смена курсора

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

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

Чтобы объект мог реагировать на курсор, необходимо задать свойство:

sprite.interactive = true;

Без установки interactive = true события мыши, такие как pointerover или pointerdown, работать не будут.

Также часто используют buttonMode, чтобы визуально обозначить объект как интерактивный:

sprite.buttonMode = true;

Свойство buttonMode изменяет курсор на стандартный “руку” (pointer), когда курсор находится над объектом.

Смена курсора через CSS

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

sprite.cursor = 'pointer'; // стандартная "рука"
sprite.cursor = 'crosshair'; // прицел
sprite.cursor = 'wait'; // индикатор ожидания

Допустимые значения соответствуют CSS-свойствам cursor. Можно использовать любые поддерживаемые браузером стили курсора:

  • default – стрелка
  • pointer – рука
  • crosshair – прицел
  • text – текстовый курсор
  • move – перемещение
  • wait – ожидание

Кастомные курсоры

PixiJS поддерживает собственные изображения курсоров через указание URL:

sprite.cursor = 'url(myCursor.png), auto';

Важно учитывать: размер изображения не должен превышать 128x128 пикселей для корректного отображения во всех браузерах.

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

sprite
  .on('pointerover', () => { sprite.cursor = 'url(hoverCursor.png), auto'; })
  .on('pointerout', () => { sprite.cursor = 'default'; });

Глобальное управление курсором

Для изменения курсора на всей сцене можно использовать renderer.view.style.cursor:

app.renderer.view.style.cursor = 'crosshair';

Этот способ эффективен для случаев, когда требуется сменить курсор вне конкретного интерактивного объекта.

События курсора

PixiJS использует pointer-события, которые объединяют мышь, сенсорные экраны и стилусы. Основные события:

  • pointerover – курсор наведен на объект
  • pointerout – курсор ушёл с объекта
  • pointerdown – нажатие кнопки мыши или касание
  • pointerup – отпускание кнопки мыши или касание
  • pointermove – движение указателя над объектом

Пример обработки событий для изменения курсора:

sprite.on('pointerover', () => {
  sprite.cursor = 'move';
});

sprite.on('pointerout', () => {
  sprite.cursor = 'default';
});

Совмещение интерактивности и анимаций

Курсор можно динамически менять в зависимости от состояния анимации или перемещаемых объектов. Например, при перетаскивании спрайта:

sprite
  .on('pointerdown', (event) => {
    sprite.data = event.data;
    sprite.dragging = true;
    sprite.cursor = 'grabbing';
  })
  .on('pointerup', () => {
    sprite.dragging = false;
    sprite.data = null;
    sprite.cursor = 'pointer';
  })
  .on('pointermove', () => {
    if (sprite.dragging) {
      const newPosition = sprite.data.getLocalPosition(sprite.parent);
      sprite.position.x = newPosition.x;
      sprite.position.y = newPosition.y;
    }
  });

Здесь курсор меняется на "grabbing" при захвате объекта и возвращается к "pointer" после отпускания.

Контейнеры и наследование интерактивности

Если объект вложен в контейнер, интерактивность можно настроить на уровне контейнера:

container.interactiveChildren = true;

Это позволяет автоматически обрабатывать pointer-события для всех дочерних объектов. Курсор объектов внутри контейнера будет корректно менять стиль при наведении, если у дочерних объектов задан interactive = true.

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

  • Использовать buttonMode вместе с cursor = 'pointer' для кнопок.
  • При кастомных курсорах всегда указывать запасной стиль (auto или default).
  • Для мобильных устройств pointer-события работают корректно без видимого курсора.
  • Для перетаскивания объектов менять курсор на "grabbing" повышает UX.
  • Следить за производительностью: большое количество интерактивных объектов может замедлить рендеринг.

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

Оглавление