О чем этот пример
Cellular Noise (ячеистый шум) в Phaser — это мощный инструмент для генерации текстур, ландшафтов и визуальных эффектов с органичной, ячеистой структурой. Часто его используют статично, но настоящее волшебство начинается, когда мы анимируем параметры шума в реальном времени. Эта статья покажет, как управлять свойствами `noiseVariation` для 2D, 3D и 4D версий шума, создавая плавно меняющиеся, живые паттерны. Вы научитесь оживлять фоны, создавать эффекты магических полей или динамичные текстуры воды, управляя всего одним параметром.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
noise2D;
noise3D;
noise4D;
create()
{
const { width, height } = this.scale;
this.noise2D = this.add.noisecell2d({ noiseCells: [ 5, 9] }, width * 1 / 6, height / 2, width / 3, height);
this.noise3D = this.add.noisecell3d({ noiseCells: [ 5, 9, 4 ] }, width * 3 / 6, height / 2, width / 3, height);
this.noise4D = this.add.noisecell4d({ noiseCells: [ 5, 9, 4, 4 ] }, 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);
}
update (time)
{
const v = Math.cos(time / 1000) * 0.5 + 0.5;
this.noise2D.noiseVariation = [ v, v ];
this.noise3D.noiseVariation = [ v, v, v ];
this.noise4D.noiseVariation = [ v, v, v, v ];
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 1280,
height: 720,
scene: Example
};
const game = new Phaser.Game(config);
Создание объектов Cellular Noise
В методе create() сцены создаются три объекта шума: 2D, 3D и 4D. Каждый из них — это специальный игровой объект (NoiseCell2D, NoiseCell3D, NoiseCell4D), который можно добавить через фабрику this.add.
Ключевой параметр при создании — noiseCells. Это массив целых чисел, определяющий количество ячеек шума по каждой оси. Например, для 2D шума [5, 9] означает 5 ячеек по ширине и 9 по высоте генерируемой текстуры.
Позиция и размер каждого объекта рассчитываются относительно размеров окна игры (this.scale), чтобы расположить их в ряд.
const { width, height } = this.scale;
this.noise2D = this.add.noisecell2d(
{ noiseCells: [ 5, 9] },
width * 1 / 6,
height / 2,
width / 3,
height
);Динамическое свойство `noiseVariation`
Сердце анимации — свойство noiseVariation. Оно доступно у каждого созданного объекта шума и представляет собой массив чисел (по одному на каждое измерение). Эти числа влияют на то, как внутри каждой ячейки генерируется вариация паттерна.
В исходном коде значение `v` рассчитывается на основе времени, используя косинус. Это создает плавное циклическое изменение от 0 до 1.
const v = Math.cos(time / 1000) * 0.5 + 0.5;Затем это значение присваивается всем компонентам noiseVariation для каждого объекта. Для 2D шума нужен массив из двух значений, для 3D — из трех, и так далее.
this.noise2D.noiseVariation = [ v, v ];
this.noise3D.noiseVariation = [ v, v, v ];
this.noise4D.noiseVariation = [ v, v, v, v ];Изменение этого массива в update() заставляет текстуру каждого объекта плавно перестраиваться каждый кадр, создавая эффект пульсации или "дыхания" паттерна.
Различия между 2D, 3D и 4D шумом
Основное различие между объектами — в размерности пространства, в котором генерируется шум, и, как следствие, в визуальной сложности результата.
* **2D (noisecell2d)**: Работает в двух измерениях (X, Y). Создает классический ячеистый паттерн, похожий на плитку, кожу или пузыри. Изменение noiseVariation заставляет границы и внутреннюю текстуру ячеек плавно деформироваться.
* **3D (noisecell3d)**: Добавляет третье измерение. Можно представить, что мы смотрим на срез трехмерного поля ячеек. Анимация noiseVariation создает более сложные, объемные переходы, как если бы мы двигались сквозь это поле.
* **4D (noisecell4d)**: Работает в четырех измерениях. Визуализировать это сложно, но на практике получается невероятно богатый и сложный паттерн, изменения в котором выглядят максимально органичными и непредсказуемыми, идеально подходя для фантастических или абстрактных эффектов.
Чем выше размерность, тем больше вычислительная нагрузка, но и визуальный результат становится интереснее.
Практическое применение и настройка
Управление noiseVariation открывает много возможностей.
**Создание живого фона:** Используйте 2D или 3D шум как текстуру для спрайта, заполняющего весь экран. Плавное изменение noiseVariation создаст эффект мерцающего энергетического поля, текущей лавы или ряби на воде.
**Маски и области влияния:** Наложите объект шума с режимом blend mode на другие элементы. Анимированный шум может создавать эффект магического свечения, искажения пространства или постепенного проявления объекта.
**Эксперименты с параметрами:**
1. Измените функцию расчета `v. ПопробуйтеMath.sin(time / 500)для большей скорости илиMath.cos(time / 2000)` для медленных, эпичных изменений.
2. Используйте разные значения для каждого компонента массива. Например, [v, v*0.5, v*2] для 3D шума создаст асимметричную, более хаотичную анимацию.
3. Поиграйте с массивом noiseCells при создании. Меньшие значения (например, [3, 3]) дадут крупные, четкие ячейки. Большие значения ([15, 20]) создадут мелкую, почти зернистую текстуру.
// Пример: асимметричная вариация для 3D шума
this.noise3D.noiseVariation = [ v, v * 0.3, Math.sin(time / 800) * 0.5 + 0.5 ];Что попробовать дальше
Свойство noiseVariation в Phaser — это простой, но мощный рычаг для анимации сложных процедурных текстур Cellular Noise. Меняя его во времени, вы превращаете статичный паттерн в живой, дышащий визуальный элемент.
**Идеи для экспериментов:**
1. Свяжите значение `v` не со временем, а с расстоянием до курсора мыши, чтобы шум реагировал на взаимодействие игрока.
2. Используйте 4D шум в качестве карты высот для процедурного ландшафта (Plane геометрии) и анимируйте его, создавая "плавающий" или "перетекающий" рельеф.
3. Комбинируйте несколько слоев шума с разной скоростью анимации и режимами наложения (blendMode) для создания сверхсложных фоновых эффектов.