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

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

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic', 'assets/pics/anime-ai.jpg');
    }

    create ()
    {
        const sprite = this.add.image(400, 300, 'pic');

        const fx = sprite.enableFilters().filters.internal.addVignette(0.5, 0.5, 0.5, 0);

        const text = this.add.text(10, 10, 'FX.Vignette.strength: 0');

        this.tweens.add({
            targets: fx,
            strength: 0.5,
            duration: 3000,
            yoyo: true,
            loop: -1,
            hold: 1000,
            onUpdate: () => {
                text.setText(`FX.Vignette.strength: ${fx.strength}`);
            }
        });
    }
}

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

let game = new Phaser.Game(config);

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

В методе preload мы устанавливаем базовый URL для загрузки ресурсов и загружаем одно изображение. Важно отметить, что метод setBaseURL задаёт общий префикс для всех последующих загрузок, что упрощает указание путей.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('pic', 'assets/pics/anime-ai.jpg');
}

Создание спрайта и применение фильтра

В методе create мы размещаем загруженное изображение в центре сцены. Затем активируем для этого спрайта систему фильтров с помощью метода enableFilters(). Это обязательный шаг перед добавлением любых фильтров. Фильтр Vignette добавляется через цепочку вызовов: sprite.filters.internal.addVignette(). Этот метод принимает четыре параметра: координаты X и Y центра виньетки (в диапазоне от 0 до 1), её силу (strength) и радиус. В данном примере центр установлен посередине (0.5, 0.5), начальная сила — 0.5, а радиус — 0.

const sprite = this.add.image(400, 300, 'pic');
const fx = sprite.enableFilters().filters.internal.addVignette(0.5, 0.5, 0.5, 0);

Динамическая анимация параметра фильтра

Самый интересный момент — анимация свойства strength фильтра. Мы создаём текстовый объект для отображения текущего значения. Затем используем систему твинов Phaser this.tweens.add(). Твин анимирует свойство strength объекта фильтра fx от его начального значения (0.5) до целевого (0.5), что на первый взгляд кажется бессмысленным. Однако, ключевую роль играет параметр yoyo: true, который заставляет анимацию проигрываться в обратном порядке после завершения, создавая цикл от 0.5 до 0 и обратно. Параметр loop: -1 делает анимацию бесконечной, а hold: 1000 добавляет паузу в конечной точке перед началом обратного движения. В колбэке onUpdate мы обновляем текст, чтобы визуализировать изменение значения.

const text = this.add.text(10, 10, 'FX.Vignette.strength: 0');

this.tweens.add({
    targets: fx,
    strength: 0.5,
    duration: 3000,
    yoyo: true,
    loop: -1,
    hold: 1000,
    onUpdate: () => {
        text.setText(`FX.Vignette.strength: ${fx.strength}`);
    }
});

Конфигурация игры

Стандартная конфигурация игры Phaser. Обратите внимание на тёмно-синий цвет фона (backgroundColor), который хорошо контрастирует с изображением и делает эффект виньетки более заметным.

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

let game = new Phaser.Game(config);

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

Этот пример наглядно показывает, как просто в Phaser 3 можно добавить пост-обработку и анимировать её параметры в реальном времени. Фильтр Vignette — лишь один из многих доступных в объекте filters.internal. Для экспериментов попробуйте анимировать другие параметры, такие как radius или `x,y`, чтобы смещать центр затемнения. Также можно применить этот фильтр не к статичному изображению, а к игровому персонажу или интерфейсу, чтобы визуально выделять его или создавать эффект туннельного зрения.