Как сделать игру с помощью ИИ: от Phaser до Godot

Проще всего сделать игру с помощью ИИ так: пусть кодинг-агент напишет небольшую браузерную игру на HTML canvas или Phaser, проверяйте каждое изменение в браузере сразу и настраивайте «ощущение» сами, потому что именно его агент оценить не может. Для более крупных 2D- и 3D-проектов хороший следующий шаг — Godot. Когда игра готова, её можно выложить на itch.io и поделиться ею за несколько минут.

В этой статье первая игра проходит путь от пустой папки до опубликованной страницы: какой инструмент я выбираю и почему, первый промпт для агента, игровой цикл, графика и звук (включая лицензии), настройка game feel, плейтест и itch.io.

Почему игры так подходят для вайб-кодинга

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

Есть, однако, ловушка. «Запускается» и «интересно играть» — очень далёкие вещи. Агент может проверить, работает ли код, но не может проверить, интересна ли игра. Эта часть остаётся за вами.

Какой инструмент: canvas, Phaser, Godot или Unity

Для первой игры я рекомендую Phaser. Обычный canvas тоже подойдёт, но заставлять агента писать с нуля коллизии, анимацию спрайтов и обработку ввода долго; Phaser даёт всё это готовым. К тому же всё — текстовые файлы, работающие в браузере, так что нет редактора, которого агент не видит.

Переходите на Godot, когда игра растёт: много сцен, сложный дизайн уровней, 3D или десктопная сборка. Файлы сцен Godot (.tscn) и ресурсов (.tres) — читаемый текст, поэтому агент может их править. И всё же сцены я собираю в редакторе сам, а GDScript оставляю агенту; небольшая ошибка в сцене, отредактированной вручную, может помешать редактору её открыть.

Unity мощная, но вести её через агента неудобнее всего. C#-скрипты агент пишет без проблем; сцены, префабы и настройки инспектора живут в редакторе. Если вы уже знаете Unity, используйте её; для первой игры я бы её не выбирал.

Шаг 1: Подготовка

Что понадобится:

• Node.js и менеджер пакетов
• Кодинг-агент: Claude Code, Codex, Gemini CLI, opencode или похожий
• Git, чтобы всегда можно было вернуться к «вчера же работало»

Создайте проект на Vite и добавьте Phaser:

npm create vite@latest cactus-run -- --template vanilla-ts
cd cactus-run
npm install
npm install phaser
git init && git add -A && git commit -m "initial scaffold"
npm run dev

npm run dev выводит локальный адрес; откройте его, чтобы увидеть игру, и страница перезагружается по мере того, как агент правит файлы.

Шаг 2: Первый промпт

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

This is a Vite + TypeScript project with Phaser installed. We're
building a simple endless runner.

Game:
- The player runs left to right and jumps with space or a tap.
- Cacti come in from the right; touching one ends the game.
- Score increases over time and shows in the top right.
- On game over, show "Press space to restart".

Rules:
- Use coloured rectangles instead of art for now.
- Put every tunable number (gravity, jump velocity, game speed,
  cactus spacing) in a single object in src/config.ts.
- Use Arcade physics.
- The game is 800x400 and scales to fit the screen.
- npx tsc --noEmit must pass.
- When done, explain the file structure and the values in config.ts.

Самое ценное правило здесь — config.ts. Вы будете настраивать ощущение, играя с числами в этом файле; если они разбросаны по коду, каждая правка означает поход к агенту.

Правило «прямоугольники вместо графики» тоже важно. Сначала доведите геймплей, потом украшайте. Красивый прототип, в который неинтересно играть, — худший исход.

Шаг 3: Разберитесь с игровым циклом

В основе любой игры лежит цикл: прочитать ввод, обновить мир, нарисовать экран, повторить — десятки раз в секунду. Phaser запускает его за вас и вызывает update(time, delta) вашей сцены в каждом кадре. На чистом canvas вы пишете его сами:

let last = performance.now()

