О чем этот пример
Создание процедурных текстур и фонов — ключевой навык для разработчика игр. Он позволяет генерировать уникальный визуальный контент без использования готовых изображений. В Phaser для этого есть мощный инструмент — объект Noise. Эта статья покажет, как всего один параметр `noisePower` кардинально меняет характер и детализацию шумовой текстуры, открывая возможности для создания эффектов дыма, облаков, статики или каменных поверхностей. Мы разберем практический пример, который демонстрирует четыре разных визуальных состояния шума на одном экране. Вы поймете логику работы метода `this.add.noise()` и научитесь контролировать «мощность» шума, чтобы точно вписать его в художественный замысел вашей игры.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create()
{
const { width, height } = this.scale;
this.add.noise({}, width * 1 / 8, height / 2, width / 4, height);
this.add.noise({ noisePower: 0.1 }, width * 3 / 8, height / 2, width / 4, height);
this.add.noise({ noisePower: 2 }, width * 5 / 8, height / 2, width / 4, height);
this.add.noise({ noisePower: 32 }, width * 7 / 8, height / 2, width / 4, height);
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 1280,
height: 720,
scene: Example
};
const game = new Phaser.Game(config);
Что такое объект Noise в Phaser?
Noise (шум) — это игровой объект, который представляет собой прямоугольную область, заполненную процедурно сгенерированной текстурой. В отличие от статичного изображения, его внешний вид определяется математическим алгоритмом и параметрами, которые вы задаете.
Основное предназначение — создание динамических фонов, спецэффектов или текстур для других объектов. Метод для его добавления вызывается непосредственно из фабрики игровых объектов сцены.
this.add.noise(config, x, y, width, height);Где config — объект с настройками шума, `xиy— координаты центра объекта, аwidthиheight` — его размеры.
Сердце примера: параметр noisePower
Ключевой параметр в конфигурационном объекте — noisePower. Он управляет степенью контрастности и детализации шума. По сути, это множитель, который усиливает или ослабляет разницу между соседними пикселями в сгенерированной текстуре.
* **Низкие значения (близкие к 0)**: создают плавный, размытый градиент с минимальным контрастом. Шум почти незаметен. * **Значение по умолчанию (1)**: дает классический, сбалансированный перлин-шум с естественными перепадами. * **Высокие значения (2, 4, 8...)**: резко увеличивают контраст. Текстура становится более «зернистой», «цифровой», с резкими переходами от темного к светлому.
В предоставленном примере мы видим наглядную демонстрацию этого параметра.
// 1. Шум с настройками по умолчанию (noisePower = 1)
this.add.noise({}, width * 1 / 8, height / 2, width / 4, height);
// 2. Слабый, почти размытый шум
this.add.noise({ noisePower: 0.1 }, width * 3 / 8, height / 2, width / 4, height);
// 3. Усиленный, контрастный шум
this.add.noise({ noisePower: 2 }, width * 5 / 8, height / 2, width / 4, height);
// 4. Максимально зернистый, «битый» шум
this.add.noise({ noisePower: 32 }, width * 7 / 8, height / 2, width / 4, height);Код размещает четыре прямоугольника одинакового размера (width / 4 на height) на одной горизонтальной линии, но с разным уровнем noisePower.
Как работает код построчно
Давайте детально пройдемся по исходному коду сцены, чтобы закрепить понимание.
Сначала в методе create() мы получаем ширину и высоту игрового холста через менеджер this.scale. Это нужно для позиционирования, не зависящего от конкретного разрешения.
const { width, height } = this.scale;Затем создаются четыре объекта Noise. Обратите внимание на формулу расчета координаты X для каждого: width * n / 8. Это делит ширину экрана на 8 равных отрезков и размещает центр каждого объекта в середине своего отрезка (1/8, 3/8, 5/8, 7/8). Координата Y у всех одинакова — height / 2 (центр экрана по вертикали).
// Первый объект. Пустой объект конфига {} означает настройки по умолчанию.
this.add.noise({}, width * 1 / 8, height / 2, width / 4, height);// Второй объект. noisePower: 0.1 дает очень мягкую, едва уловимую текстуру.
this.add.noise({ noisePower: 0.1 }, width * 3 / 8, height / 2, width / 4, height);// Третий объект. noisePower: 2 — четко выраженная, детализированная структура.
this.add.noise({ noisePower: 2 }, width * 5 / 8, height / 2, width / 4, height);// Четвертый объект. noisePower: 32 — экстремальная зернистость, похожая на телевизионную статику.
this.add.noise({ noisePower: 32 }, width * 7 / 8, height / 2, width / 4, height);Конфигурация игры и запуск
Код завершается стандартной для Phaser 3 конфигурацией игры. Важный нюанс — для корректной работы шума требуется контекст WebGL.
const config = {
type: Phaser.WEBGL, // Обязательно используем WEBGL, а не CANVAS
parent: 'phaser-example',
width: 1280,
height: 720,
scene: Example // Указываем нашу созданную сцену
};
const game = new Phaser.Game(config);Указание type: Phaser.WEBGL критически важно, потому что процедурная генерация шума эффективно работает на видеокарте. Рендеринг на Canvas (Phaser.CANVAS) может не поддерживать эту функцию или работать значительно медленнее.
Что попробовать дальше
Параметр noisePower — это простой, но невероятно мощный рычаг для управления визуальным характером шумовой текстуры в Phaser. От едва заметной дымки до агрессивной цифровой статики — все контролируется одним числом.
**Идеи для экспериментов:**
1. Анимируйте noisePower с помощью твинов, чтобы создать эффект нарастающей турбулентности, появления облака или помех на экране.
2. Комбинируйте несколько слоев шума с разным noisePower и цветами (используйте параметр color в конфиге) для создания сложных текстур вроде мрамора или лавы.
3. Используйте шум с низким noisePower в качестве динамической маски прозрачности для других объектов.
4. Привяжите изменение noisePower к игровым событиям, например, к получению урона (эффект «помутнения зрения»).