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

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

Версия 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('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        const sprite = this.add.sprite(400, 300, 'eye').setInteractive();

        sprite.on('pointerover', function (event)
        {

            this.setTint(0xff0000);

        });

        sprite.on('pointerout', function (event)
        {

            this.clearTint();

        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание интерактивного спрайта

Вся работа начинается с методов preload и create сцены. В preload загружается изображение, которое станет нашим интерактивным объектом.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');

В методе create мы создаем спрайт и делаем его интерактивным. Без вызова метода setInteractive() объект не будет генерировать события ввода.

const sprite = this.add.sprite(400, 300, 'eye').setInteractive();

Реакция на наведение (pointerover)

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

В примере мы используем метод setTint, чтобы залить спрайт красным цветом. Обратите внимание: внутри функции-обработчика контекст this указывает на сам спрайт (sprite), что очень удобно.

sprite.on('pointerover', function (event) {
    this.setTint(0xff0000);
});

Реакция на уход курсора (pointerout)

Когда курсор покидает границы спрайта, генерируется событие pointerout. Его обработчик должен вернуть объект в исходное или нейтральное состояние.

В нашем случае мы убираем наложенный ранее оттенок с помощью метода clearTint.

sprite.on('pointerout', function (event) {
    this.clearTint();
});

Сборка конфигурации игры

Финальный шаг — создание экземпляра игры с конфигурацией. Ключевой элемент конфига config — указание нашего класса сцены Example. Без этого игра не знала бы, какую логику выполнять.

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

const game = new Phaser.Game(config);

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

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