Как создать игру на Phaser 4 с помощью ИИ, если вы не фронтенд-разработчик

Привет, SE7EN!

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

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

Я работаю системным аналитиком в MWS и параллельно пишу бэкенд на Go (владение языком было моим навыком задолго до появления нейросетей 😊).

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

О проекте

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

Как создать игру на Phaser 4 с помощью ИИ, если вы не фронтенд-разработчик
Геймплей игры Not So Cute — сражение с полчищами зайцев на локации «Охотничья ферма»

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

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

Использованный стек

В процессе я комбинировал множество инструментов: от передовых моделей уровня Claude до более узкоспециализированных решений.

ИИ-помощники для написания кода

Задача

Основной инструмент

Резерв

Логика игры, сцены, управление

Codex (GPT-5.5)

Antigravity (Gemini 3.5 Flash)

Визуальные эффекты (VFX)

Codex (GPT-5.5)

Claude Code (Opus 4.6–4.7)

Звук (SFX)

DeepSeek-4V Pro

Codex (GPT-5.5)

Интерфейс (UI)

Codex (GPT-5.5)

Kimi-K2.6

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

Тип контента

Инструменты

Графика и анимация

Codex (GPT-Image 2) / Grok Imagine Video / Алиса AI

Звуковое оформление

ElevenLabs

Классическое ПО

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

  • Pixelorama — создание и выравнивание кадров анимации.

  • Tiled — проектирование уровней из тайлсетов.

  • Atlas Converter — утилита от Phaser-сообщества для превращения видео в атласы спрайтов.

Путь разработки

Этап 1: Прототипирование

Первая сборка была максимально простой: бесконечное поле, синий круг (персонаж) и хаотично движущиеся красные шары (враги). Управление через WASD + мышь. Несмотря на примитивизм, это позволило отладить механику стрельбы и подтвердить концепцию topdown-шутера.

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

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

Игровой процесс с лазерным оружием и волнами врагов
Скриншот геймплея: лазерное оружие против волн противников.

Этап 3: Боссы

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

Игровой уровень Аванпост с оружием и элементами механики нагрева
Уровень «Аванпост»: механика перегрева оружия добавляет тактики.

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

Я использовал ChatGPT Plus для генерации простых ассетов. Затем удалял фон через Chroma Key в Krita и анимировал спрайты в Pixelorama. Нейросети отлично «понимали» структуру моих спрайт-листов и подсказывали правильную реализацию в коде.

Тайлсет деревьев и пней, сгенерированный GPT Image 2 для использования в Tiled
Тайлсет окружения, созданный нейросетью.

Этап 5: Видеогенерация и масштабирование

Когда простых ассетов стало недостаточно, я перешел к генеративным видеомоделям. Оказалось, что для формата topdown Grok Imagine Video подходит лучше всего. Чтобы удобно работать с его API, я даже набросал простенький клиент на Electron.

Нюансы выбора видео-моделей

Удивительно, но «Алиса AI» отлично справлялась с оживлением статичных кадров, однако из-за строгой цензуры любые сцены боя блокировались. Grok оказался более гибким и не требовал «стерильности» в анимациях.

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

На финальном этапе Opus 4.7 (с его огромным контекстным окном) провел полный аудит кода. Он проанализировал проект, указал на «узкие места» и предложил план рефакторинга, который я успешно реализовал с помощью DeepSeek.

Спрайт анимации огненной атаки, 8 кадров, сгенерированный GPT Image 2
Анимация огненной атаки (8 кадров).

Выводы

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

Что дальше?

В планах — попробовать собрать проект на Unity, используя тот же подход. Если вам интересен этот путь, буду рад видеть вас в своем Telegram-канале «AI на коленке».


Спасибо за внимание! Готов ответить на ваши вопросы и обсудить детали в комментариях.

 

Источник

Читайте также