<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Andrii Volodko — Software Development]]></title><description><![CDATA[Articles about HTML5 game development, Pixi.js, game engines, developer tools, and AI-assisted development.]]></description><link>https://andvolodko.hashnode.dev</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1593680282896/kNC7E8IR4.png</url><title>Andrii Volodko — Software Development</title><link>https://andvolodko.hashnode.dev</link></image><generator>RSS for Node</generator><lastBuildDate>Tue, 01 Sep 2026 16:50:13 GMT</lastBuildDate><atom:link href="https://andvolodko.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[How I Built a Unity-Like Editor for HTML5 Games in One Day Using AI]]></title><description><![CDATA[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 experi]]></description><link>https://andvolodko.hashnode.dev/how-i-built-a-unity-like-editor-for-html5-games-in-one-day-using-ai</link><guid isPermaLink="true">https://andvolodko.hashnode.dev/how-i-built-a-unity-like-editor-for-html5-games-in-one-day-using-ai</guid><category><![CDATA[AI]]></category><category><![CDATA[GameDev]]></category><category><![CDATA[HTML5]]></category><category><![CDATA[TypeScript]]></category><category><![CDATA[pixijs]]></category><category><![CDATA[ThreeJS]]></category><dc:creator><![CDATA[Andrii Volodko]]></dc:creator><pubDate>Wed, 26 Aug 2026 15:39:16 GMT</pubDate><enclosure url="https://cdn.hashnode.com/uploads/covers/6a8f062d930a306dbe91d727/94893d80-40cf-42e7-bb0c-877af3dbb1ed.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>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.</p>
<p>At some point, I came across an article about how people make games and earn money from them. I thought: <em>why not me?</em> So I decided to give it a try. It also seemed more interesting than traditional web development. I started with <strong>Unity</strong>, which at the time still supported JavaScript — something I already had experience with.</p>
<p>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 <strong>Pixi.js</strong>. From that point on, I occasionally thought about building my own editor.</p>
<p>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.</p>
<p>I started by discussing the idea with <strong>ChatGPT</strong> (Plus subscription). Then I asked it to create a prompt for <strong>Cursor</strong>, selected High Fast in the agent settings, and started generating the project. The name was fairly obvious — <strong>HTML5 Game Editor</strong>.</p>
<p>After getting the first result, I was, to put it mildly, impressed. It actually looked pretty decent.</p>
<p><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"><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" style="display:block;margin:0 auto" /></a></p>
<p>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.</p>
<p>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.</p>
<p>One important factor, in my opinion, was that the new <strong>Grok 4.6</strong> 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.</p>
<p>I then spent roughly a week adding new features and demos to the editor.</p>
<p>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):</p>
<p><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"><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" style="display:block;margin:0 auto" /></a></p>
<p>And here is an example of token usage after a week of working on the project:</p>
<p><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"><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" style="display:block;margin:0 auto" /></a></p>
<p>The idea was to build an editor that runs in the browser, with a <strong>Node.js</strong> backend responsible for interacting with the file system. Communication happens over regular HTTP.</p>
<p>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.</p>
<p>The editor itself uses <strong>React</strong> and <strong>dockview</strong>. 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 <strong>pnpm monorepo</strong>.</p>
<p>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.</p>
<p><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"><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" style="display:block;margin:0 auto" /></a></p>
<p>Here is a screenshot showing the current project size:</p>
<p><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"><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" style="display:block;margin:0 auto" /></a></p>
<p>Without AI, I think something like this would have taken roughly a year of development for a very experienced developer.</p>
<h2><strong>Problems That Remained After Code Generation</strong></h2>
<ul>
<li><p>Nodes could not be nested</p>
</li>
<li><p>Text configuration options were very limited</p>
</li>
<li><p>There were only a few node types compared to the capabilities of the underlying 2D library</p>
</li>
<li><p>There were some usability issues</p>
</li>
<li><p>There were minor bugs in editing controls</p>
</li>
</ul>
<p>All of these were relatively easy to fix through additional prompts to the AI.</p>
<p>As for new functionality, I added support for Prefabs, color schemes, advanced text settings, additional scene and project parameters, hitbox editing, object masks, and <strong>Spine</strong> animations.</p>
<p>Another important part is game resources/assets. While looking for free assets, I came across an interesting format used by <strong>Aseprite</strong> and decided to add support for it. This turned out to be relatively straightforward.</p>
<h2><strong>Conclusion</strong></h2>
<p>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.</p>
<p>If you're interested, you can explore the project in more detail on GitHub:</p>
<p><a href="https://github.com/andvolodko/html5-game-editor">github.com/andvolodko/html5-game-editor</a></p>
]]></content:encoded></item></channel></rss>