Загрузка 0
ПОДЕЛИТЬСЯ

Мой блог

Листай вниз

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта

Процесс переноса настольного проекта в браузер часто кажется быстрым делом, особенно на фоне новостей о прототипах, собранных нейросетями за пару дней. Однако реальная веб-версия карточной игры про IT требует гораздо больше времени на полировку механик и визуальную составляющую. В материале рассматривается опыт создания полноценного цифрового продукта, где разработка настольной игры на ИИ превращается в многомесячный процесс отладки взаимодействия карт, сетевой логики и пользовательского опыта.

Основная задача при цифровизации настолки «Release любой ценой» заключалась в сохранении тактильных ощущений от игры физическими картами. В проекте задействованы современные языковые модели, такие как Claude Opus и Astra, которые пишут код под контролем разработчиков. Несмотря на помощь технологий, путь от первой играбельной партии до стабильной беты занял несколько месяцев, в течение которых фокус сместился с простых механик на глубокую проработку нюансов интерфейса.

Анимация движения карты по кривой
Визуализация пути карты при добавлении в руку с использованием квадратичных кривых.
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 15
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 16
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 17
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 18
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 19
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта — изображение 20

Механика движения карт и визуальный отклик

Основой визуального стиля стало стремление избежать «телепортаций» объектов на экране. Любое перемещение карты — из колоды в руку, из руки на стол или в сброс — реализовано через плавные переходы с изменением поворота и размера. Это позволяет игрокам интуитивно понимать происходящее на столе, не перечитывая логи событий. Некоторые элементы, такие как стрелка прицела и пульсирующий путь карты, были заимствованы из популярных компьютерных ККИ.

Реклама
Механика атаки в настольной игре
Демонстрация атаки на AI-релиз соперника.

Адаптация физического опыта для браузера

При поиске инструментов выяснилось, что готовых библиотек для создания специфического движения карт в браузере не существует. В итоге карты были собраны через верстку, а пути их перемещения закладывались вручную через промежуточные состояния. Для этого был создан специальный словарь анимаций, состоящий из десятков модулей. Чтобы розыгрыши не выглядели монотонно, карты ложатся на стол под небольшими случайными углами, имитируя небрежность живой игры.

Особое внимание автор первоисточника уделил входу карты в «веер» руки. Вместо прямой вставки была разработана сложная траектория: карта залетает сбоку по дуге, находясь над веером первые 140 миллисекунд, а затем «подныривает» под соседние карты, занимая свой слой. Геометрия этого пути рассчитывается функцией, основанной на квадратичных кривых Безье. Угол подъема карты ограничен 40 градусами, а для крайних позиций предусмотрены исключения в расчетах, чтобы анимация выглядела естественно.

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта

Синхронизация состояния стола

Картина стола в браузерах всех участников формируется на основе проекции состояния партии, которую рассылает хост. На каждое действие игрока движок генерирует пачку событий. Планировщик доски считывает их и поочередно запускает такты анимаций. Важно, что события приходят в браузеры в отфильтрованном виде: игроки не видят названий карт, которые берет соперник, пока они не будут разыграны.

Проблемы состояния и непредвиденные ситуации

Перенос сцен из тестовой среды на общую доску выявил нехватку данных о состоянии стола. Например, в ранних версиях центр стола не считался отдельным местом с отслеживаемым состоянием. Это приводило к тому, что выложенная игроком карта не отображалась у соперников или «двоилась» при попытке подтвердить действие. Для исправления ситуации в движок добавили отслеживание карт, находящихся в процессе розыгрыша. Теперь выкладка и возврат карты являются полноценными действиями движка, что гарантирует идентичность картинки у всех участников процесса.

Реестр расхождений в анимациях
Реестр состояний анимации для контроля корректности движений.

Также в процессе отладки пришлось дорабатывать логику кучи сброса. При изменении порядка или поворотов карт сброс мог пересобираться резкими скачками. Решением стала тонкая настройка слоев и позиций, чтобы карты перемещались в стопку последовательно, сохраняя визуальный порядок.

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта: Cherry-pick с Sudo на стенде
Cherry-pick с Sudo на стенде

Рабочий процесс и роль ИИ-инструментов

В проекте используется монорепозиторий, где один специалист отвечает за движок и сеть, а другой — за интерфейс и правила. Основной объем кода генерируют ИИ-модели. Разработка ведется итерациями: формулируется продуктовая задача, модель предлагает решение, которое затем проверяется через визуальный интерфейс.

