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

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

Клеточный шум (Cellular Noise) — мощный инструмент для генерации procedural-текстур, который часто используется для создания фонов, ландшафтов или абстрактных визуальных эффектов. В отличие от простого случайного шума, он генерирует структуры, похожие на ячейки, пузыри или живые ткани. В Phaser есть встроенный Game Object `noisecell2d`, который делает эту генерацию невероятно простой. В этой статье мы разберем, как управлять степенью сглаживания этих ячеек, чтобы получать как резкие пиксельные паттерны, так и плавные органические переходы, идеальные для атмосферных фонов игр.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create()
    {
        const { width, height } = this.scale;

        this.add.noisecell2d({
            noiseCells: [ 8, 9 ],
            noiseColorStart: 0xffcc66,
            noiseColorEnd: 0x442288
        }, width / 4, height / 2, width / 2, height);

        this.add.noisecell2d({
            noiseCells: [ 8, 9 ],
            noiseColorStart: 0xccff66,
            noiseColorEnd: 0x662266,
            noiseSmoothing: 2,
            noiseMode: 2 // Render cells with smooth intersections.
        }, width * 3 / 4, height / 2, width / 2, height);
    }
}

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

const game = new Phaser.Game(config);

Создание базового клеточного шума

Объект noisecell2d добавляется через фабрику this.add. Его основной конфиг определяет ключевые визуальные параметры.

this.add.noisecell2d({
    noiseCells: [ 8, 9 ],
    noiseColorStart: 0xffcc66,
    noiseColorEnd: 0x442288
}, width / 4, height / 2, width / 2, height);

Здесь мы создаем объект шума. Параметр noiseCells задает количество ячеек по осям X и Y — в данном случае 8 на 9. noiseColorStart и noiseColorEnd определяют градиент цветов для раскраски ячеек. Последние четыре аргумента метода задают позицию (X, Y) и размеры (width, height) объекта на экране. Без параметров сглаживания границы между ячейками будут резкими.

Включаем сглаживание: noiseSmoothing и noiseMode

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

this.add.noisecell2d({
    noiseCells: [ 8, 9 ],
    noiseColorStart: 0xccff66,
    noiseColorEnd: 0x662266,
    noiseSmoothing: 2,
    noiseMode: 2 // Render cells with smooth intersections.
}, width * 3 / 4, height / 2, width / 2, height);

Параметр noiseSmoothing принимает целочисленные значения (обычно от 0 до 5). Чем выше значение, тем более размытыми и плавными становятся границы ячеек. noiseMode: 2 — это ключ к активации алгоритма рендеринга, который вычисляет плавные пересечения между ячейками. Без этого режима параметр noiseSmoothing не даст желаемого эффекта. Вместе они превращают сетку из цветных многоугольников в текучую, похожую на мрамор или дымку, текстуру.

Практическое применение в играх

Такой сглаженный шум не требует ресурсоемких вычислений на GPU и является готовым игровым объектом. Его можно использовать как динамический фон для меню или космической карты.

// Создание фона на весь экран
const backgroundNoise = this.add.noisecell2d({
    noiseCells: [ 20, 15 ],
    noiseColorStart: 0x001133,
    noiseColorEnd: 0x336699,
    noiseSmoothing: 3,
    noiseMode: 2
}, 0, 0, width, height);

Установив объекту noisecell2d координаты (0,0) и размеры, равные размерам камеры, вы получите полноэкранный фон. Поэкспериментируйте с увеличением количества ячеек (noiseCells) вместе со сглаживанием — это создаст более мелкозернистую и сложную текстуру, идеальную для симуляции облаков, воды или неоднородного освещения.

Советы по настройке и производительности

Помните, что объект noisecell2d использует WebGL. Основные параметры, влияющие на сложность рендеринга, — это количество ячеек (noiseCells) и уровень сглаживания (noiseSmoothing).

// Пример тяжелой конфигурации (используйте с осторожностью)
{
    noiseCells: [ 50, 50 ],
    noiseSmoothing: 5,
    noiseMode: 2
}

Для статичного фона можно позволить более высокие значения. Если же вы планируете анимировать параметры (например, цвет или позицию) в реальном времени, стоит выбрать умеренные настройки, чтобы не нагружать рендер-цикл. Анимация достигается просто через обновление свойств объекта в методе update() сцены.

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

Game Object noisecell2d в Phaser — это быстрый и гибкий способ наполнить вашу игру уникальными процедурными текстурами. Сочетание параметров noiseSmoothing и noiseMode открывает путь от строгого клеточного паттерна до мягких абстрактных форм. Для экспериментов попробуйте анимировать свойства noiseColorStart и noiseColorEnd для создания эффекта плавного цветового перехода или динамически менять noiseCells для "кипящей", живой текстуры фона.