"Пишем" игрушку при помощи AI 🎮
По мотивам поста Саши Басова решил попробовать сделать прототип такой игрушки с использованием современных AI-инструментов.
Получилось вот что: https://clever.pro/driver/ (работает только на десктопе).
⚠️ Конечно, это далеко не готовая игрушка, код там так себе, да и тестировалась только в Chrome.
❗️Но! На этот прототип ушло примерно 2 часа, за которые я своими руками написал хорошо если несколько строк кода и пофиксил пару багов. Все остальное - результат общения с нейронкой Claude Sonnet 3.5 в IDE Cursor.
Игровой код не писал уж лет 7 (был как-то опыт с libGDX и Unity), так что на текущий момент я как собака: всё понимаю, сказать написать не могу :)
Как это было
1️⃣ Сформулировал начальную идею как "I have an idea of the browser game: car is riding on a highway against the traffic and need to avoid other cars. Scoring is based on how many cars you avoided"
Получил код с прямоугольниками на HTML Canvas, управление какое-то кривоватое, код страшный 😱 Но в целом работает, даже с первого раза :)
2️⃣ Всплыл в памяти Phaser для браузерных игрушек, попросил переписать на нем. Код стал чище и понятнее, и в довесок нейронка сгенерила SVGшки для игровых объектов, которые были прям в виде XML в строках в коде самой игры.
3️⃣ Но такие вот динамически создаваемые SVG почему-то не рендерились. Очевидное решение - вынести их в отдельные файлы, но это было бы слишком просто :)
Тут включился яжпрограммист и следующие 40 минут я пытался скормить Phaser'у динамически генерируемые SVG то data-URLами в base64/urlencode, то просто строками, то через предзагрузку, то на ходу.
Пока не нашел issue на GitHub, где создатели фреймворка явно говорили, что сценарий генерируемых динамически SVG - это фу и вообще не тру.
Ладно, я с вами не согласен, но уговорили, вынес в отдельные файлы.
4️⃣ Попросил нейронку добавить эффект "пьяного водителя" (с обязательным ворчанием насчет того, что это небезопасно и вообще не повторяйте дома): заторможенная реакция на события управления и периодический увод машины в сторону. Был еще эксперимент с добавлением инерции, но управление оказалось крайне неудобным.
5️⃣ Дальше пошли мелкие итерации с разными новыми фичами:
* добавить функционал рестарта (сначала - html-кнопкой, потом - по нажатию на пробел)
* добавить уровни с постепенным ускорением игры
* сделать машины разных размеров (с перегенерацией SVGшек, это тоже сама нейронка сделала)
* добавить поведение к едущим навстречу машинам, чтобы они тоже рулили
* сделать разное количество очков в зависимости от размеров машин на встречке
* добавить степень опьянения в виде прогресс-бара
* добавить сбор бутылок и кофе на трассе, которые влияют на степень опьянения
* убрать бутылки, т.к. не придумал, зачем бы их кто-то стал собирать, усложняя себе игру :)
* сделать так, чтобы степень опьянения сама постоянно росла
6️⃣ Попросил в конце причесать код.
7️⃣ Возникла проблема с кешированием файлов игры на хостинге, решили добавлением версии к путям css- и js-файлов.
—
Процесс был итеративным - т.е. добавил фичу, запустил, поиграл, попросил что-то поменять.
Иногда вылазили какие-то баги и почти все я "исправлял", копируя стек ошибки из консоли браузера в чат Cursor'а и он уже сам их фиксил или добавлял логгинг для расширенной диагностики в код.
Да, можно было бы это всё руками написать, но пришлось бы изучать Phaser, копаться в его доках и на StackOverflow, и цена как первого решения, так и последующих итераций возросла бы в разы.
А так, спустя несколько часов у меня было что-то более-менее работающее в плане механики и готовое к переносу на более серьёзные языки и фреймворки.
Для быстрой проверки идей игровых механик - отличный вариант, я считаю.
Если у вас нет программиста под рукой, то может не получиться пройти этот путь полностью (хотя мы к этому близко).
Но вот для самих программистов применение подобного подхода для прототипирования может как полностью избавить от проблемы "чистого листа", так и ускорить процесс проверки идей на ранних этапах разработки.
В общем, рекомендую :)
#ai #games #technical
По мотивам поста Саши Басова решил попробовать сделать прототип такой игрушки с использованием современных AI-инструментов.
Получилось вот что: https://clever.pro/driver/ (работает только на десктопе).
⚠️ Конечно, это далеко не готовая игрушка, код там так себе, да и тестировалась только в Chrome.
❗️Но! На этот прототип ушло примерно 2 часа, за которые я своими руками написал хорошо если несколько строк кода и пофиксил пару багов. Все остальное - результат общения с нейронкой Claude Sonnet 3.5 в IDE Cursor.
Игровой код не писал уж лет 7 (был как-то опыт с libGDX и Unity), так что на текущий момент я как собака: всё понимаю, сказать написать не могу :)
Как это было
1️⃣ Сформулировал начальную идею как "I have an idea of the browser game: car is riding on a highway against the traffic and need to avoid other cars. Scoring is based on how many cars you avoided"
Получил код с прямоугольниками на HTML Canvas, управление какое-то кривоватое, код страшный 😱 Но в целом работает, даже с первого раза :)
2️⃣ Всплыл в памяти Phaser для браузерных игрушек, попросил переписать на нем. Код стал чище и понятнее, и в довесок нейронка сгенерила SVGшки для игровых объектов, которые были прям в виде XML в строках в коде самой игры.
3️⃣ Но такие вот динамически создаваемые SVG почему-то не рендерились. Очевидное решение - вынести их в отдельные файлы, но это было бы слишком просто :)
Тут включился яжпрограммист и следующие 40 минут я пытался скормить Phaser'у динамически генерируемые SVG то data-URLами в base64/urlencode, то просто строками, то через предзагрузку, то на ходу.
Пока не нашел issue на GitHub, где создатели фреймворка явно говорили, что сценарий генерируемых динамически SVG - это фу и вообще не тру.
Ладно, я с вами не согласен, но уговорили, вынес в отдельные файлы.
4️⃣ Попросил нейронку добавить эффект "пьяного водителя" (с обязательным ворчанием насчет того, что это небезопасно и вообще не повторяйте дома): заторможенная реакция на события управления и периодический увод машины в сторону. Был еще эксперимент с добавлением инерции, но управление оказалось крайне неудобным.
5️⃣ Дальше пошли мелкие итерации с разными новыми фичами:
* добавить функционал рестарта (сначала - html-кнопкой, потом - по нажатию на пробел)
* добавить уровни с постепенным ускорением игры
* сделать машины разных размеров (с перегенерацией SVGшек, это тоже сама нейронка сделала)
* добавить поведение к едущим навстречу машинам, чтобы они тоже рулили
* сделать разное количество очков в зависимости от размеров машин на встречке
* добавить степень опьянения в виде прогресс-бара
* добавить сбор бутылок и кофе на трассе, которые влияют на степень опьянения
* убрать бутылки, т.к. не придумал, зачем бы их кто-то стал собирать, усложняя себе игру :)
* сделать так, чтобы степень опьянения сама постоянно росла
6️⃣ Попросил в конце причесать код.
7️⃣ Возникла проблема с кешированием файлов игры на хостинге, решили добавлением версии к путям css- и js-файлов.
—
Процесс был итеративным - т.е. добавил фичу, запустил, поиграл, попросил что-то поменять.
Иногда вылазили какие-то баги и почти все я "исправлял", копируя стек ошибки из консоли браузера в чат Cursor'а и он уже сам их фиксил или добавлял логгинг для расширенной диагностики в код.
Да, можно было бы это всё руками написать, но пришлось бы изучать Phaser, копаться в его доках и на StackOverflow, и цена как первого решения, так и последующих итераций возросла бы в разы.
А так, спустя несколько часов у меня было что-то более-менее работающее в плане механики и готовое к переносу на более серьёзные языки и фреймворки.
Для быстрой проверки идей игровых механик - отличный вариант, я считаю.
Если у вас нет программиста под рукой, то может не получиться пройти этот путь полностью (хотя мы к этому близко).
Но вот для самих программистов применение подобного подхода для прототипирования может как полностью избавить от проблемы "чистого листа", так и ускорить процесс проверки идей на ранних этапах разработки.
В общем, рекомендую :)
#ai #games #technical