Панель состояния хода в игре
Панель, отображающая текущую игровую ситуацию и доступные действия.

Визуальная отладка и стенд

Для поиска дефектов используется специальный стенд — страница фронтенда, позволяющая запускать конкретные игровые сценарии из пресетов. Это позволяет гонять одну и ту же анимацию бесконечное количество раз до достижения нужного результата. Чтобы модель «видела» ошибки интерфейса, разработчик записывает анимации в текстовый лог. Нейросеть анализирует последовательность кадров, состояний и слоев, выявляя нарушения — например, когда карта на мгновение исчезает или дублируется.

Реклама

Борьба за чистоту кода модулей

Одной из сложностей в работе с ИИ стала склонность моделей предлагать «заплатки» внутри конкретных сцен вместо правки общих модулей анимации. Если не контролировать этот процесс, игра перестает использовать единый словарь движений, что ведет к рассинхрону визуального стиля. Автору материала приходится постоянно следить за тем, чтобы правки вносились в базовые компоненты, что со временем позволило чинить сразу несколько похожих сценариев одним изменением в модуле.

Срабатывание AI-карты при доборе
Карта Hallucination обрывает ход и возвращается в колоду.

Логика прерываний и сетевое взаимодействие

Игра построена на системе прерываний: после розыгрыша релиза открывается «окно атаки», когда соперники могут вбросить карты багов. В живой игре такие моменты решаются очередностью общения, но в коде потребовалось четко определить, кто может действовать и в течение какого времени. Все вычисления происходят на стороне хоста, чтобы исключить манипуляции со временем или действиями из браузера гостя.

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта: Перезагрузка вкладки посреди партии и возврат за стол
Перезагрузка вкладки посреди партии и возврат за стол

Для динамики в онлайн-партии были введены таймеры:

Вид стола для игрока и зрителя
Сравнение интерфейса с точки зрения активного игрока и зрителя.
  • На совершение хода дается 30 секунд (каждое действие сбрасывает отсчет).
  • Первая возможность атаки релиза ограничена 15 секундами, последующие — 10 секундами.
  • На защиту от атаки или выбор карты из сброса отводится 15-30 секунд.

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

Мини-игра Bug Runner в лобби
Пиксельный раннер Bug Runner, встроенный в интерфейс комнаты.

Колода событий и AI-карты

Особую сложность в реализации представила колода событий. Карта AI при доборе разыгрывается немедленно, прерывая основной ход. Она тянет случайное событие, которое может заставить сбросить карты или вовсе завершить ход (эффект «Галлюцинация»). В движке это реализовано как последовательность шагов, где перед каждым снятием карты проверяется статус партии и наличие активных триггеров.

Готовность продукта и социальные функции

На текущем этапе игра считается стабильной, так как движок корректно контролирует соблюдение правил: невозможные действия заблокированы, а доступные цели подсвечиваются. Реализована система автоматического переподключения — при обрыве связи токен возобновления позволяет вернуться в партию в течение 12 часов.

Экран достижений в конце партии
Система подсчета достижений на основе истории ходов.

Для создания полноценной игровой атмосферы были добавлены:

Разработка настольной игры на ИИ: как создается веб-версия карточного проекта: Два режима, добавленные в процессе работы над игрой
Два режима, добавленные в процессе работы над игрой
Разработка настольной игры на ИИ: как создается веб-версия карточного проекта: А с роликами за выходные я сравнивал не то. По ним видно, что модель умеет сегодня и что собранная за
  • Режим зрителя: те, кому не хватило места за столом, видят открытую часть игры без доступа к картам в руках игроков.
  • Лобби и чат: текстовая и голосовая связь работают напрямую между участниками через хоста.
  • Мини-игра: в ожидании сбора всех игроков в шапке доступен пиксельный раннер Bug Runner, где нужно перепрыгивать хотфиксы и собирать серверы.
  • Боты: ИИ-противники, которые выбирают цели по приоритетам (релизы важнее мониторингов) и действуют максимально агрессивно.

Тестирование цифровой версии неожиданно повлияло на оригинальную настольную игру. Статистика партий показала, что добор по одной карте из нескольких колод на старте делает процесс динамичнее. Эти изменения уже внесены в обновленную редакцию бумажных правил.

Реклама
01.