Кубики и рогалики в средиземье: разработка игры на svelte с применением ChatGPT и stable diffusion

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!

Я решил попробовать использовать ChatGPT для создания игр и хотел выбрать что-то простое, что можно сделать за несколько вечеров. В итоге, в сотрудничестве с ChatGPT, мы пришли к идее пошагового рогалика, где основной механикой является бросок кубика. Финальный результат можно посмотреть здесь https://dicequest.vercel.app/

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

Разработка с использованием ChatGPT

Получить полный код игры сразу у ChatGPT не получится из-за ограничения на размер ответа. Поэтому я использовал следующие приемы:

  1. Попросить написать файловую структуру проекта, а затем запрашивать каждый компонент по отдельности.

  2. Попросить написать код, но закомментировать большие функции, которые уже были получены.

Я использовал версию ChatGPT 4, так как код от нее содержит меньше ошибок и лучше поддается корректировке.

После первой итерации я получил следующую разметку:

Первый вариант дизайна выглядел не очень впечатляюще, поэтому я запросил улучшения:

can you add appealing and amazing lord of the rings style to Player.svelte

Затем я попросил переделать компонент игрока так, чтобы он выглядел как игральная карта

Can you remake the player component to look like a playing card?

После нескольких итераций улучшения, я остановился на следующем варианте дизайна:

Логика битвы

Я запросил у ChatGPT логику битвы, и получил следующий результат:

https://svelte.dev/repl/3736b9c89ade4fac83f86c2456833ace?version=3.58.0

Концепция была понятна, но требовала доработки, чтобы всё работало без ошибок. Например, в коде менялись имена переменных (сначала было currentHealth, затем curHealth), что вызывало затруднения. Или добавлилсь вызовы функций, которых ранее не было. Тем не менее, это малая плата за значительный буст скорости разработки.

Анимации

Наша игра пока не выглядит впечатляюще, попробуем с помощью Chat GPT сгенерировать анимации.

Попросим СhatGPT сделать анимацию фаербола.

https://svelte.dev/repl/c9d511d269ac4f8293da5f77b28ecc2c?version=3.58.0

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

https://svelte.dev/repl/06094df1f63e4d0cbd9541dd8d04c2cc?version=3.58.0

Простенько, но со вкусом. А что будет, если попросить сделать анимацию на  tree.js?

Can you create enemy defeat animation with three.js?

Получился базовый пример из обычного туториала. Не сдаемся, пробуем уточнить запрос.

Can you create something like an explosion?

https://svelte.dev/repl/d8c851cff68a4b48a968ad403f5d3e3d?version=3.58.0

ВАУ! Это впечатляет! Кажется, святой грааль найден! Продолжаем, просим сделать анимацию атаки.

Awesome! Could you create an attack animation with three?

https://svelte.dev/repl/e176512e074f4a29a86e8fbcd3b9b2de?version=3.58.0

Весьма неплохо! Немного в измененном виде эта анимация вошла в итоговую версию игры. Как дела с нашим многострадальным фаерболом?

Could you change the fireball animation? It could be like burning ball, moving from left to right

https://svelte.dev/repl/6a8dfcf6731148ad9335c802cafd6d18?version=3.58.0

Неплохо, но вау эффекта не вызывает. Спустя несколько итераций я так и не добился хорошего результата и от фаербола отказался. Что насчет анимации лечения?

Could you create a healing animation with a tree?

Уточняю запрос

Сould you remake this animation, and make it more dynamic, maybe some particles?

https://svelte.dev/repl/ce59812d1d004fa29361de6b3b4ea977?version=3.58.0

Невероятно! Забираем в проект. Что насчет анимации удара мечом?

Can you generate attack animation? the animation may look like a trail from a swing of a sword

https://svelte.dev/repl/ae7fd57d9f2549089ab349aecca07fea?version=3.58.0

Забавно, но не более. Получить красивый вариант анимации мне так и не удалось, поэтому останавливаемся на анимации частиц из предыдущих этапов.

Из анимаций у нас остался бросок кубика. Посмотрим, насколько  ChatGPT хорош.

Can you make dice roll animation?

https://svelte.dev/repl/30497bcbbd9445989cbe2976059170b9?version=3.58.0

Хм, этот вариант на css анимациях, я попросил переделать на tree.js

Could it be in three.js?

Бум! То, что надо. Этот вариант я доработал вручную и использовал в игре.

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

Генерация арта

