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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');

        this.load.image('logo', 'assets/sprites/phaser.png');

    }

    create ()
    {

        this.input.on('pointerdown', function (pointer)
        {

            console.log('down');

            this.add.image(pointer.x, pointer.y, 'logo');

        }, this);

    }
}

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

const game = new Phaser.Game(config);

Суть примера

Код создаёт простую сцену, где каждый клик левой кнопкой мыши (или касание на сенсорном экране) регистрируется в консоли браузера, а в точке клика появляется спрайт с логотипом Phaser.

Этот подход универсален и является отправной точкой для большинства интерактивных элементов в игре.

Слушатель событий ввода

Вся магия происходит внутри метода create сцены. Для обработки ввода используется система событий Phaser.

Мы регистрируем слушатель (event listener) на событие 'pointerdown' у объекта this.input. Этот объект отвечает за все виды ввода: мышь, касания, тачпад.

this.input.on('pointerdown', function (pointer) {
    // Действие при клике
}, this);

Колбэк-функция получает объект pointer, который содержит всю информацию о событии: координаты `x,y, кнопка мыши и другие данные. Третий аргументthisзадаёт контекст выполнения колбэка, чтобы внутри функцииthis` ссылался на экземпляр сцены, а не на объект события.

Действие по клику

Внутри функции-обработчика выполняются два действия. Во-первых, для простой отладки в консоль выводится сообщение.

console.log('down');

Во-вторых, и это главное, в точке клика создаётся новый спрайт.

this.add.image(pointer.x, pointer.y, 'logo');

Здесь this.add.image — фабричный метод для создания статичного изображения. В качестве координат мы передаём pointer.x и pointer.y, что гарантирует появление спрайта точно под курсором или пальцем пользователя. Ключ 'logo' ссылается на изображение, загруженное ранее в preload.

Загрузка ресурсов и конфигурация

Перед использованием спрайта его текстуру необходимо загрузить. Это делается в методе preload.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('logo', 'assets/sprites/phaser.png');
}

this.load.image('logo', ...) асинхронно загружает изображение и присваивает ему текстовый ключ 'logo'. Обратите внимание, что метод setBaseURL задаёт базовый путь для всех последующих загрузок, что позволяет указывать только относительные пути.

Игра инициализируется стандартной конфигурацией, которая указывает движку использовать нашу сцену Example.

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

const game = new Phaser.Game(config);

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

Вы научились основам обработки кликов в Phaser. С помощью объекта pointer и метода this.input.on можно легко привязать любое игровое действие к действию пользователя. **Идеи для экспериментов:** 1. Проверьте свойство pointer.button внутри обработчика, чтобы различать левую, правую и среднюю кнопки мыши. 2. Вместо создания изображения попробуйте изменить позицию уже существующего спрайта: player.setPosition(pointer.x, pointer.y). 3. Используйте событие 'pointerup' или 'pointermove' для реализации перетаскивания объектов (drag & drop).