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

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

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

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

Живой запуск

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

Исходный код

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

        this.add.noisesimplex3d({
            noiseCells: [ 4, 9, 4 ]
        }, width * 1 / 8, height / 2, width / 4, height);
        this.add.noisesimplex3d({
            noiseCells: [ 4, 9, 4 ],
            noiseIterations: 2
        }, width * 3 / 8, height / 2, width / 4, height);
        this.add.noisesimplex3d({
            noiseCells: [ 4, 9, 4 ],
            noiseIterations: 3
        }, width * 5 / 8, height / 2, width / 4, height);
        this.add.noisesimplex3d({
            noiseCells: [ 4, 9, 4 ],
            noiseIterations: 4
        }, width * 7 / 8, height / 2, width / 4, height);

        this.add.text(10, 10, '1 iteration', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width / 4 + 10, 10, '2 iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width / 2 + 10, 10, '3 iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width * 3 / 4 + 10, 10, '4 iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
    }
}

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

const game = new Phaser.Game(config);

Создание объекта шума

Основной объект для работы — this.add.noisesimplex3d. Он создаёт и отображает текстуру, сгенерированную на основе 3D-симплекс-шума.

Конструктор принимает объект с настройками и параметры позиционирования:

this.add.noisesimplex3d(config, x, y, width, height);

В нашем примере все объекты имеют одинаковый базовый конфиг { noiseCells: [ 4, 9, 4 ] } и расположены друг за другом по горизонтали. Параметр noiseCells задает «зернистость» шума по осям X, Y, Z.

Магия параметра noiseIterations

Ключевой параметр, который мы исследуем, — noiseIterations. По умолчанию он равен 1.

// Шум с одной итерацией (значение по умолчанию)
{ noiseCells: [ 4, 9, 4 ] }

// Шум с двумя итерациями
{ noiseCells: [ 4, 9, 4 ], noiseIterations: 2 }

Каждая последующая итерация добавляет новый слой шума с удвоенной частотой и уменьшенной амплитудой, накладываясь на предыдущий результат. Этот принцип известен как «фрактальный шум» или «octaves» в других библиотеках. Он позволяет создавать более детализированные и натуралистичные паттерны.

Визуальный результат итераций

В примере создаются четыре текстуры с разным количеством итераций (от 1 до 4).

this.add.noisesimplex3d({
    noiseCells: [ 4, 9, 4 ],
    noiseIterations: 4
}, width * 7 / 8, height / 2, width / 4, height);

Наглядно видно, как с ростом noiseIterations простая крупнозернистая структура (1 итерация) превращается в сложную, многослойную текстуру с обилием мелких деталей (4 итерации). Это прямое следствие наложения высокочастотных слоев шума.

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

Управляя noiseIterations, вы можете генерировать текстуры для разных целей: * **noiseIterations: 1-2:** Крупные, плавные паттерны для фоновых текстур, облаков, базовой высоты ландшафта. * **noiseIterations: 3-4:** Детализированные текстуры для камня, дерева, травы или для добавления мелких неровностей на карту высот.

Объект noisesimplex3d можно использовать не только для статичных текстур, но и для анимации, меняя параметры или смещая Z-координату шума в кадре.

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

Параметр noiseIterations в noisesimplex3d — это простой и эффективный способ контролировать уровень детализации процедурного шума. Начните экспериментировать: попробуйте анимировать значение noiseIterations для плавного «проявления» деталей, комбинируйте текстуры с разными настройками в одном кадре или используйте результат как маску для других графических элементов.