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

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

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

Живой запуск

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

Исходный код


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

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

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

        this.add.text(10, 10, '2D', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width / 2 + 10, 10, '3D', { 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);

Подготовка сцены и конфигурация

В примере используется один класс сцены Example. Вся визуализация происходит в методе create(), который вызывается после загрузки ресурсов. Конфигурация игры config задаёт базовые параметры: тип рендерера, размеры окна и корневую сцену.

Ключевой момент — использование Phaser.WEBGL в качестве типа рендерера. Объекты Simplex Noise требуют поддержки WebGL для своей работы.

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

const game = new Phaser.Game(config);

Генерация 2D шума (NoiseSimplex2D)

Первый объект шума создаётся с помощью фабричного метода this.add.noisesimplex2d(). Этот метод принимает конфигурационный объект и параметры позиционирования.

Параметр noiseCells определяет, на сколько ячеек (квадратов) будет разбита текстура шума по осям X и Y. Значение [8, 9] означает 8 ячеек по ширине и 9 по высоте генерируемой области. Чем больше ячеек, тем более детализированным и «мелкозернистым» будет итоговый узор.

Метод также принимает координаты `x,y,widthиheight` для размещения объекта на сцене. В примере 2D-шум занимает левую половину экрана.

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

Генерация 3D шума (NoiseSimplex3D)

Второй объект создаётся аналогично, но с помощью метода this.add.noisesimplex3d(). Основное отличие — параметр noiseCells теперь принимает массив из трёх чисел [8, 9, 8]. Третье значение отвечает за разрешение по оси Z (глубине) в трёхмерном пространстве шума.

3D-шум визуализирует «срез» трёхмерного поля шума. Это создаёт более сложные и плавные переходы, которые могут напоминать облака, мрамор или поток жидкости. В примере он размещается в правой половине экрана.

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

Добавление текстовых подписей

Чтобы визуально разделить два типа шума, в верхний левый угол каждого из них добавляется текстовая метка. Для этого используется this.add.text().

Метод setStroke() добавляет контур (обводку) к тексту указанного цвета и толщины, что улучшает читаемость на фоне шума. Метод setShadow() создаёт тень, добавляющую тексту объём и отделяющую её от фона.

this.add.text(10, 10, '2D', { fontSize: 24 })
    .setStroke('#ff8844', 2)
    .setShadow(2, 2, '#333333', 2, true, false);

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

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

Объекты Simplex Noise в Phaser — это готовое решение для быстрого наполнения игры процедурными текстурами. Они идеально подходят для создания фонов планет, анимированных эффектов магии, поверхностей воды или рельефа. **Идеи для экспериментов:** 1. Анимируйте 3D-шум, постепенно изменяя параметр среза по оси Z с течением времени. 2. Используйте шум в качестве маски или карты высот для других игровых объектов. 3. Комбинируйте несколько слоёв шума с разными noiseCells и цветами для создания сложных материалов. 4. Привяжите генерацию шума к сиду (seed), чтобы создавать воспроизводимые уникальные миры.