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

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

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

Версия 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('pointerdown', function (pointer)
        {

            this.setTint(0xff0000);

        });

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

            this.clearTint();

        });

        sprite.on('pointerup', function (pointer)
        {

            this.clearTint();

        });
    }
}

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

const game = new Phaser.Game(config);

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

В Phaser вся логика игры организована в сценах (Scene). Каждая сцена имеет жизненный цикл с методами, такими как preload и create. В методе preload мы загружаем необходимые ресурсы, например, изображения.

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

Здесь мы устанавливаем базовый URL для загрузки и загружаем изображение с ключом 'eye'. Это изображение будет использовано для создания спрайта.

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

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

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

Спрайт создается в координатах (400, 300) с текстурой 'eye'. Вызов setInteractive() без параметров делает всю площадь спрайта чувствительной к событиям указателя (мыши или касания).

Обработка событий указателя

После того как спрайт стал интерактивным, мы можем подписаться на его события. Основные события для обработки клика: pointerdown (кнопка нажата), pointerup (кнопка отпущена) и pointerout (курсор ушел с объекта).

sprite.on('pointerdown', function (pointer)
{
    this.setTint(0xff0000);
});

Внутри функции-обработчика контекст this ссылается на сам спрайт (sprite). Метод setTint применяет цветовой оттенок (в данном случае красный 0xff0000) к спрайту.

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

sprite.on('pointerup', function (pointer)
{
    this.clearTint();
});

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

Настройка и запуск игры

Конфигурация игры (config) определяет базовые параметры, такие как тип рендерера и корневая сцена. Объект game инстанцирует игру с этой конфигурацией.

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

const game = new Phaser.Game(config);

Поле type может быть Phaser.WEBGL или Phaser.CANVAS. parent — это ID HTML-элемента, в который будет встроен canvas игры. scene указывает на класс сцены, которая будет запущена первой.

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

Вы научились добавлять базовую интерактивность спрайтам в Phaser, используя события указателей. Это фундамент для создания любых кликабельных элементов. Для экспериментов попробуйте: изменить цвет оттенка на 0x00ff00; использовать событие pointerover для подсветки при наведении; вместо setTint изменить масштаб спрайта методом setScale; сделать интерактивной только часть спрайта, передав в setInteractive объект хитбокса.