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

Создание процедурных текстур — мощный инструмент для разработки игр. Он позволяет генерировать уникальные фоны, поверхности и эффекты прямо во время выполнения, экономя ресурсы и добавляя разнообразие. В этой статье мы разберем, как использовать встроенные в Phaser методы `noisecell2d`, `noisecell3d` и `noisecell4d` для быстрой генерации клеточного (ячеистого) шума разной размерности. Вы научитесь создавать органичные текстуры для планет, ландшафтов или абстрактных фонов в несколько строк кода.

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

Живой запуск

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

Исходный код


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

        this.add.noisecell2d({ noiseCells: [ 5, 9] }, width * 1 / 6, height / 2, width / 3, height);
        this.add.noisecell3d({ noiseCells: [ 5, 9, 1 ] }, width * 3 / 6, height / 2, width / 3, height);
        this.add.noisecell4d({ noiseCells: [ 5, 9, 1, 1 ] }, width * 5 / 6, height / 2, width / 3, height);

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

Что такое клеточный шум и зачем он нужен?

Клеточный (Cellular) или ячеистый шум — это тип процедурной текстуры, который создает узор, напоминающий клетки, чешую, пену или каменистую поверхность. В отличие от плавного шума Перлина, клеточный шум генерирует дискретные «ячейки» с четкими границами.

В игровой разработке он идеально подходит для: * Генерации текстур камня, лавы или льда. * Создания карты высот для клеточных ландшафтов. * Визуализации областей влияния (например, для стратегических карт). * Генерации фонов для научно-фантастических или абстрактных сцен.

Phaser предоставляет готовые фабричные методы для его создания, что избавляет от необходимости писать сложные алгоритмы с нуля.

Разбираем исходный код примера

Весь пример умещается в метод create() сцены. Давайте посмотрим на его структуру.

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

Первым делом мы получаем ширину и высоту игрового холста через this.scale. Это нужно для корректного позиционирования наших текстур. Далее создаются три текстуры шума, каждая в своей трети экрана.

this.add.noisecell2d({ noiseCells: [ 5, 9] }, width * 1 / 6, height / 2, width / 3, height);

Это вызов для создания 2D-шума. Разберем его аргументы по порядку: 1. **Конфигурационный объект { noiseCells: [5, 9] }**: Параметр noiseCells определяет, как будет разбита текстура. В данном случае [5, 9] означает 5 ячеек по горизонтали и 9 по вертикали внутри самой текстуры. 2. **Координаты X и Y (width * 1 / 6, height / 2)**: Это точка, в которую будет помещен *центр* создаваемого игрового объекта с текстурой. Первая текстура центрируется на первой шестой ширины экрана по X и по центру по Y. 3. **Ширина и высота (width / 3, height)**: Физические размеры отображаемого объекта на холсте. Каждая текстура займет одну треть ширины и всю высоту экрана.

От 2D к 4D: увеличиваем сложность

Phaser позволяет генерировать шум большей размерности, что добавляет вариативности и глубины текстуре.

this.add.noisecell3d({ noiseCells: [ 5, 9, 1 ] }, width * 3 / 6, height / 2, width / 3, height);

Метод noisecell3d создает трехмерный шум. В массиве noiseCells теперь три значения: [5, 9, 1]. Третье значение (`1`) можно условно рассматривать как "глубину" или "слой", который добавляет вариацию в окраску ячеек, делая текстуру менее плоской и более объемной.

this.add.noisecell4d({ noiseCells: [ 5, 9, 1, 1 ] }, width * 5 / 6, height / 2, width / 3, height);

Четырехмерный шум (noisecell4d) использует массив из четырех значений [5, 9, 1, 1]. Четвертое измерение добавляет еще один параметр для вычисления, что приводит к более сложному и менее предсказуемому паттерну. На практике разница между 3D и 4D может быть визуально не так очевидна при статичном отображении, но станет заметна при анимации параметров (например, при изменении одного из измерений во времени).

Добавляем текстовые подписи

Чтобы пример был понятнее, к нему добавлены текстовые метки. Это стандартная работа с текстом в Phaser.

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

Метод this.add.text() создает объект текста. После его создания мы сразу вызываем методы оформления: * .setStroke('#ff8844', 2) — задает оранжевую обводку толщиной 2 пикселя. * .setShadow(2, 2, '#333333', 2, true, false) — настраивает тень со смещением (2,2), цветом, размытием. Последние два параметра true, false указывают, что тень должна отбрасываться и не должна быть только вокруг обводки.

Аналогично создаются подписи "3D" и "4D", позиционируемые в соответствующих третях экрана.

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

Методы noisecell2d, noisecell3d и noisecell4d в Phaser — это быстрый и эффективный способ наполнить игру уникальными процедурными текстурами прямо из коробки. Понимая параметр noiseCells, вы можете контролировать детализацию и характер получаемого узора. **Идеи для экспериментов:** 1. Анимируйте текстуру, плавно меняя одно из значений в массиве noiseCells во времени с помощью scene.tweens или в методе update. 2. Используйте эту текстуру не как фон, а как карту высот или маску для другого графического объекта. 3. Комбинируйте несколько слоев шума с разными настройками и режимами смешивания (setBlendMode), чтобы создать более сложные материалы. 4. Поэкспериментируйте с очень большими или маленькими значениями noiseCells (например, [2, 2] или [50, 50]), чтобы увидеть, как меняется паттерн от крупных блоков до мелкой ряби.