Мышь и тач: activePointer, события pointer

Phaser предоставляет мощный и гибкий механизм работы с указателями через объект input и активный указатель activePointer. Этот инструмент объединяет работу мыши, сенсорного экрана и стилуса, позволяя обрабатывать события взаимодействия пользователя с игровым экраном универсальным образом.

activePointer и его свойства

Объект this.input.activePointer всегда указывает на текущий активный указатель. Для большинства приложений это основной способ получить информацию о позиции и состоянии курсора или касания. Основные свойства:

  • x и y – текущие координаты указателя на сцене. Обновляются при движении.
  • worldX и worldY – координаты указателя с учётом камеры, полезны для взаимодействия с игровым миром.
  • isDown – булево значение, показывающее, нажата ли кнопка мыши или активен ли касание.
  • justDown и justUp – флаги, указывающие на момент начала или окончания нажатия.
  • leftButtonDown() / rightButtonDown() – методы для проверки состояния конкретных кнопок мыши.

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

if (this.input.activePointer.justDown) {
    console.log(`Клик по позиции: ${this.input.activePointer.x}, ${this.input.activePointer.y}`);
}

Основные события указателя

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

События сцены

  • pointerdown – вызывается при нажатии кнопки мыши или касании экрана.
  • pointerup – вызывается при отпускании кнопки или окончания касания.
  • pointermove – вызывается при перемещении указателя.
  • pointerover и pointerout – срабатывают, когда указатель входит или выходит из объекта.
  • pointerenter / pointerleave – аналогично, но работают только для интерактивных объектов.

Пример добавления обработчика на сцену:

this.input.on('pointerdown', function(pointer) {
    console.log(`Нажатие на сцену в точке (${pointer.x}, ${pointer.y})`);
});

События на интерактивных объектах

Любой объект Phaser, поддерживающий интерактивность (например, спрайт), можно сделать интерактивным с помощью setInteractive(). После этого объект сможет реагировать на события указателя:

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

sprite.on('pointerover', () => {
    sprite.setTint(0x44ff44);
});

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

sprite.on('pointerdown', () => {
    console.log('Нажатие на кнопку');
});

Эта модель позволяет легко реализовывать кнопки, сенсорные зоны и игровые элементы, реагирующие на касания или клики.

Многоуказательный ввод

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

this.input.pointers.forEach(pointer => {
    if (pointer.isDown) {
        console.log(`Активный указатель: ${pointer.id} в позиции (${pointer.x}, ${pointer.y})`);
    }
});

Каждый Pointer имеет уникальный id, что позволяет отслеживать несколько одновременных касаний и различать их.

Состояния нажатия и тайминги

Флаги justDown и justUp позволяют регистрировать события в момент их возникновения, предотвращая повторное срабатывание при удержании кнопки:

if (this.input.activePointer.justUp) {
    console.log('Кнопка отпущена');
}

Кроме того, объект Pointer хранит время последнего нажатия в downTime и время последнего отпускания в upTime, что удобно для реализации двойных кликов, долгих нажатий или жестов.

Практические приёмы

  1. Перетаскивание объектов:
sprite.setInteractive();
this.input.setDraggable(sprite);

this.input.on('drag', (pointer, obj, dragX, dragY) => {
    obj.x = dragX;
    obj.y = dragY;
});
  1. Обработка свайпов и жестов:
let startX, startY;

this.input.on('pointerdown', pointer => {
    startX = pointer.x;
    startY = pointer.y;
});

this.input.on('pointerup', pointer => {
    let deltaX = pointer.x - startX;
    let deltaY = pointer.y - startY;
    if (Math.abs(deltaX) > 50 || Math.abs(deltaY) > 50) {
        console.log('Свайп зарегистрирован');
    }
});
  1. Использование указателя в мировых координатах:
let worldX = this.input.activePointer.worldX;
let worldY = this.input.activePointer.worldY;
console.log(`Мировая позиция указателя: ${worldX}, ${worldY}`);

Настройка чувствительности и ограничений

Phaser позволяет изменять настройки указателя для разных устройств:

  • this.input.mouse.enabled – включение или отключение мыши.
  • this.input.touch.enabled – включение или отключение тач-событий.
  • this.input.topOnly – если true, активируются события только для верхнего интерактивного объекта.

Эти параметры позволяют создавать гибкие интерфейсы, которые одинаково хорошо работают на ПК и мобильных устройствах.

Итоговое представление

Объект activePointer, массив pointers и система событий pointer формируют ядро взаимодействия с пользователем в Phaser. Они обеспечивают единый интерфейс для мыши, тач-экранов и стилусов, поддерживают множественные указатели, события нажатий и отпусканий, а также сложные жесты, включая перетаскивания и свайпы. Использование этих инструментов позволяет создавать интерактивные элементы и динамичные пользовательские интерфейсы с минимальными усилиями, обеспечивая точное и отзывчивое управление в играх и приложениях.

Оглавление