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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    noise2;

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

        this.bg = this.add.noisesimplex2d({
            noiseColorStart: 0x88aaff,
            noiseColorEnd: 0xaaffff,
        }, width / 2, height / 2, width, height);

        // Set colors.
        this.add.noise({
            noiseColorStart: 0x88aaff,
            noiseColorEnd: 0xaaffff
        }, width * 1 / 8, height / 2, width / 4, height);

        // Color to transparent.
        this.noise2 = this.add.noise({
            noiseColorStart: [ 1, 12 / 16, 10 / 16 ],
            noiseColorEnd: [ 0, 0, 0, 0 ], // Use channel notation to include alpha.
            noisePower: 4
        }, width * 3 / 8, height / 2, width / 4, height);

        // Randomize color channels.
        this.add.noise({
            noiseRandomChannels: true
        }, width * 5 / 8, height / 2, width / 4, height);

        // Randomize color channels on specific colors.
        this.add.noise({
            noiseColorStart: 0xff0000,
            noiseColorEnd: 0x00ff00,
            noiseRandomChannels: true
        }, width * 7 / 8, height / 2, width / 4, height);
    }

    update (time)
    {
        this.bg.noiseFlow = time / 2000;

        this.noise2.noisePower = Math.sin(time / 1000) + 1;
    }
}

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

const game = new Phaser.Game(config);

Базовый фон с шумом

Основой для создания фона служит объект NoiseSimplex2D, который генерирует двумерный симплекс-шум с плавными переходами. В примере он используется как полноэкранный фон.

Ключевые параметры: - noiseColorStart и noiseColorEnd определяют начальный и конечный цвет градиента шума. - Позиция и размеры задаются после объекта.

this.bg = this.add.noisesimplex2d({
    noiseColorStart: 0x88aaff,
    noiseColorEnd: 0xaaffff,
}, width / 2, height / 2, width, height);

Здесь создаётся фон, плавно переходящий от голубого (0x88aaff) к светло-голубому (0xaaffff). Объект центрируется и растягивается на весь экран.

Цветовые градиенты и прозрачность

Объект add.noise позволяет создавать более компактные области шума с тонкой настройкой цвета. Важно: цвета можно задавать не только в HEX-формате (0xRRGGBB), но и в виде массива каналов [R, G, B, A], где значения нормализованы от 0 до 1.

this.noise2 = this.add.noise({
    noiseColorStart: [ 1, 12 / 16, 10 / 16 ], // Яркий желтоватый цвет
    noiseColorEnd: [ 0, 0, 0, 0 ], // Полностью прозрачный чёрный
    noisePower: 4 // Усиление контраста шума
}, width * 3 / 8, height / 2, width / 4, height);

Параметр noisePower контролирует степень контраста — чем выше значение, тем более выражены переходы между цветами. Установка альфа-канала в 0 для конечного цвета создаёт эффект плавного растворения.

Случайные каналы цвета

Для создания психоделических или хаотичных текстур можно рандомизировать цветовые каналы. Параметр noiseRandomChannels: true независимо перемешивает каналы красного, зелёного и синего для каждого пикселя, основываясь на значении шума.

// Полностью случайные цвета
this.add.noise({
    noiseRandomChannels: true
}, width * 5 / 8, height / 2, width / 4, height);

// Случайные каналы на заданном градиенте
this.add.noise({
    noiseColorStart: 0xff0000,
    noiseColorEnd: 0x00ff00,
    noiseRandomChannels: true
}, width * 7 / 8, height / 2, width / 4, height);

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

Анимация шума в реальном времени

Динамика — это то, что оживляет шум. Свойства объектов шума можно менять в методе update, который вызывается каждый кадр.

update (time) {
    this.bg.noiseFlow = time / 2000;
    this.noise2.noisePower = Math.sin(time / 1000) + 1;
}

- noiseFlow смещает текстуру шума, создавая иллюзию течения (например, воды или тумана). Значение time / 2000 обеспечивает плавное, линейное движение. - noisePower анимируется с помощью синуса, пульсируя между 0 и 2. Это заставляет контраст шума ритмично увеличиваться и уменьшаться.

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

Объекты шума в Phaser — это гибкий инструмент для генерации «живых» текстур прямо в браузере. Они не нагружают сеть загрузкой изображений и могут динамически меняться в ответ на действия игрока. Для экспериментов попробуйте: связать noisePower со здоровьем персонажа для эффекта пульсации экрана, использовать шум как маску для других объектов или комбинировать несколько слоёв шума с разными скоростями noiseFlow для создания сложных атмосферных явлений.