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

Событие `pointermove` — это ключ к созданию отзывчивых и интерактивных игр в Phaser. Оно позволяет отслеживать каждое перемещение курсора мыши или касания на сенсорном экране, открывая путь к реализации сложных механик: от плавного следования камеры за курсором и рисования до меню с эффектами наведения. Эта статья разберет базовый пример и покажет, как эффективно использовать этот инструмент. Понимание работы с событиями ввода — фундаментальный навык. Умение правильно обрабатывать `pointermove` поможет вам создавать игры с тонким контролем, улучшит пользовательский опыт и позволит реализовать фичи, которые выделят ваш проект.

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

Живой запуск

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

Исходный код


class Demo extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.input.on('pointermove', () => {
            console.log('move');
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 400,
    height: 300,
    scene: Demo,
    backgroundColor: 0x444444
};

const game = new Phaser.Game(config);

Суть примера и настройка сцены

Представленный код демонстрирует минимальную рабочую конфигурацию Phaser-игры с одной сценой. Вся логика обработки события движения указателя содержится внутри метода create этой сцены.

Конфигурация игры задается объектом config, который передается в конструктор Phaser.Game. Здесь определяются базовые параметры: тип рендерера, размеры холста, цвет фона и главная сцена.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 400,
    height: 300,
    scene: Demo,
    backgroundColor: 0x444444
};

const game = new Phaser.Game(config);

Регистрация обработчика события

Вся магия происходит в методе create. Система ввода Phaser (this.input) предоставляет метод .on(), который позволяет подписаться на определенные события.

В данном случае мы регистрируем обработчик для события 'pointermove'. Это событие генерируется каждый раз, когда координаты указателя (мыши или касания) изменяются внутри игрового холста. Обработчик — это простая стрелочная функция, которая выводит в консоль строку 'move'.

create ()
{
    this.input.on('pointermove', () => {
        console.log('move');
    });
}

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

Получение данных о событии

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

Этот объект (часто называемый pointer или event) содержит всю необходимую информацию: текущие координаты `xиy` (относительно холста игры), состояние кнопок мыши, идентификатор касания и многое другое. Вот как правильно объявить обработчик, чтобы получить эти данные:

create ()
{
    this.input.on('pointermove', (pointer) => {
        // Теперь мы можем использовать pointer.x и pointer.y
        console.log(`Координаты: X=${pointer.x}, Y=${pointer.y}`);
    });
}

Использование этих координат — основа для любых интерактивных действий: перемещения объектов, расчета траекторий или определения, над каким элементом игры находится курсор.

Типичные сценарии использования

Событие pointermove — это рабочий инструмент для множества игровых механик. Вот несколько практических идей, основанных на получении координат pointer.x и pointer.y:

1. **Следование объекта за курсором:** В обработчике можно обновлять позицию спрайта, делая его равной позиции указателя. 2. **Рисование/создание трека:** Сохраняя координаты из последовательных событий в массив, можно строить линии или траектории для рисования, создания путей для юнитов или следов. 3. **Интерактивные меню и UI:** Определяя, попали ли координаты курсора в область определенного интерфейсного элемента, можно создавать эффекты наведения (hover). 4. **Управление камерой:** Используя разницу между текущими и предыдущими координатами, можно реализовать перетаскивание карты или панорамирование камеры.

Важно помнить, что обработчик pointermove вызывается очень часто. Код внутри него должен быть максимально оптимизирован, чтобы не тормозить основной игровой цикл.

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

Событие pointermove — это мощный и необходимый инструмент для создания интерактивности в Phaser. Его правильное использование открывает двери к сложному и плавному управлению, основанному на движении курсора. Для экспериментов попробуйте

  1. Заставить спрайт постоянно следовать за курсором с небольшим отставанием (эффект «мягкого следования»)
  2. Реализовать простой инструмент для рисования линиями на холсте, сохраняя точки из события в массив
  3. Добавить условие, чтобы обработчик срабатывал только при зажатой левой кнопке мыши (проверяя свойство pointer.isDown), создав механику перетаскивания