Як я за один день написав Unity-подібний редактор для HTML5-ігор за допомогою AI

Всім привіт! Мене звати Андрій і моя кар’єра в IT почалась у далекому 2008 році. Спочатку я займався веб-розробкою — корпоративні сайти, інтернет-магазини, сайти-візитки. Це був цікавий досвід роботи у вебстудії.

Якось в один момент я натрапив на статтю як створюють ігри і заробляють на цьому. Подумав — чим я гірший? І вирішив спробувати себе в цьому напрямку. Тим більше що це виглядало цікавіше. Шлях свій почав з Unity, в той час ще там була підтримка JavaScript — те з чим у мене був досвід.

Потім так склалось, що перейшов на технологію Flash і з часом на Pixi.js. Що мене дивувало — це те що немає візуального редактора для сцен в Pixi.js. І відтоді періодично думав над тим, щоб створити свій редактор.

Один час навіть почав його створювати — але це виглядало дуже об’ємною задачею. З появою AI вирішив спробувати реалізувати цю ідею. Скажу чесно — очікування були набагато меншими, тому і вирішив цим поділитись.

Почав я з обговорення ідеї з ChatGPT (Plus підписка), потім попросив його зробити промт для Cursor, вибрав High Fast в налаштуваннях агента і почав генерацію. Назву обрав доволі очевидну — HTML5 Game Editor

Отримавши перший результат я був м’яко кажучи вражений — все виглядало справді дуже пристойно.

Реалізація ідеї мене затягнула і буквально за день роботи з Cursor вже була версія, якою плюс-мінус можна користуватись для нескладних задач. В першій ітерації вже була можливість створювати сцени та ноди типу Sprite і Text.

Наступного дня ліміти підписки Cursor Pro закінчилися, тому придбав наступну — Pro+. Також з чатом порадився і вимкнув Fast у налаштуваннях щоб використовувалось менше токенів.

Одним із важливих моментів вважаю було що якраз за день до початку роботи вийшла нова модель Grok 4.6 завдяки якій і вдалося усе це реалізувати відносно недорого.

І так приблизно тиждень додавав в редактор новий функціонал і демки

Ось скрін скільки на даний момент витрачено токенів (100М токенів було використано ще до початку роботи над редактором)

Ось приклад використання токенів після тижня роботи на проєктом

Ідея була зробити редактор в браузері — бекенд на Node.js для взаємодії з файловою системою. Комунікація відбувається через звичайний HTTP.

Як можлива перевага такого підходу на майбутнє — це командна робота, коли дизайнери, інтегратори додають ігрові асети в той час як розробники паралельно працюють над кодом.

Сам редактор використовує React і dockview. Також є підтримка гібридних сцен де 2D-об’єкти з Pixi.js працюють паралельно з 3D-об’єктами Three.js. Є підтримка роботи над декількома проєктами. Все це реалізовано в монорепозиторії pnpm.

Також чимало часу пішло на додавання демо, зараз їх 3 — основні фічі редактора, карткова та 3D-гра

Скріншот із розміром проєкту на даний момент

Без ШІ, думаю, це приблизно зайняло б рік розробки для дуже досвідченого розробника

Проблеми, які залишалися після генерації коду

• Не було вкладеності нод
• Налаштування тексту були мінімальні
• Типів нод було мало порівняно з можливостями самої 2D бібліотеки
• Були певні моменти з юзабіліті
• Невеликі помилки в елементах редагування

Це все достатньо просто вдалося виправити через додаткові запити до ШІ.

Що до нового функціоналу, додавав підтримку Prefab, кольорових схем, розширені налаштування тексту, додаткові параметри для сцен та проектів, редагування хітзон, масок для об’єктів, Spine-анімації.

Важлива частина це ігрові ресурси/асети, після пошуку безкоштовних — побачив цікавий варіант в форматі Aseprite і вирішив додати його підтримку, що було не особливо складно.

Висновки

Після цього досвіду я зрозумів що ШІ вже може брати на себе складні завдання і добре підходить для розробки різноманітних редакторів.

Якщо цікаво — більш детально можна ознайомитися в GitHub-репозиторії проєкту:

github.com/...​volodko/html5-game-editor

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини про геймдев