Как я, не будучи фронтендером, сделал игру на Phaser 4 с помощью нейросетей

Привет, Хабр!

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

В статье особое внимание я уделю инструментам и подходам — возможно, кому-то это поможет повторить подобный путь.

Пара слов о себе

Основная моя деятельность — это системный анализ в MWS, также по совместительству я занимаюсь backend-разработкой на Go (и нет, это не потому что появились нейронки — я умею писать на Go и без них 😊).

С появлением нейросетей, я думаю, для многих был сломан барьер: то, что мы раньше не могли сделать, потому что не могли красиво что-то сверстать или не умели рисовать, теперь становится достаточно простой операцией. Можно практически всё сделать с помощью нейросетей — и я решил проверить это на практике.

О самой игре

Игра называется Not So Cute (Не такие уж и милые). Идея возникла из классического прикола в стиле: «Сделай мне Dark Souls, только с котиками». Только у меня получились не котики, а зайцы. И не Dark Souls, а topdown-шутер в стиле Crimsonland.

Более подробно с игрой можно ознакомиться на превью-страничке или даже поиграть в неё на платформе Playgama.

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

Инструменты, которые использовались

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

ИИ-ассистенты для кода

ИИ-инструменты для медиа

Не-ИИ инструменты для медиа

• Krita — для удаления фона и обработки спрайтов

• Pixelorama — для создания анимированных спрайтов и выравнивания кадров

• Tiled — для создания уровней из тайлсетов

• Atlas Converter — небольшой инструмент из Ru-сообщества Phaser для конвертации видео в атлас спрайтов

Процесс разработки

Этап 1: Прототип

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

Нужно было управлять WASD и мышкой, стрелять в шарики-врагов и набирать нужное количество очков. Примитивно — но это заложило основу и подало идею о topdown-шутере. На том этапе я даже не планировал делать что-то сложное и прорабатывать сюжет.

Этап 2: Первый уровень и тайлсеты

К прототипу я начал добавлять улучшения: враги стали стрелять, пытаться нападать на игрока, появились новые орудия с разными механиками. И тут пришло осознание, что одним глухим полем тут не обойтись — нужно идти дальше.

Я подключил Tiled и начал рисовать уровень, используя тайлсеты. Для формирования самих тайлов использовал GPT Image 2 — она отлично отрисовала кучу разных вариантов. После небольшой обработки через Pixelorama тайлы легко использовались в Tiled.

Таким образом, по результату второй стадии у меня появился первый уровень. Он, кстати, не слишком сильно отличается от финальной версии игры.

Этап 3: Боссы и испытания

Затем я задумался: уровень нужно чем-то завершать, а не просто куда-то дойти и стать молодцом. Нужно было испытание, которое даст игроку почувствовать силу. Так в конце уровня появились боссы.

Этап 4: Графика и анимации

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

Для экономии для простых действий, с которыми вполне неплохо справлялся GPT Image 2, я использовал простой чат в ChatGPT с подпиской Plus. Затем с помощью Krita удалял фон по хромакею, через Pixelorama создавал выровненный спрайт-анимацию. После вставки готового спрайта в проект модель (GPT или Opus) без проблем могла посмотреть этот спрайт и понять, как он должен проигрываться.

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

Этап 5: Последующие уровни и генеративное видео

Следующие уровни шли по аналогичному флоу. Но в какой-то момент я начал упираться в возможности GPT Image 2 для создания спрайтов — иногда требовалась более сложная анимация, от которой модель терялась и рисовала что-то не то.

Для сложной анимации я начал использовать генеративные модели видео. Перепробовал множество вариантов, но topdown-формат далеко не всем заходил. Например, Veo 3 вообще не хотела делать строгий topdown — от референса она сразу переходила в какой-то 3D-подобный вид.

Особенности разных видео-моделей

На моё удивление, очень неплохо с моими задачами справлялась Алиса AI от Яндекса — оживления получались очень годными. Но у неё есть серьёзный минус: цензура. С помощью Алисы получалось сделать только крайне нейтральные анимации, а как только требовался спрайт с ударами, укусами, смертями — Алиса ссылалась на политику и слала меня далеко.

Тут на смену пришёл Grok Imagine Video — модель Маска славится слабой цензурой, и её видеогенератор очень неплохо показал себя в topdown.

Grok Imagine Video я использовал через API в OpenRouter. Когда я искал, как его использовать, почему-то не нашёл никакого интерактивного инструмента для удобной генерации через API. Оставался вариант только подключать его к агенту. Тогда я параллельно разработке игры на коленке собрал небольшой OpenRouter-клиент на Electron, через который можно удобно взаимодействовать с генеративными моделями изображений и видео.

Этап 6: Оптимизация

Спрайты из видео получились просто огромными. И на моё удивление, Codex и даже Kimi очень неплохо справились с оптимизацией — они смогли без проблем порезать атлас спрайтов до оптимального размера, не сломав сам спрайт.

Когда игра была полностью готова, я решил провести финальную оптимизацию. Тут естественно в бой вступает матёрый Opus 4.7 с 1М контекста, который смог без проблем прочитать весь огромный код проекта (который собирался в стиле «дабы работало») и составил подробный отчёт с шагами для оптимизации. Далее более простые модели (в частности, DeepSeek) согласно инструкции от Claude без проблем привели игру в порядок.

Итоги

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

Что дальше?

Теперь я хочу попробовать аналогичным образом на коленке собрать продолжение игры, но уже на Unity — и посмотреть, что получится.

Если интересно, как дальше мои дела пойдут в геймдеве, а также если вам интересны другие кейсы об использовании нейросетей в работе и быту — буду рад, если подпишетесь на мой Telegram-канал AI на коленке.

---

Спасибо за внимание! Буду рад вопросам и обсуждению в комментариях.