function loop(now) {
  const dt = (now - last) / 1000 // seconds since the last frame
  last = now
  update(dt)
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

Нужно знать одно понятие — dt: двигайте объекты по прошедшему времени, а не по кадрам. Агенты иногда пишут x += 5, и тогда на экране с высокой частотой обновления игра идёт быстрее. Если в коде движения нет dt, спросите об этом агента.

Шаг 4: Играйте, дорабатывайте, коммитьте

Цикл работы:

1. Поиграйте минуту.
2. Опишите, что почувствовали, конкретно: «Прыжок слишком долго висит в воздухе; кактусы обходить слишком легко».
3. Пусть агент это изменит, затем сыграйте снова.
4. Коммитьте каждую версию, которая ощущается хорошо.

Ошибки из консоли браузера (F12) вставляйте агенту дословно. При визуальных проблемах отправляйте скриншот.

Одно предупреждение: не наращивайте логику игры одним большим запросом. «Добавь бонусы, битву с боссом и систему уровней» запутает все три вещи между собой. Одна механика за раз.

Шаг 5: Game feel

Хорошее ощущение от игры обычно создают не крупные функции, а мелкие детали. Сами агенты их не добавят, но по просьбе реализуют хорошо:

• Coyote time: разрешить прыжок на короткое время после схода с уступа.
• Jump buffering: запомнить прыжок, нажатый чуть раньше приземления.
• Переменная высота прыжка: уменьшать скорость вверх, когда кнопку отпустили.
• Тряска экрана и hit stop: замирание на несколько кадров при ударе.
• Tweens: «выскакивающий» счёт, враг, который покачивается, исчезая.
• Звук: короткий звук прыжка меняет ощущение сильнее всего, что происходит на экране.

Вот такой промпт я использую:

Improve the jump feel:
- Add 100 ms of coyote time and a 100 ms jump buffer.
- If space is released early, halve the upward velocity.
- On collision, add an 80 ms hit stop and a light screen shake.
Put all durations in config.ts. Don't change any other behaviour.

Затем сами подбирайте числа в config.ts. Эту часть нельзя поручить ИИ: разницу в несколько миллисекунд чувствуешь только за игрой.

Шаг 6: Графика, звук и лицензии

Когда геймплей хорош, замените прямоугольники настоящей графикой. Единственное, на что стоит обращать внимание, — лицензирование.

Готовые наборы:

• Многие наборы из таких источников, как Kenney, имеют лицензию CC0 и могут использоваться даже без указания авторства.
• На OpenGameArt у каждого файла своя лицензия (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY требует указания авторства; CC‑BY‑SA может потребовать распространять производные работы на той же лицензии. Читайте лицензию каждого файла.
• Платные и бесплатные наборы ассетов на itch.io поставляются со своими лицензиями; проверяйте, разрешено ли коммерческое использование.

Ведите CREDITS.md или экран титров в игре со списком источника и лицензии каждого ассета.

Графика, созданная ИИ, быстрая и соблазнительная, но есть оговорки:

• Статус авторских прав на контент, созданный ИИ, различается по странам, а некоторые вопросы остаются нерешёнными.
• У каждого инструмента для изображений свои условия использования; проверяйте коммерческое применение.
• Некоторые игровые магазины просят указывать контент, созданный ИИ.
• Есть и технические сложности: единство стиля, раскладка спрайт-листа и согласованные кадры анимации часто требуют ручной доработки.

Мой подход: для прототипа — наборы с открытой лицензией, для релиза — графика, которую я сделал сам или чью лицензию точно знаю.

С ассетами агент хорошо справляется с такими вещами: загрузить спрайт-лист в Phaser, описать анимации, подключить звуковые файлы. Дайте ему имена файлов и размер кадра, а не заставляйте угадывать.

Шаг 7: Плейтест

Тот, кто сделал игру, — худший её тестировщик: он уже знает, что делать. То же относится и к агенту. Что делать:

• Дайте игру кому-нибудь и ничего не объясняйте. Молча наблюдайте, где человек застревает.
• Делайте заметки: где погиб, где заскучал, что понял не так.
• Превращайте заметки в задачи для агента: «Игроки всегда врезаются в первый кактус; убрать кактусы первые 5 секунд».

Небольшие фрагменты игровой логики (подсчёт очков, правила коллизий) можно проверять юнит-тестами; попросите агента их написать. Ощущения можно проверить только игрой.

Шаг 8: Публикация на itch.io

Выложить браузерную игру на itch.io можно за несколько минут:

npm run build
cd dist && zip -r ../cactus-run.zip . && cd ..

Затем создайте на itch.io новый проект, выберите тип HTML, загрузите zip и отметьте игру как играбельную в браузере. Задайте размер области просмотра (например, 800×400) и кнопку полноэкранного режима. В корне zip должен лежать index.html; с Vite для относительных путей может понадобиться base: './' в vite.config.ts, и агент может это проверить.

В Godot установите шаблон экспорта Web, экспортируйте в HTML5 и загрузите так же. Если вы часто обновляете игру, консольный инструмент itch.io butler автоматизирует загрузку.

В чём агенты чаще всего ошибаются в играх

• Они не видят игру. Агент пишет код, но не знает, что на экране. Скриншоты или описание того, что вы видите, необходимы.
• Магические числа. Значения разбросаны по коду. Повторяйте правило про config.ts при каждой новой механике.
• Движение, зависящее от кадров. Без dt игра идёт с разной скоростью на разных экранах.
• Устаревшие API. В Phaser и Godot API менялись между мажорными версиями, и агент может написать код под старую. Назовите версию: «Мы на Godot 4, не пиши синтаксис Godot 3».
• Всё в одном файле. По мере роста игры просите разнести сцены, сущности и настройки по отдельным файлам.
• Игнорирование производительности. При сотнях пуль или врагов игра тормозит. Просите пул объектов (object pooling).

Безопасность

Игра выглядит безобидно, но правила те же:

• Если вы добавляете таблицу рекордов или бэкенд для мультиплеера, храните ключи в .env и добавьте .env в .gitignore.
• Всё, что есть в браузерной игре, игрок может прочитать; секретные ключи никогда не кладите в клиентский код.
• Не вставляйте API-ключи в чат; скажите агенту, какую переменную окружения читать.
• Читайте команды, которые запускает агент, прежде чем их подтверждать, особенно установку пакетов и удаление.
• Не доверяйте очкам, присланным клиентом; обмануть онлайн-таблицу рекордов легко.

Как это делается в AgentVera

Всё это работает с терминалом и браузером. В игровых проектах я люблю запускать несколько агентов рядом и видеть результат в том же окне, поэтому пользуюсь AgentVera:

• Отдельные эксперименты в отдельных worktree. Один агент настраивает ощущение прыжка в одном git worktree, другой в это время добавляет нового врага во втором; ненужный эксперимент можно выбросить. Панель Git показывает ветки.
• Браузер агента. С браузером агента агент может открыть игру через Playwright и делать скриншоты, пока вы наблюдаете за вкладкой вживую. Это отчасти решает проблему «агент не видит игру»; ощущения она не решает.
• Терминал и редактор. npm run dev остаётся открытым в одной панели, а config.ts вы правите сами в редакторе.
• Ревью и токены. Ревью кода проверяет каждый ход до слияния, а расход токенов виден по каждой панели.

AgentVera — не игровой движок; он не заменяет редактор Godot или itch.io.

Короткий чек-лист

• Первая игра маленькая: одна механика, один экран
• Настраиваемые числа лежат в config.ts
• Движение использует dt
• Сначала геймплей на прямоугольниках, потом графика
• Источник и лицензия каждого ассета записаны
• Как минимум один человек поиграл без объяснений
• В zip для itch.io index.html лежит в корне

Итоги

Делать игру с помощью ИИ — одно из самых приятных применений вайб-кодинга. Начните с малого: Phaser в браузере, числа в одном файле, геймплей на прямоугольниках, ощущение настраивайте собственными руками и следите за лицензиями. Код пишет агент; интересной игру делаете вы. О запуске экспериментов с несколькими агентами читайте в статье о параллельных кодинг-агентах, а о выборе инструмента — в обзоре лучших ИИ-инструментов для кодинга в CLI.