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

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

Интерактивность — основа игрового процесса. Способность игровых объектов реагировать на действия пользователя делает игру живой и увлекательной. В этой статье мы разберем, как в 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('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

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

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

            this.setTint(0xff0000);

        });

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

            this.clearTint();

        });
    }
}

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

const game = new Phaser.Game(config);

Создание интерактивного спрайта

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

const sprite = this.add.sprite(400, 300, 'eye').setInteractive({ cursor: 'pointer' });

Здесь this.add.sprite() создает спрайт в центре экрана. Вызов .setInteractive({ cursor: 'pointer' }) делает этот спрайт интерактивным и указывает браузеру сменить курсор на стандартный вид «руки с указательным пальцем» (CSS-значение pointer) при наведении на этот объект. Это мгновенно дает пользователю понять, что с объектом можно взаимодействовать.

Обработка события наведения

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

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

Внутри функции-обработчика this ссылается на сам спрайт (sprite). Метод this.setTint(0xff0000) применяет красный оттенок ко всему спрайту, обеспечивая простую, но эффективную визуальную обратную связь для игрока. Параметр 0xff0000 — это шестнадцатеричный код цвета красного.

Сброс состояния при уходе курсора

Не менее важно корректно обработать момент, когда пользователь уводит курсор с объекта. Для этого используется событие pointerout.

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

Метод this.clearTint() удаляет ранее установленный цветовой оттенок, возвращая спрайту его исходный внешний вид. Без этой обработки спрайт оставался бы окрашенным красным после наведения, что сбивало бы пользователя с толку.

Структура сцены и конфигурация игры

Весь описанный функционал размещается внутри методов preload и create сцены Phaser. Конфигурационный объект игры определяет основные параметры.

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 config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

В методе preload() задается базовый URL для загрузки ассетов и загружается изображение для спрайта. Конфигурация config создает игровой экран размером 800x600 пикселей и указывает, какую сцену (Example) использовать. Инициализация new Phaser.Game(config) запускает игру.

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

Теперь вы знаете, как добавить базовую интерактивность спрайту в Phaser, используя setInteractive(), события pointerover/pointerout и управление курсором. Для экспериментов попробуйте вместо setTint использовать другие методы, например, setScale для небольшого увеличения объекта при наведении, или добавьте обработку события pointerdown для реакции на клик. Комбинируя эти техники, вы сможете создавать отзывчивые и приятные в использовании элементы игрового интерфейса.