О чем этот пример

Современные игры для мобильных устройств и планшетов часто требуют поддержки мультитача — от управления двумя джойстиками до сложных жестов несколькими пальцами. Phaser предоставляет удобный API для работы с несколькими точками ввода, но по умолчанию активирован только один указатель. Эта статья на практическом примере покажет, как настроить обработку до четырёх одновременных касаний, отслеживать их состояние и координаты, что является фундаментом для создания отзывчивого геймплея на сенсорных устройствах.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    text;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics();

        //  We need 3 extra pointers, as we only get 1 by default
        this.input.addPointer(3);

        this.text = this.add.text(10, 10, 'Use up to 4 fingers at once', { font: '16px Courier', fill: '#00ff00' });
    }

    update ()
    {
        if (this.input.pointer1.isDown || this.input.pointer2.isDown || this.input.pointer3.isDown || this.input.pointer4.isDown)
        {
            this.graphics.clear();
        }

        this.text.setText([
            `pointer1.isDown: ${this.input.pointer1.isDown}`,
            `pointer2.isDown: ${this.input.pointer2.isDown}`,
            `pointer3.isDown: ${this.input.pointer3.isDown}`,
            `pointer4.isDown: ${this.input.pointer4.isDown}`
        ]);

        this.graphics.fillStyle(0xff0000, 1);
        this.graphics.fillRect(this.input.pointer1.x, this.input.pointer1.y, 64, 64);

        this.graphics.fillStyle(0x00ff00, 1);
        this.graphics.fillRect(this.input.pointer2.x, this.input.pointer2.y, 64, 64);

        this.graphics.fillStyle(0x0000ff, 1);
        this.graphics.fillRect(this.input.pointer3.x, this.input.pointer3.y, 64, 64);

        this.graphics.fillStyle(0xff00ff, 1);
        this.graphics.fillRect(this.input.pointer4.x, this.input.pointer4.y, 64, 64);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Добавление дополнительных указателей

По умолчанию Phaser создаёт один указатель (pointer1) для обработки ввода. Для поддержки мультитача необходимо явно добавить дополнительные указатели с помощью метода this.input.addPointer(). Этот метод увеличивает пул доступных указателей, которые затем можно отслеживать.

//  We need 3 extra pointers, as we only get 1 by default
this.input.addPointer(3);

Вызов this.input.addPointer(3) добавляет три новых указателя, делая доступными pointer2, pointer3 и pointer4. Теперь система может обрабатывать до четырёх одновременных касаний на экране.

Отслеживание состояния касаний

Каждый добавленный указатель является экземпляром класса Pointer и имеет свойства для проверки его состояния. Наиболее важное свойство — isDown, которое возвращает true, если в данный момент происходит касание этим пальцем, и false — если нет. Это свойство можно проверять в методе update() для реакции на действия игрока.

if (this.input.pointer1.isDown || this.input.pointer2.isDown || this.input.pointer3.isDown || this.input.pointer4.isDown)
{
    this.graphics.clear();
}

В данном примере условие проверяет, активно ли хотя бы одно из четырёх касаний. Если да, то холст (graphics) очищается, стирая нарисованные в предыдущем кадре квадраты. Это создаёт эффект "очистки экрана" при любом касании.

Актуальное состояние каждого указателя также выводится в текстовое поле для наглядной отладки.

Получение координат касаний

Помимо состояния, каждый указатель хранит свои текущие координаты `xиy` относительно игровой сцены. Эти координаты обновляются в реальном времени при движении пальца по экрану. В примере они используются для отрисовки цветных квадратов, которые следуют за каждым касанием.

this.graphics.fillStyle(0xff0000, 1);
this.graphics.fillRect(this.input.pointer1.x, this.input.pointer1.y, 64, 64);

this.graphics.fillStyle(0x00ff00, 1);
this.graphics.fillRect(this.input.pointer2.x, this.input.pointer2.y, 64, 64);

// ... аналогично для pointer3 и pointer4

Каждому указателю присвоен свой цвет: красный, зелёный, синий и пурпурный. В методе update() для каждого активного или неактивного указателя рисуется квадрат 64x64 пикселя по его текущим координатам. Если касания нет, квадрат отображается в последней зафиксированной позиции.

Структура сцены и отображение

Вся логика реализована в рамках одного класса сцены. В методе create() инициализируются объекты для рисования и текста, а также добавляются указатели. Основная работа происходит в update(), который вызывается на каждом кадре игры.

this.graphics = this.add.graphics();
this.text = this.add.text(10, 10, 'Use up to 4 fingers at once', { font: '16px Courier', fill: '#00ff00' });

Объект graphics используется для программного рисования фигур. Текстовый объект text динамически обновляется в update() для отображения булевых значений isDown каждого указателя, что позволяет визуально контролировать состояние ввода.

Что попробовать дальше

Использование this.input.addPointer() открывает возможность для создания сложных механик управления под сенсорные экраны. На основе этого примера можно экспериментировать: реализовать виртуальный джойстик для движения и отдельную кнопку для стрельбы, обрабатывать жесты (например, сведение двух пальцев для зума), или создать локальный мультиплеер на одном устройстве, где каждый игрок управляет своим персонажем своим касанием. Важно помнить, что координаты указателей всегда доступны, что позволяет строить логику не только на факте касания, но и на его траектории.