Wave Function Collapse на JavaScript: процедурные карты уровней для игры
wavefunctioncollapse — npm-пакет для генерации уникальных тайловых карт по алгоритму Wave Function Collapse. Добавьте в JavaScript-проект и агент сможет строить бесконечные подземелья, городские кварталы или тайлящиеся текстуры из одного образца.
Тайловую игру через агента делать нормально — до момента когда нужны уровни. Просишь планировку подземелья, агент собирает что-то рабочее. Следующий запуск: то же расположение комнат, те же коридоры. Один раз заметил — обратно уже не откатишь.
Wave Function Collapse — алгоритм из академического проекта Максима Гумина, изначально написанный на C#, его давно портировали на всё что только можно. JavaScript-порт Кевина Шапелье лежит на npm несколько лет — тихий стабильный, MIT-лицензия. Я вернулся к нему недавно когда понадобились случайные карты для браузерной игрушки — работает отлично прямо из коробки.
Исходники
kchapelier/wavefunctioncollapse
★ 524JavaScript
Пакет даёт две модели. OverlappingModel изучает паттерны из образца: если в образце трава стоит рядом с водой рядом с грязью в определённом порядке, вывод будет с теми же стилевыми переходами, просто каждый раз иначе. SimpleTiledModel более явная — задаёшь тайлы и правила стыковок для каждого края, она строит карты где всё совпадает по ограничениям. Для подземелий и комнатных планировок чаще нужна именно SimpleTiledModel.
Как добавить в проект
Установка — одна команда. Дальше создаёшь ImageData через canvas, передаёшь в модель, вызываешь generate() — и вытаскиваешь пиксели обратно рисовать на canvas.
npm install wavefunctioncollapse --production
Как работает OverlappingModel
Даёшь ей небольшое изображение-образец — кусок тайл-листа или нарисованную карту. Модель сканирует каждый N×N-патч строит правила какой патч может стоять рядом с каким, а потом заполняет пустой canvas схлопывая возможности ячейку за ячейкой — чем-то похоже на Судоку если не вглядываться. Анимированное демо на сайте проекта показывает это в реальном времени — смотреть как оно заполняет карту реально завораживает.
SimpleTiledModel для карт подземелья
SimpleTiledModel принимает другой вход: JSON-объект с описанием тайлов и правилами стыковок. Определяешь какие края каждого тайла могут соединяться с краями других — и модель расставляет их так чтобы всё совпадало. Никаких дверей в середине стены, никаких оборванных коридоров. Ограничения задаёшь ты, алгоритм соблюдает.
Что сказать агенту
Самый простой путь — назвать пакет и описать нужную модель. Агент скорее всего знает WFC, так что wavefunctioncollapse на npm — достаточная отправная точка. Сначала открой одно из трёх интерактивных демо на сайте проекта и посмотри какой вывод вообще возможен, потом уже описывай агенту конкретику.
«Хочу процедурные уровни подземелья в JavaScript-игре. Используй npm-пакет wavefunctioncollapse. Загрузи мой образец планировки как ImageData из canvas, запусти OverlappingModel с N=3, вывод 48×48, periodicOutput false. При каждом новом запуске генерируй карту через Math.random и рисуй на canvas. Покажи код.» «Используй SimpleTiledModel из wavefunctioncollapse. Мои тайлы: пол, стена, дверь. Пол стыкуется с полом и дверью со всех сторон, стена только со стеной, дверь — с полом и стеной. Сгенерируй карту 20×15 тайлов и верни как двумерный массив с именами тайлов.»
npm-пакет который при каждом запуске генерирует уникальную тайловую карту — подземелья, городские кварталы, бесшовные текстуры — из одного образца. MIT-лицензия, работает в браузере, никакой сборки кроме npm install. Передай агенту имя пакета плюс образец или правила тайлов — и опиши нужный вывод. Сначала посмотри три живых демо на сайте проекта чтобы понять какой результат ожидать.
Источник: github.com
Бесплатный курс
Хватит читать про ИИ — начни строить с ним
Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.
Начать →
Автор
Евгений Арсентьев
PhD · CEO, digital health
Статьи · Свежие статьи