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

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

Статичные текстуры в игре могут выглядеть скучно. Phaser предоставляет набор утилит `Phaser.Actions` для быстрого добавления анимационных эффектов к игровым объектам. В этой статье мы разберем, как с помощью одного вызова `Phaser.Actions.AddEffectShine` оживить фоновое изображение, придав ему динамичный эффект переливающегося сияния. Этот прием отлично подходит для создания визуально привлекательных меню, интерактивных кнопок или магических аур.

Версия 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('bg', 'assets/textures/gold.png');
        this.load.image('displacement', 'assets/textures/gold-n.png');
    }

    create ()
    {
        const bg = this.add.image(this.sys.scale.width / 2, this.sys.scale.height / 2, 'bg');
        Phaser.Actions.FitToRegion(bg, 1);

        Phaser.Actions.AddEffectShine(bg, {
            displacementMap: 'displacement',
            displacement: 1,
            colorFactor: [ 0, 1, 2, 1 ],
            direction: 0,
            scale: 1,
            duration: 5000,
            ease: 'Quad.inout',
            yoyo: true
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов

Первым делом в методе preload() мы загружаем две текстуры. Первая — основное изображение фона (bg). Вторая — так называемая displacement-карта (displacement). Это специальное черно-белое изображение, которое будет использоваться для создания эффекта искажения и сияния. Светлые и темные области на этой карте определяют, как будет "сдвигаться" основной рисунок.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/textures/gold.png');
this.load.image('displacement', 'assets/textures/gold-n.png');

Создание и настройка фона

В методе create() мы создаем спрайт фона и позиционируем его по центру экрана. После этого применяем к нему действие Phaser.Actions.FitToRegion. Эта функция масштабирует изображение так, чтобы оно полностью заполнило заданную область. В данном случае `1` — это ссылка на область всего игрового окна.

const bg = this.add.image(this.sys.scale.width / 2, this.sys.scale.height / 2, 'bg');
Phaser.Actions.FitToRegion(bg, 1);

Применение эффекта сияния

Ключевой момент — вызов Phaser.Actions.AddEffectShine. Этот метод принимает игровой объект (наш фон) и конфигурационный объект с параметрами эффекта. Эффект автоматически стартует и управляет собой после вызова.

Разберем параметры: - displacementMap: ключ текстуры displacement-карты. - displacement: сила смещения, создаваемого картой. - colorFactor: массив из четырех чисел, управляющих смешением цветов для создания свечения. Значения соответствуют каналам: красный, зеленый, синий и общая яркость. - direction: направление движения эффекта (в градусах). - scale: масштаб эффекта. - duration: длительность одного цикла анимации в миллисекундах. - ease: функция плавности (easing) для анимации. - yoyo: если true, анимация будет проигрываться вперед и назад.

Phaser.Actions.AddEffectShine(bg, {
    displacementMap: 'displacement',
    displacement: 1,
    colorFactor: [ 0, 1, 2, 1 ],
    direction: 0,
    scale: 1,
    duration: 5000,
    ease: 'Quad.inout',
    yoyo: true
});

Настройка игры

Конфигурационный объект игры задает базовые параметры: тип рендерера, размеры окна, цвет фона и ссылку на основную сцену.

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

const game = new Phaser.Game(config);

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

Метод Phaser.Actions.AddEffectShine — это мощный инструмент для быстрого добавления сложных визуальных эффектов без написания шейдеров вручную. Он идеально подходит для прототипирования и украшения UI-элементов. Для экспериментов попробуйте изменить параметр colorFactor на [2, 0, 1, 1] для другого оттенка свечения, увеличьте displacement для более агрессивного искажения или используйте другую displacement-карту для совершенно нового визуального стиля.