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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    noise;

    create()
    {
        const { width, height } = this.scale;

        this.noise = this.add.noise({}, width / 2, height / 2, width, height);

        this.time.addEvent(
            {
                delay: 1000,
                loop: true,
                callback: () => this.noise.noiseOffset = [
                    Math.random(),
                    Math.random()
                ]
            }
        );
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 1280,
    height: 720,
    scene: Example
};

const game = new Phaser.Game(config);

Что такое объект Noise?

В Phaser класс Noise — это игровой объект, который генерирует и отображает текстуру процедурного шума Перлина. В отличие от спрайтов, он создает изображение программно, что позволяет динамически менять его параметры.

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

this.noise = this.add.noise({}, width / 2, height / 2, width, height);

Настройка и отображение

Метод this.add.noise() принимает несколько аргументов. Первый аргумент — это объект конфигурации, который в нашем примере пуст {}, что означает использование настроек по умолчанию. Следующие аргументы — это X и Y координаты центра объекта, а затем его ширина и высота.

Поскольку пример использует WebGL-рендерер (это указано в конфиге type: Phaser.WEBGL), шум рисуется с аппаратным ускорением, что обеспечивает высокую производительность даже при больших размерах и анимации.

const config = {
    type: Phaser.WEBGL,
    width: 1280,
    height: 720,
    scene: Example
};

Анимация через смещение (noiseOffset)

Статичная текстура шума — это только начало. Его настоящая сила раскрывается в возможности анимации через свойство noiseOffset. Это свойство представляет собой массив из двух чисел [x, y], которые смещают точку отсчета для генерации шума.

В примере мы используем событие таймера this.time.addEvent, которое срабатывает каждую секунду (delay: 1000) и в цикле (loop: true) задает случайное смещение. В результате каждую секунду текстура шума "перерисовывается" с новой начальной точки, создавая эффект мерцания или плавного перетекания.

this.time.addEvent({
    delay: 1000,
    loop: true,
    callback: () => this.noise.noiseOffset = [
        Math.random(),
        Math.random()
    ]
});

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

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