В середине 2025 года я взялся за идею — создать простую браузерную игру к конференции Selectel Tech Day в стиле Hotline Miami, однако опыта разработки игр на JS или Java у меня не было. Тогда я начал искать онлайн-инструменты, способные на основе описания генерировать игру с музыкой и анимациями.
На выбор было несколько кандидатов, которые высветились в поисковой строке. Sider AI оказался универсальным помощником в более простых повседневных задачах и не справился с запросом на создание игры, в Rosebud AI же, хоть он и выдал качественный результат, кредиты быстро закончились, а получить код можно было, лишь купив подписку.
В итоге отбор прошел Flowith — ИИ, способный генерировать веб-страницы игр, графические элементы, музыку и код по текстовому описанию. Я провел серию экспериментов: сначала формулировал общие игровые концепции, а затем уточнял каждый элемент.
Оговорюсь с небольшим повтором: я не разработчик игр и не frontend-инженер, а специалист по информационной безопасности. Этот текст — не руководство к тому, как делать коммерческие продукты через нейросети, а скорее рассказ про эксперимент и изучение современных AI-инструментов.
Идея была простой: попробовать собрать рабочий игровой прототип без глубоких знаний JavaScript и геймдева, параллельно разбираясь в теме через документацию, форумы и статьи. Для внутренних экспериментов, прототипирования или изучения механик такой подход может быть полезен. Но использовать подобную генерацию как замену полноценной разработке в продакшен-среде или коммерческом продукте я бы настоятельно не рекомендовал. Любой сгенерированный код, ассеты или логика требуют проверки, доработки и понимания того, что именно создала модель.
Как появился эксперимент с AI-генерацией игры
На одном из обсуждений активностей для Selectel Tech Day появилась идея реализовать интересную и в то же время простую игру, которая притягивала бы взгляды и завлекала посетителей. Было решено подготовить бродилку с упором на выполнение заданий.
Как я упомянул ранее, в качестве инструмента для AI-генерации выбрал Flowith и приступил к изучению его функциональности. На момент создания игры (в 2025 году) на главной странице был один вариант «коммуникации» с ИИ — классический чат, как у любого чат-бота. Я сразу попробовал задать тестовый промт:
«Тебе нужно создать игру в 2д с видом сверху, где главным героем выступает игрушечный тиранозавр <фото тиранозавра селектел>
Он ходит по комнате, которую тебе нужно создать — пример приведу, это коната из hotline miami — <фото базовой комнаты hotline>
в комнате стоят серверы, мониторы, компьютеры. когда динозавр подходит к ним (реализация движения через стрелочки и по нажатию мыши), можно запустить мини-игру:
взять идеи мини-игр, связанных с ИБ
– удалять спам письма — ваш компьютер заражен, нужно добраться до антивируса через тонну спама, который всплывает на вашем экране
– Коммутация — необходимо собрать оборудование по комнате, сделать мини-сервачок с МЭ и свичем.
Кодовая база — в приоритете JS или Java»
Как происходит процесс создания игр, где ты не пишешь код? Примерно так:
На скриншоте сверху вы можете видеть первый, начальный запрос с промтом — далее нейросеть разбирает запрос, описывает этапы создания игры и даже создает игровую документацию.
Общая концепция игры
Project Cyber-Rex — это 2D-игра с видом сверху (top-down), в которой игрок управляет игрушечным тираннозавром. Действие происходит в стилизованной под Hotline Miami комнате, наполненной компьютерной техникой. Основная цель — исследование окружения и взаимодействие с интерактивными объектами для запуска двух мини-игр.
- Жанр — аркада, обучающая игра.
- Вид — 2D, вид сверху.
- Платформа — веб-браузер (HTML5).
- Стилистика — пиксель-арт с яркой, неоновой цветовой палитрой.
Игровая механика
Управление реализовано вариативной системой для удобства игроков:
- Клавиатура (стрелки или W, A, S, D) — прямое управление движением персонажа, который движется с постоянной скоростью в выбранном направлении.
- Мышь (ЛКМ) — персонаж автоматически движется к точке, на которую кликнул игрок, обходя препятствия (реализуется через pathfinding*-алгоритм).
*Pathfinding — это процесс нахождения компьютерной программой кратчайшего и/или наиболее оптимального маршрута между двумя точками на графе или в пространстве с препятствиями. Используется в GPS и ИИ. Именно этот процесс дает преимущество боту, когда он быстро сближается с вами и вы не можете убежать, т. к. выбираете не лучший маршрут движения по тайлам.
В игре также есть коллизии (физическое взаимодействие объектов в игре, определяющее их столкновение друг с другом), чтобы динозавр не проходил сквозь предметы. Все крупные объекты в комнате (диваны, столы, серверные стойки) являются непроходимыми препятствиями. Также персонаж имеет физическую границу (collision box) вокруг своего спрайта.
При столкновении с границами объектов движение персонажа в этом направлении прекращается. Это создает необходимость маневрировать в ограниченном пространстве и добавляет интерес к игре. Взаимодействие с «интерактивными» объектами построено вокруг триггерных зон, входя в которые над объектом появляется иконка взаимодействия (кнопка «E»). Нажатие клавиши запускает соответствующую предмету мини-игру.
Описание мини-игр
Мини-игра 1. Охота на спам
Игра запускается, когда пользователь внутри игры подходит к монитору и нажимает кнопку взаимодействия. Здесь главная задача – пробиться через волны окон спама и запустить антивирус. Рассмотрим процесс игры.
После активации экран переключается в режим рабочего стола. Затем на экране начинают появляться всплывающие окна, с разной скоростью и в случайных местах. Используются ассеты spam_removal_game_pixel_art_assets. Игрок должен быстро нажимать на крестик ( X ) в заголовке каждого окна, чтобы закрыть его. Иконка антивируса (зеленый щит) изначально частично или полностью перекрыта окнами. Победа засчитывается, когда игрок успешно кликает по иконке антивируса.
Мини-игра 2. Сборка сервера
В этой игре нам нужно собрать недостающие комплектующие сервера и установить их в стойку, собрав тем самым сервер. Рассмотрим процесс игры.
Взаимодействие с пустой стойкой (server_rack_asset_pixel_art) инициирует квест. В случайных местах игровой комнаты появляются два компонента: межсетевой экран и свитч. Игрок должен исследовать комнату, найти компонент и подобрать его, нажав кнопку взаимодействия рядом с предметом. Подобранный компонент отображается в простом UI инвентаря.
Далее игрок возвращается к серверной стойке и снова взаимодействует с ней. Открывается интерфейс стойки, где нужно переместить компонент из инвентаря в соответствующий слот. Мини-игра считается пройденной, когда оба компонента установлены. Визуально стойка обновляется, показывая установленное оборудование.
Техническая спецификация
Игровой движок реализован на phaser — многофункциональной JS-библиотеке для создания 2D-игр. Она идеально подходит для данного проекта, потому что позволяет разделить основную игру и мини-игры на отдельные управляемые модули. Физический движок предоставляет готовые инструменты для реализации коллизий и движения, а также имеет встроенную поддержку клавиатуры и мыши.
Проект обладает модульной архитектурой на основе Phaser:
// Структура инициализации игры в Phaser
const config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
debug: false // Отладка коллизий
}
},
scene: [
PreloaderScene, // Сцена для загрузки ассетов
MainRoomScene, // Основная игровая сцена
SpamHuntScene // Сцена для мини-игры 1
]
};
const game = new Phaser.Game(config);
Описание модулей и сцен игры
Загрузка всех игровых ассетов (изображений, спрайтов, звуков) перед запуском игры происходит через PreloaderScene.js, который также показывает индикатор загрузки.
Основная игровая логика происходит через MainRoomScene.js. Все создание уровня от отрисовки комнаты до расстановки статичных объектов и интерактивных зон зависит от MainRoomScene. Инициализация игрока, обработка управления клавиатурой и мышью, а также настройка коллизии и спавн компонентов для игры «Сборка сервера» происходит через эту сцену, а при взаимодействии с монитором (соответственно, при переходе к игре «Охота на спам») переключается на сцену SpamHuntScene.
Сама сцена SpamHuntScene.js отвечает за логику мини-игры «Охота на спам»: создание UI игрового «рабочего стола», генерация и анимация всплывающих окон, обработка кликов мыши для закрытия окон и победы, после которой происходит возврат в MainRoomScene.
Класс Player.js отвечает за инкапсуляцию логики, связанной с персонажем — управление движениями и хранение состояния.
Модель сгенерировала базовую документацию проекта, после чего подготовила ассеты, музыкальные фрагменты и веб-демо с игровой логикой:
Графическая составляющая показалась мне качественной. Также отмечу неплохое звучание сгенерированной музыки (на 2025 год). Можно даже сказать, что трек немного «со смыслом». 🙂
При первых запросах модель выдала посредственный результат, не подходящий под требования к игре. В последующих запросах удалось выровнять уровень игры до альфа версии.
Первая версия игры выглядела следующим образом:
Актуальная версия игры — так:
К сожалению, нейросеть не сохранила ассеты для игры с 2025 года, поэтому вся ветка была в таком виде:
Как в старом добром меме. К слову, детально протестировать игру не вышло из-за той же проблемы.
Разбор Flowith: плюсы и минусы
В процессе работы с Flowith несомненно были просчеты с генерацией графики и пониманием задач. Например, модель так и не смогла внедрить в игру нормального анимированного динозавра, поэтому приходилось бегать сломанным квадратом из пикселей. Но то, что ИИ объединяет в себе весь функционал для создания игр — большой плюс. Да и в целом объединение нескольких AI-инструментов, таких как генератор изображений, музыки и всплывающих экранов выглядит перспективно.
Платформа использует современные генеративные модели — GPT-5, Nano Banana 2 и отдельные музыкальные модели. Для быстрого прототипирования результаты выглядят убедительно, хотя качество генерации все еще сильно зависит от постановки задачи и количества итераций. Интерфейс показался мне простым и интуитивно понятным. При этом ИИ старается быть удобным: в начале использования он рассказывает и показывает, что и как сделать, чтобы получить результат, а стартовое окно демонстрирует все преимущества сервиса, а с помощью статус-бара можно мониторить прогресс генерации.
С другой стороны, функционал чуть перегружен. Нужно постоянно находить и выбирать, какую модель использовать, хотя можно было чуть упростить этот процесс: например, в диалоге называешь модель и описываешь, что нужно сделать. Это бы сэкономило время и повысило удобство использования.
Отдельная боль — это тарифы. Flowith предлагает бесплатный режим, но, как это обычно бывает, с ограничением генераций. Чтобы активнее генерировать игры, видео или музыку, нужны кредиты(лимит ограничен) или улучшенный тарифный план. Бесплатно можно сделать всего несколько запросов, а после траты всех кредитов перед нами встает выбор — либо вручную доделывать игру, что времязатратно, либо искать альтернативные модели, поддерживающие импорт ассетов, кода и прочих элементов игры. Для прототипа хватило бесплатных кредитов одного аккаунта, но, если бы проект был крупнее, пришлось бы платить или кочевать.
Не радовала и стабильность генераций. Иногда нейросеть при генерации игры брала PNG-файл и просто вставляла его в игру. В итоге получается динозавр, окруженный пикселями. В одной из генераций появилась незапланированная коллизия, перекрывающая половину игрового поля. Приходилось тратить кредиты и направлять модель на нужную волну или заставлять устранить артефакты. Похожее случалось и с музыкой: возглас динозавра в первый раз был слишком нейронным и непонятным, и тогда я корректировал промт.
Изменения после возвращения в 2026
Более чем через полгода я снова заглянул на Flowith и заметил обновления. Релиз Canvas 3.0 внедрил ИИ-агенты в рабочее пространство, позволяя им взаимодействовать с контентом сразу. Добавили Canvas Cowork Skill — функцию совместной работы, которая позволяет оптимизировать подготовку проектов. Но заметил, что количество кнопок на экране возросло, интерфейс стал более нагруженным, что может оттолкнуть новых пользователей.
Добавили и новые модели — если сервис развивается, то логично, что он будет применять самые продвинутые решения, а с развитием инструментов можно делать и более продвинутые проекты. Также сталкивался с новостями, что обновили мобильное приложение, но пока оценить его не удалось.
Мой эксперимент с AI-генерацией игры на базе Flowith в итоге вылился в получение полезного опыта, но не более. Пока проект проект не завершен и отложен в долгий ящик, но Flowith продемонстрировал, что даже без глубоких знаний в программировании можно создать простую игру — синтезировать спрайты и коробку, написать куски кода логики и коллизии, добавить музыку и звуки.
Игра для Selectel Tech Day в итоге так не была запущена — от этой идеи решили отказаться в угоду мини-игры с hard-модом ввода пароля. Возможно, я вернусь к идее создать игру для будущих мероприятий. С новыми возможностями это было бы чуть проще, чем в прошлом году. Также в планах рассмотреть модели, отсеянные ранее — Sider AI или Rosebud AI.
Если говорить о вайбкодерских моделях в целом, то сейчас они не справляются даже с простой браузерной игрой — большую часть генераций нельзя отнести к качественной. Но если вы новичок в геймдеве и у вас есть только идея игры, ее можно отдать в нейросеть на этапе создания чернового прототипа. Так, к следующим этапам вы сможете приступить не с полного нуля, а уже имея понимание, от чего отталкиваться и что доделывать, сможете визуализировать общий вид игры, а также посмотрите на внутренние процессы.
В завершение статьи напомню о базовой истине: трезво оценивайте, что вам выдала модель, и не забывайте проверять и допиливать все, что она генерирует.
