<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Andrii Volodko</title>
    <description>The latest articles on DEV Community by Andrii Volodko (@andvolodko).</description>
    <link>https://dev.to/andvolodko</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4095956%2F5d1b24c1-c1a5-4699-b1a4-1d3e50fe36ca.jpg</url>
      <title>DEV Community: Andrii Volodko</title>
      <link>https://dev.to/andvolodko</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/andvolodko"/>
    <language>en</language>
    <item>
      <title>How I Built a Unity-Like Editor for HTML5 Games in One Day Using AI</title>
      <dc:creator>Andrii Volodko</dc:creator>
      <pubDate>Wed, 26 Aug 2026 15:24:08 +0000</pubDate>
      <link>https://dev.to/andvolodko/how-i-built-a-unity-like-editor-for-html5-games-in-one-day-using-ai-22ch</link>
      <guid>https://dev.to/andvolodko/how-i-built-a-unity-like-editor-for-html5-games-in-one-day-using-ai-22ch</guid>
      <description>&lt;p&gt;Hi everyone! My name is Andrii, and my career in IT started way back in 2008. I initially worked in web development — corporate websites, online stores, and landing pages. It was an interesting experience working at a web studio.&lt;/p&gt;

&lt;p&gt;At some point, I came across an article about how people make games and earn money from them. I thought: &lt;em&gt;why not me?&lt;/em&gt; So I decided to give it a try. It also seemed more interesting than traditional web development. I started with &lt;strong&gt;Unity&lt;/strong&gt;, which at the time still supported JavaScript — something I already had experience with.&lt;/p&gt;

&lt;p&gt;Later, I moved to Flash and eventually to Pixi.js. One thing that always surprised me was the lack of a proper visual scene editor for &lt;strong&gt;Pixi.js&lt;/strong&gt;. From that point on, I occasionally thought about building my own editor.&lt;/p&gt;

&lt;p&gt;At one point, I even started working on one, but it quickly became clear that it was a very large task. With the rise of AI, I decided to give the idea another shot. Honestly, my expectations were much lower, which is why I decided to share the experience.&lt;/p&gt;

&lt;p&gt;I started by discussing the idea with &lt;strong&gt;ChatGPT&lt;/strong&gt; (Plus subscription). Then I asked it to create a prompt for &lt;strong&gt;Cursor&lt;/strong&gt;, selected High Fast in the agent settings, and started generating the project. The name was fairly obvious — &lt;strong&gt;HTML5 Game Editor&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;After getting the first result, I was, to put it mildly, impressed. It actually looked pretty decent.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faqrvj1m3kfqqcxyw3v3r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faqrvj1m3kfqqcxyw3v3r.png" alt="HTML5 Game Editor screenshot" width="800" height="384"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The implementation became addictive, and after literally one day of working with Cursor, I already had a version that was reasonably usable for simple tasks. The first iteration already allowed me to create scenes and nodes such as Sprite and Text.&lt;/p&gt;

&lt;p&gt;The next day, I hit the Cursor Pro usage limit, so I upgraded to Pro+. I also discussed it with ChatGPT and disabled Fast mode in the settings to reduce token usage.&lt;/p&gt;

&lt;p&gt;One important factor, in my opinion, was that the new &lt;strong&gt;Grok 4.6&lt;/strong&gt; model had been released just one day before I started working on the project. It played a significant role in making all of this possible at a relatively low cost.&lt;/p&gt;

&lt;p&gt;I then spent roughly a week adding new features and demos to the editor.&lt;/p&gt;

&lt;p&gt;Here is a screenshot showing how many tokens have been used so far (100M tokens had already been used before I started working on the editor):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1qds1awwphu89m7kkdik.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1qds1awwphu89m7kkdik.png" alt="Cursor token usage screenshot" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And here is an example of token usage after a week of working on the project:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsfkqft4zfdfsuwlyefbl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsfkqft4zfdfsuwlyefbl.png" alt="Cursor token usage screenshot" width="799" height="234"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The idea was to build an editor that runs in the browser, with a &lt;strong&gt;Node.js&lt;/strong&gt; backend responsible for interacting with the file system. Communication happens over regular HTTP.&lt;/p&gt;

&lt;p&gt;One potential advantage of this approach in the future is collaborative development: designers and integrators could work on game assets while developers work on the code in parallel.&lt;/p&gt;

&lt;p&gt;The editor itself uses &lt;strong&gt;React&lt;/strong&gt; and &lt;strong&gt;dockview&lt;/strong&gt;. It also supports hybrid scenes where 2D objects rendered with Pixi.js can work alongside 3D objects rendered with Three.js. Multiple projects can be opened and managed. Everything is implemented in a &lt;strong&gt;pnpm monorepo&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Quite a lot of time also went into adding demos. There are currently three: the editor's core features, a card game, and a 3D game.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flmjmsf3j1w6wlcsoest3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flmjmsf3j1w6wlcsoest3.png" alt="HTML5 Game Editor demos" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is a screenshot showing the current project size:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe8eg5m9toeye5wys8h0v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fe8eg5m9toeye5wys8h0v.png" alt="Project lines count" width="552" height="188"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Without AI, I think something like this would have taken roughly a year of development for a very experienced developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problems That Remained After Code Generation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Nodes could not be nested&lt;/li&gt;
&lt;li&gt;Text configuration options were very limited&lt;/li&gt;
&lt;li&gt;There were only a few node types compared to the capabilities of the underlying 2D library&lt;/li&gt;
&lt;li&gt;There were some usability issues&lt;/li&gt;
&lt;li&gt;There were minor bugs in editing controls&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All of these were relatively easy to fix through additional prompts to the AI.&lt;/p&gt;

&lt;p&gt;As for new functionality, I added support for Prefabs, color schemes, advanced text settings, additional scene and project parameters, hitbox editing, object masks, and &lt;strong&gt;Spine&lt;/strong&gt; animations.&lt;/p&gt;

&lt;p&gt;Another important part is game resources/assets. While looking for free assets, I came across an interesting format used by &lt;strong&gt;Aseprite&lt;/strong&gt; and decided to add support for it. This turned out to be relatively straightforward.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;After this experience, I realized that AI is already capable of taking on fairly complex tasks and can be a very good fit for developing various kinds of editors and development tools.&lt;/p&gt;

&lt;p&gt;If you're interested, you can explore the project in more detail on GitHub:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/andvolodko/html5-game-editor" rel="noopener noreferrer"&gt;github.com/andvolodko/html5-game-editor&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>gamedev</category>
      <category>html</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
