Phaser.js: всё об играх и разработке

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    text;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
    }

    create ()
    {
        this.text = this.add.text(10, 10, 'Move the mouse', { font: '16px Courier', fill: '#00ff00' });
    }

    update ()
    {
        const pointer = this.input.activePointer;

        this.text.setText([
            `x: ${pointer.x}`,
            `y: ${pointer.y}`,
            `mid x: ${pointer.midPoint.x}`,
            `mid y: ${pointer.midPoint.y}`,
            `velocity x: ${pointer.velocity.x}`,
            `velocity y: ${pointer.velocity.y}`,
            `movementX: ${pointer.movementX}`,
            `movementY: ${pointer.movementY}`
        ]);
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и загрузка ассетов

Класс Example расширяет Phaser.Scene. В методе preload задается базовый URL для загрузки и загружается спрайтшит с шариками. Хотя в этом примере он не используется для визуализации, его загрузка показывает стандартный паттерн подготовки ресурсов.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
}

В методе create создается текстовый объект this.text, который будет служить нашей панелью отладки. Он позиционируется в левом верхнем углу экрана.

create ()
{
    this.text = this.add.text(10, 10, 'Move the mouse', { font: '16px Courier', fill: '#00ff00' });
}

Работа с активным указателем

Ядро логики находится в методе update, который вызывается на каждом кадре. Ключевой объект для работы — this.input.activePointer. Он представляет собой основной источник ввода: левую кнопку мыши или первое касание на сенсорном экране.

const pointer = this.input.activePointer;

Из этого объекта мы можем получить текущие координаты указателя относительно игрового холста через свойства pointer.x и pointer.y.

Анализ положения и средней точки

Помимо мгновенных координат, указатель предоставляет свойство midPoint. Оно представляет собой точку между двумя последними позициями указателя, что может быть полезно для сглаживания данных или расчета промежуточных позиций при рендеринге.

`mid x: ${pointer.midPoint.x}`,
`mid y: ${pointer.midPoint.y}`

Измерение скорости и движения

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

Свойства pointer.velocity.x и pointer.velocity.y показывают скорость движения указателя в пикселях в секунду. Это нормализованные значения, идеально подходящие для применения физических сил.

Свойства pointer.movementX и pointer.movementY возвращают разницу в координатах между текущим и предыдущим кадром. Это "сырые" данные о перемещении, полезные для точного отслеживания траектории.

`velocity x: ${pointer.velocity.x}`,
`velocity y: ${pointer.velocity.y}`,
`movementX: ${pointer.movementX}`,
`movementY: ${pointer.movementY}`

Все эти данные агрегируются и отображаются в текстовом объекте с помощью метода setText.

Конфигурация игры и запуск

Конфигурационный объект config настраивает экземпляр игры. Важный параметр disableContextMenu: true отключает стандартное контекстное меню браузера по правому клику, что часто необходимо для игр.

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

const game = new Phaser.Game(config);

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

Этот пример — отличная основа для отладки любой логики, связанной с вводом. На его базе можно экспериментировать: создать визуальный след из частиц, который реагирует на скорость указателя (velocity), реализовать механику "свайпа" на основе анализа movementX/Y, или привязать движение игрового объекта не к позиции курсора, а к его средней точке (midPoint) для более плавного преследования.