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

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

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

Версия 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('bomb', 'assets/sprites/bombcolor.png');
    }

    create ()
    {
        const bomb1 = this.add.sprite(200, 300, 'bomb');
        bomb1.setInteractive({ useHandCursor: true });

        bomb1.on('pointerover', () =>
        {
            bomb1.postFX.addGlow(0xffffff, 32);
        });
        bomb1.on('pointerout', () =>
        {
            bomb1.postFX.clear();
        });
    }
}

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

const game = new Phaser.Game(config);

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

В методе preload мы устанавливаем базовый URL для загрузки ресурсов и загружаем одно изображение — спрайт бомбы. Это стандартная практика в Phaser для подготовки ассетов перед созданием сцены.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bomb', 'assets/sprites/bombcolor.png');
}

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

В методе create мы создаем спрайт и делаем его интерактивным. Ключевой момент — вызов метода setInteractive({ useHandCursor: true }). Это позволяет спрайту реагировать на события указателя (мыши или касания), а параметр useHandCursor меняет курсор на "руку" при наведении, что является стандартным визуальным индикатором кликабельности.

const bomb1 = this.add.sprite(200, 300, 'bomb');
bomb1.setInteractive({ useHandCursor: true });

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

Здесь мы подписываемся на два события указателя: pointerover (курсор наведен на объект) и pointerout (курсор убран с объекта). При наведении (pointerover) мы обращаемся к менеджеру постэффектов спрайта bomb1.postFX и добавляем эффект свечения с помощью метода addGlow. Первый аргумент — цвет свечения (0xffffff — белый), второй — радиус размытия (32). Этот метод автоматически создает и применяет эффект к спрайту. При уведении курсора (pointerout) мы вызываем bomb1.postFX.clear(), чтобы удалить все активные постэффекты с этого спрайта и вернуть его в исходное состояние.

bomb1.on('pointerover', () =>
{
    bomb1.postFX.addGlow(0xffffff, 32);
});
bomb1.on('pointerout', () =>
{
    bomb1.postFX.clear();
});

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

Это стандартная конфигурация игры Phaser 3. Мы указываем тип рендерера, размеры холста, цвет фона, ID родительского HTML-элемента и наш основной класс сцены Example. После этого создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

const game = new Phaser.Game(config);

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

Система постэффектов Phaser (postFX) позволяет с минимальными усилиями добавлять сложные визуальные модификации объектам. Всего пара строк кода — и ваш интерфейс или игровой мир становится значительно выразительнее. Для экспериментов попробуйте изменить цвет и радиус свечения в addGlow, применить другие эффекты (например, addShadow или addPixelate), или добавить эффект не при наведении, а при клике (pointerdown).