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

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

Визуальное разнообразие — ключ к увлекательному геймплею. Анимация цвета спрайтов без подготовки отдельных текстур экономит ресурсы и время разработчика. В этой статье мы разберем, как использовать встроенный фильтр `ColorMatrix` в Phaser 3 для плавного изменения оттенка (hue) игровых объектов в реальном времени. Этот подход идеально подходит для создания визуальных эффектов, выделения интерактивных элементов или сигналов состояния персонажей.

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

    create ()
    {
        this.add.sprite(200, 300, 'egg');

        const bomb = this.add.sprite(600, 300, 'egg');

        const fx = bomb.enableFilters().filters.internal.addColorMatrix().colorMatrix;

        const tween = this.tweens.addCounter({
            from: 0,
            to: 360,
            duration: 3000,
            loop: -1,
            onUpdate: () => {
                fx.hue(tween.getValue());
            }
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и базовая сцена

Как и в любом проекте на Phaser, мы начинаем с загрузки ресурсов в методе preload. В данном случае это одна спрайт-текстура.

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

В методе create создаются два спрайта из загруженной текстуры. Один добавляется статически, чтобы служить эталоном оригинального цвета. Второй спрайт, к которому будет применен фильтр, позиционируется отдельно.

create ()
{
    this.add.sprite(200, 300, 'egg');
    const bomb = this.add.sprite(600, 300, 'egg');
}

Включение фильтров и создание ColorMatrix

Фильтры в Phaser применяются к игровым объектам, поддерживающим их, например, к спрайтам. Чтобы начать работу, нужно активировать систему фильтров для объекта с помощью метода enableFilters().

const fx = bomb.enableFilters().filters.internal.addColorMatrix().colorMatrix;

Разберем эту цепочку вызовов: 1. bomb.enableFilters() — включает поддержку фильтров для спрайта bomb и возвращает объект FXController. 2. .filters.internal — предоставляет доступ к внутреннему менеджеру фильтров (FilterPipe). 3. .addColorMatrix() — добавляет и возвращает экземпляр фильтра ColorMatrixFilter. 4. .colorMatrix — это свойство добавленного фильтра, предоставляющее объект с методами для манипуляции цветом, таким как hue, saturation, brightness и другими.

Переменная fx теперь хранит ссылку на этот объект colorMatrix.

Анимация изменения оттенка с помощью Tween

Для создания плавной циклической анимации используется система твинов Phaser. Вместо твина, напрямую изменяющего свойство спрайта, здесь применяется tweens.addCounter. Этот твин генерирует изменяющееся числовое значение.

const tween = this.tweens.addCounter({
    from: 0,
    to: 360,
    duration: 3000,
    loop: -1,
    onUpdate: () => {
        fx.hue(tween.getValue());
    }
});

Конфигурация твина: - from: 0, to: 360 — значение будет меняться от 0 до 360 градусов (полный цикл цветового круга). - duration: 3000 — длительность одного прохода (от 0 до 360) составляет 3 секунды. - loop: -1 — твин будет повторяться бесконечно. - onUpdate — функция обратного вызова, которая выполняется на каждом кадре обновления твина. Внутри нее вызывается fx.hue(tween.getValue()). Метод hue() объекта colorMatrix применяет матрицу преобразования цвета, используя текущее значение твина как угол оттенка.

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

Сцена готова, осталось настроить и запустить саму игру. Конфигурационный объект передается в конструктор Phaser.Game.

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

const game = new Phaser.Game(config);

Ключевые параметры: - type: Phaser.AUTO определяет рендерер (WebGL или Canvas) автоматически. - width, height — размеры игрового холста. - backgroundColor — устанавливает темно-синий фон для контраста со спрайтами. - parent — ID HTML-элемента, в который будет встроен холст. - scene — указывает класс нашей сцены Example для немедленного запуска.

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

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