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();

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

            this.setTint(Math.random() * 16000000);

        });
    }
}

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

const game = new Phaser.Game(config);

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

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

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

В методе create мы создаем сам спрайт, размещая его в центре сцены (координаты x=400, y=300), и делаем его интерактивным. Без вызова метода setInteractive() объект не будет генерировать события ввода.

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

Подписка на событие pointermove

Ядро механики — метод on(), который регистрирует обработчик события для игрового объекта. Событие 'pointermove' генерируется каждый раз, когда курсор (или касание) перемещается над интерактивной областью спрайта.

sprite.on('pointermove', function (pointer)
{
    // Код обработчика выполнится здесь
});

Обратите внимание: внутри функции-обработчика контекст this указывает на сам спрайт, к которому привязано событие. Это позволяет напрямую вызывать его методы, такие как setTint.

Динамическое изменение цвета (тинтование)

Внутри обработчика мы меняем цвет спрайта (применяем тинт) с помощью метода setTint. В качестве значения передается случайное целое число, полученное умножением Math.random() на 16000000. Это стандартный для Phaser способ задания цвета в виде десятичного числа (hex color).

this.setTint(Math.random() * 16000000);

Каждый раз, когда игрок двигает мышью над спрайтом, выполняется эта строка, присваивая ему новый случайный оттенок. Это создает эффект "мерцания" или "подсветки" в реальном времени.

Инициализация игры

Весь функционал упакован в сцену Example. Для запуска игры мы создаем конфигурационный объект, где указываем тип рендерера, родительский HTML-элемент и нашу сцену. Затем инстанцируем объект Phaser.Game с этой конфигурацией.

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

const game = new Phaser.Game(config);

Именно этот код инициирует весь цикл жизни игры: прелоад, создание объектов и запуск основного игрового цикла.

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

Всего несколько строк кода — и ваш спрайт оживает, реагируя на движение курсора. Встроенная система событий Phaser (on) делает такие взаимодействия простыми и эффективными. Для экспериментов попробуйте вместо случайного тинта: плавно изменять масштаб спрайта с помощью setScale, вращать его свойством rotation или перемещать, изменяя координаты `xиyв зависимости от положения указателяpointer`. Это основа для создания сложных реакций на действия игрока.