Для генерации арта я использовал сервис Stable Horde (https://stablehorde.net/), который представляет собой невероятную идею использования распределенных вычислений для генеративных сетей. Рекомендую ознакомиться с этим сервисом и попробовать его. В качестве пользовательского интерфейса я использовал ресурс Stable UI (https://aqualxx.github.io/stable-ui/).

Исследовав несколько популярных моделей, я выбрал комбинацию Deliberate с постобработкой GFPGAN для создания игрового арта. Я обратился к ChatGPT для генерации промптов, которые были использованы для создания аватаров врагов, вдохновленных вселенной Властелина Колец.

Попросим chatGPT сгенерировать промты

Could you generate 5 prompts to generate enemy avatars with help of stable diffusion?

Stable diffusion allows for the generation of images based on textual prompts. Here are five prompts to generate enemy avatars that are inspired by the Lord of the Rings theme:
1. A menacing Nazgûl wearing a dark hooded cloak and wielding a long, sinister sword
2. A hulking troll with rough, stone-like skin and large tusks, wielding a massive club
3. A cunning goblin with green, scaly skin, pointy ears, and sharp teeth, armed with a jagged dagger
4. A twisted orc with a muscular build, red eyes, and battle scars, holding a crude axe
5. A fearsome Uruk-hai with dark, thick skin, a prominent brow ridge, and carrying a large, spiked mace

Отлично, скармливаем Deliberate, завариваем чай и ждем результат.

A menacing Nazgûl wearing a dark hooded cloak and wielding a long, sinister sword
A fearsome Uruk-hai with dark, thick skin, a prominent brow ridge, and carrying a large, spiked mace

Не обошлось и без забавных казусов. Например, эльфийка, проткнутая стрелой.

mysterious elven archer with long, flowing hair, dressed in elegant green and gold garments, holding a longbow

Или кроссовер со вселенной DC

A formidable dark knight clad in sinister from lord of the rings, black armor adorned with spikes and skulls, wielding a terrifying, cursed sword

Для заднего фона я также сгенерировал промты в chatGPT, а картинку получил в Deliberate.

A dark, eerie swamp with stagnant waters, twisted trees, and hidden dangers lurking beneath the surface, creating an atmosphere of dread and uncertainty

Дополнительные функции

ChatGPT справляется легко с генерацией компонента open gprah разметки, и даже написания функции генерации картинок на node.js, которая подтягивается, когда пользователь шарит результат в мессенджерах.

Изображение для Open Graph
Изображение для Open Graph

ChatGPT с легкостью предлагает новые скилы и механики игры, поэтому с должной степенью усидчивости можно получить невероятную игру с крутыми механиками и анимациями.

Также я обратился к ChatGPT с просьбой предложить способы монетизации игры. Хотя полученный набор оказался стандартным, включая внутриигровые покупки, рекламу и платные функции, это может быть полезной отправной точкой для разработки стратегии монетизации. Я не внедрил эти функции в свою игру, но вот несколько забавных примеров рекламных блоков, основанных на промптах от ChatGPT:

Design your own Elven-inspired jewelry: Create breathtaking accessories inspired by the elegant craftsmanship of the Elves. From rings and necklaces to bracelets and tiaras, immerse yourself in the enchanting world of Middle-earth and discover the secrets of Elven artistry.
Middle-earth's finest pipe-weed: Discover the aromatic world of Middle-earth's most exquisite pipe-weed, grown in the fertile fields of the Shire. Experience the smooth and flavorful blends favored by Hobbits, Dwarves, and even Wizards.

Выводы

Используя ChatGPT и Stable Diffusion, за неделю работы по вечерам я смог создать забавный рогалик, который вы можете опробовать здесь: https://dicequest.vercel.app/

Исходный код тут: https://gitlab.com/az67128/dicequest

ChatGPT способен:

  1. Предлагать идеи.

  2. Генерировать строительные блоки вашего приложения.

  3. Значительно ускорять разработку.

  4. Предлагать тексты для игры, включая диалоги.

  5. Генерировать промты для арта.

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

Однако, ChatGPT пока не умеет:

  1. Собирать проект с нуля до результата, вам все равно понадобится ручная доработка.

  2. Полностью быть в контексте. Иногда часть предыдущей истории, как будто, забывается, и ChatGPT выдает не релевантный результат, как в коде, так и в тексте.

  3. Придумывать прорывные идеи. Знания ChatGPT базируются на существующем опыте, поэтому создать что-то совершенно новое и уникальное может быть сложно.

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

Источник: https://habr.com/ru/post/726462/


Интересные статьи

Интересные статьи

Мы в Selectel очень любим различные геймерские гаджеты — от игровых мощных ноутбуков до классических консолей. Кроме того, почти у каждого из нас есть если не PS Vita, то Nintendo Switch. Но есть и ...
Дальтонизм (недостаток цветового зрения) означает снижение способности видеть цвет или различия в цвете. Согласно данным сайта colourblindawarness.org, недостаток цветового зрения есть у 8% мужчин и 0...
Выгрузка пользователей из 1C ЗУП в Битрикс24 или правдивая история о том как настроить интеграцию 1С-Битрикс24 с ЗУП без 1С-ника.В жизни так бывает, причём бывает чаще чем хотелось бы, хоть в целом и ...
Всем привет! Я Михаил Кравченко, дизайнер игровых интерфейсов. Это статья о том как нарисовать пак иконок для игры. Ниже вы видите результат. Фиксируем требования к результату Вот к...