События объектов: pointerdown, pointerup, pointerover, pointerout

Phaser предоставляет мощный механизм управления взаимодействием с объектами сцены через события указателя. Основные события, отвечающие за взаимодействие мыши или касания, — это pointerdown, pointerup, pointerover и pointerout. Они позволяют создавать интерактивные элементы, кнопки, игровые объекты с откликом на действия пользователя.

pointerdown

Событие pointerdown срабатывает в момент нажатия на объект. Оно регистрируется для любого объекта сцены, поддерживающего ввод, например, спрайтов, изображений, текстовых объектов.

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

let button = this.add.sprite(400, 300, 'button').setInteractive();

button.on('pointerdown', function (pointer) {
    console.log('Кнопка нажата');
});

Ключевые особенности:

  • Событие срабатывает в момент нажатия, даже если указатель удерживается недолго.
  • Объект должен быть интерактивным через метод .setInteractive().
  • В обработчик передаётся объект Pointer, содержащий информацию о координатах нажатия, тип устройства (мышь, касание) и состояние кнопок.

Дополнительные параметры:

Можно использовать контекст pointer для получения координат нажатия:

button.on('pointerdown', function (pointer) {
    console.log(`Нажатие в точке x: ${pointer.x}, y: ${pointer.y}`);
});

pointerup

Событие pointerup срабатывает при отпускании кнопки указателя после нажатия на объект. Оно особенно полезно для имитации “кнопки мыши”, когда действие должно произойти только после полного нажатия и отпускания.

Пример:

button.on('pointerup', function (pointer) {
    console.log('Кнопка отпущена');
});

Особенности использования:

  • Можно отслеживать различие между pointerdown и pointerup, чтобы реализовать логику удержания или перетаскивания.
  • Работает с разными типами ввода (мышь, тачскрин, стилус).
  • В комбинации с pointerdown позволяет различать короткое нажатие и длительное удержание.

Пример: различие между кликом и удержанием:

let holdTime = 0;

button.on('pointerdown', () => { holdTime = Date.now(); });
button.on('pointerup', () => {
    if (Date.now() - holdTime > 500) {
        console.log('Длительное удержание');
    } else {
        console.log('Короткий клик');
    }
});

pointerover

Событие pointerover срабатывает, когда указатель входит в область объекта. Оно позволяет создавать визуальные эффекты наведения и реакции на движение курсора.

Пример:

button.on('pointerover', () => {
    button.setTint(0x44ff44); // Подсветка при наведении
});

Особенности:

  • Срабатывает один раз при входе указателя.
  • Можно использовать вместе с pointerout для создания интерактивных эффектов наведения.
  • Подходит для реализации кнопок меню, интерактивных спрайтов, подсветки элементов сцены.

pointerout

Событие pointerout срабатывает, когда указатель покидает область объекта. Обычно используется вместе с pointerover для восстановления исходного состояния объекта.

Пример:

button.on('pointerout', () => {
    button.clearTint(); // Снимаем подсветку
});

Особенности:

  • Срабатывает только при выходе из объекта, даже если pointerdown всё ещё удерживается.
  • Позволяет корректно возвращать объект к стандартному виду после наведения.
  • Совместно с pointerover создаёт полноценный эффект hover.

Комбинированное использование событий

Часто эти события используют вместе для создания интерактивного элемента:

let button = this.add.sprite(400, 300, 'button').setInteractive();

button.on('pointerover', () => button.setTint(0x44ff44));
button.on('pointerout', () => button.clearTint());
button.on('pointerdown', () => button.setScale(0.9));
button.on('pointerup', () => {
    button.setScale(1);
    console.log('Кнопка нажата и отпущена');
});

В этом примере реализован полный интерактивный цикл: подсветка при наведении, эффект нажатия при pointerdown и возврат к исходному состоянию при pointerup.

Особенности работы с различными типами указателя

Phaser поддерживает разные типы указателей: мышь, сенсорный экран и стилусы. В объекте Pointer доступны:

  • pointer.x и pointer.y — координаты касания.
  • pointer.leftButtonDown() — проверка состояния кнопки мыши.
  • pointer.primaryDown — основной указатель активен.

Эти свойства позволяют создавать кроссплатформенные интерактивные элементы.

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

  • Группировка объектов: Для массовой интерактивности объектов удобно использовать Container или Group с .setInteractive() на каждом элементе.
  • Hit area: Для нестандартных форм объектов можно задавать область взаимодействия через setInteractive({ shape: shape }).
  • События сцены: Иногда удобнее использовать события сцены (this.input.on('pointerdown', ...)) для глобальной обработки указателя.

События pointerdown, pointerup, pointerover и pointerout создают основу интерактивности в Phaser. Их правильное сочетание позволяет реализовывать кнопки, перетаскивание, hover-эффекты и динамическое управление объектами сцены, обеспечивая гибкость и отзывчивость интерфейса.

Оглавление