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

Интерактивность — ключевой элемент вовлечения игрока. События наведения и ухода курсора (`pointerover` и `pointerout`) позволяют моментально реагировать на действия пользователя, подсвечивая интерактивные объекты, изменяя их внешний вид или давая тактильную обратную связь. Освоив этот простой, но мощный механизм, вы сможете сделать интерфейсы и игровые миры более отзывчивыми и интуитивно понятными.

Версия 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 ()
    {
        this.add.sprite(300, 200, 'eye').setInteractive();
        this.add.sprite(400, 300, 'eye').setInteractive();
        this.add.sprite(500, 400, 'eye').setInteractive();

        //  Events

        this.input.on('pointerover', (event, gameObjects) =>
        {

            gameObjects[0].setTint(0xff0000);

        });

        this.input.on('pointerout', (event, gameObjects) =>
        {

            gameObjects[0].clearTint();

        });
    }
}

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

const game = new Phaser.Game(config);

Создание интерактивных объектов

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

this.add.sprite(300, 200, 'eye').setInteractive();

Метод setInteractive() без параметров назначает на спрайт хитбокс, совпадающий с его размерами. Теперь спрайт будет генерировать события ввода.

Глобальная обработка событий ввода

Phaser позволяет слушать события на уровне всей сцены через объект this.input. Это удобно, когда нужно единообразно обрабатывать взаимодействие с несколькими объектами одного типа.

this.input.on('pointerover', (event, gameObjects) => {
    gameObjects[0].setTint(0xff0000);
});

Обработчик pointerover срабатывает, когда курсор наводится на интерактивный объект. В колбэк передаётся массив gameObjects, содержащий все объекты под курсором в данный момент. В примере берётся первый объект из этого массива (gameObjects[0]) и ему применяется красный оттенок с помощью метода setTint.

Восстановление исходного состояния

Важно не только реагировать на начало взаимодействия, но и корректно завершать его. Событие pointerout вызывается, когда курсор покидает область интерактивного объекта.

this.input.on('pointerout', (event, gameObjects) => {
    gameObjects[0].clearTint();
});

Метод clearTint() снимает все ранее установленные оттенки с объекта, возвращая ему исходный вид. Это обеспечивает чистую и предсказуемую обратную связь для игрока.

Отличия от обработки на уровне объекта

В примере используется глобальная обработка через this.input.on. Это не единственный способ. Альтернативный подход — назначение обработчиков напрямую на объект с помощью gameObject.on. Это лучше подходит для уникальной логики отдельных элементов.

const sprite = this.add.sprite(300, 200, 'eye').setInteractive();
sprite.on('pointerover', () => {
    this.setTint(0x00ff00); // Зелёный оттенок для этого конкретного спрайта
});

Выбор подхода зависит от задачи: глобальный — для однотипных реакций, объектный — для персонализированного поведения.

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

События pointerover и pointerout — это базовый, но фундаментальный инструмент для создания интерактивности. Экспериментируйте: попробуйте менять не только оттенок, но и масштаб (setScale), вращение (setRotation) или анимировать объект при наведении. Попробуйте комбинировать эти события с pointerdown для создания сложных интерактивных элементов, таких как кнопки с несколькими состояниями.