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

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

Создание интерактивных элементов — ключ к увлекательному геймплею. В этой статье мы разберем, как в Phaser сделать спрайт отзывчивым на действия игрока: например, чтобы он менял анимацию при наведении курсора. Этот простой прием мгновенно улучшает обратную связь и оживляет игровой мир. На примере классического спрайтлиста из набора примеров Phaser мы реализуем реакцию спрайта на события `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.spritesheet('aliens', 'assets/sprites/bsquadron-enemies.png', { frameWidth: 192, frameHeight: 160 });
    }

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

        alien.on('pointerover', function ()
        {

            this.setFrame(3);

        });

        alien.on('pointerout', function ()
        {

            this.setFrame(0);

        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка листа спрайтов (spritesheet)

Перед созданием любого графического объекта его ресурсы необходимо загрузить в память. Для анимированных персонажей или объектов с несколькими состояниями идеально подходит спрайтлист (spritesheet) — единое изображение, содержащее все кадры.

В методе preload() мы используем this.load.spritesheet(). Ключевые параметры: - Ключ 'aliens' для обращения к ресурсу в коде. - Путь к файлу изображения. - Объект конфигурации, где frameWidth и frameHeight задают размер одного кадра.

this.load.spritesheet('aliens', 'assets/sprites/bsquadron-enemies.png', { frameWidth: 192, frameHeight: 160 });

Указав размер кадра, Phaser автоматически «нарежет» изображение на отдельные фреймы, к которым можно обращаться по индексу, начиная с 0.

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

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

const alien = this.add.sprite(400, 300, 'aliens', 0).setInteractive();

Разберем аргументы метода this.add.sprite(): - Координаты X=400 и Y=300 — позиция центра спрайта на сцене. - Ключ текстуры 'aliens', который мы загрузили ранее. - Индекс кадра `0` — отображаемый по умолчанию кадр из спрайтлиста.

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

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

Ядро интерактивности — подписка на события. Мы используем метод .on() для прослушивания двух событий: - pointerover: срабатывает, когда курсор заходит на область спрайта. - pointerout: срабатывает, когда курсор покидает область спрайта.

alien.on('pointerover', function () {
    this.setFrame(3);
});

Внутри функции-обработчика контекст this ссылается на сам спрайт (alien). Метод this.setFrame(3) мгновенно меняет отображаемый кадр на тот, что имеет индекс 3 в спрайтлисте (например, кадр с «ожившим» пришельцем).

alien.on('pointerout', function () {
    this.setFrame(0);
});

Аналогично, при уходе курсора мы возвращаем исходный кадр с индексом 0. Эта простая логика создает базовый эффект hover, знакомый по веб-интерфейсам.

Конфигурация и запуск игры

Весь интерактивный функционал работает внутри сцены (Scene). Сцена должна быть передана в основную конфигурацию игры.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example // Наша класс-сцена
};

const game = new Phaser.Game(config);

Объект config определяет основные параметры: тип рендерера (Phaser.AUTO выбирает WebGL или Canvas), HTML-контейнер для игры, ее размеры и главную сцену. Создание экземпляра Phaser.Game с этой конфигурацией инициализирует игровой цикл.

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

Всего несколько строк кода — и статичный спрайт превращается в отзывчивый игровой объект. Механика реакции на курсор — фундамент для сложных UI-элементов, интерактивных персонажей и визуальных подсказок. Для экспериментов попробуйте: 1. Использовать метод .setTint() внутри обработчиков для временного окрашивания спрайта. 2. Добавить событие pointerdown для реакции на клик. 3. Вместо смены кадра запустить предзагруженную анимацию с помощью this.play().