Мультитач и несколько указателей

Phaser предоставляет мощный и гибкий механизм для обработки нескольких указателей одновременно. Это особенно важно для мобильных устройств, где взаимодействие часто осуществляется через сенсорный экран с несколькими пальцами. В Phaser каждый указатель представлен объектом Pointer, который хранит состояние касания, координаты, скорость движения и дополнительную информацию.

Основной объект для управления вводом — это this.input, который содержит коллекцию всех активных указателей (this.input.pointers) и события для их обработки. По умолчанию Phaser отслеживает один основной указатель (pointer1), но при настройке мультитача можно активировать поддержку нескольких пальцев.

this.input.addPointer(3); // добавляет 3 дополнительных указателя, всего 4

После этого в игре будут доступны указатели pointer1, pointer2, pointer3 и pointer4. Каждый указатель можно использовать независимо для отслеживания нажатий, движений и отпусканий.

Работа с событиями нескольких указателей

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

  • pointerdown — срабатывает при начале касания.
  • pointerup — срабатывает при отпускании.
  • pointermove — срабатывает при движении указателя.
  • pointerover / pointerout — срабатывают при наведении и уходе указателя с объекта.

Пример обработки нескольких касаний на спрайте:

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

sprite.setInteractive();

sprite.on('pointerdown', (pointer) => {
    console.log(`Указатель ${pointer.id} нажал на спрайт`);
});

sprite.on('pointerup', (pointer) => {
    console.log(`Указатель ${pointer.id} отпустил спрайт`);
});

Каждый объект pointer содержит уникальный идентификатор pointer.id, который позволяет различать касания. Для мультитач-сценариев это критически важно, чтобы определить, какой палец взаимодействует с каким элементом интерфейса.

Свойства объекта Pointer

Объект Pointer предоставляет множество свойств для точного отслеживания касаний:

  • x, y — текущие координаты указателя.
  • downX, downY — координаты точки начала касания.
  • isDown — булевое значение, показывающее, удерживается ли палец.
  • velocity — скорость движения указателя, полезно для жестов.
  • tapCount — количество быстрых нажатий (для двойного касания).

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

Обработка жестов с несколькими пальцами

Phaser позволяет реализовать жесты с несколькими пальцами, например:

  • Пинч (pinch) для масштабирования объектов.
  • Свайпы с разной скоростью для каждого указателя.
  • Ротация с двумя пальцами для вращения элементов.

Пример реализации простого масштабирования спрайта двумя пальцами:

let initialDistance = 0;
let sprite = this.add.sprite(400, 300, 'image');

this.input.on('pointermove', (pointer) => {
    if (this.input.pointers[0].isDown && this.input.pointers[1].isDown) {
        let dx = this.input.pointers[0].x - this.input.pointers[1].x;
        let dy = this.input.pointers[0].y - this.input.pointers[1].y;
        let distance = Math.sqrt(dx * dx + dy * dy);

        if (initialDistance === 0) {
            initialDistance = distance;
        } else {
            let scale = distance / initialDistance;
            sprite.setScale(scale);
        }
    }
});

this.input.on('pointerup', () => {
    initialDistance = 0;
});

Управление приоритетами указателей

В сложных сценах с множеством интерактивных объектов важно правильно распределять приоритеты обработки касаний. Phaser предоставляет несколько стратегий:

  • Глобальные события — срабатывают независимо от объектов, полезны для отслеживания жестов.
  • Локальные события объектов — срабатывают только при взаимодействии с конкретным спрайтом или интерактивным элементом.
  • Слои и z-index — объекты с более высоким depth получают приоритет при обработке касаний.
sprite.setInteractive({ useHandCursor: true, draggable: true });

Опция draggable позволяет использовать указатели для перетаскивания объектов, автоматически учитывая мультитач.

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

  1. Для мобильных игр с несколькими пальцами всегда добавлять дополнительные указатели через addPointer.
  2. Разделять обработку каждого указателя с помощью pointer.id.
  3. Проверять свойства isDown и velocity для реализации сложных жестов.
  4. Использовать комбинацию глобальных и локальных событий для гибкой логики.
  5. Обновлять состояние объектов на основе нескольких указателей одновременно, чтобы избежать конфликтов.

Мощь мультитача в Phaser открывает возможности создавать интуитивно понятные интерфейсы, сложные жесты и интерактивные сцены, которые корректно работают как на десктопе с мышью, так и на мобильных устройствах с сенсорным экраном.

Оглавление