I’m making an AI-powered JS Browser Game Engine — Helicity.ai✨

4 min readJul 8, 2023

Hey everyone!

I’m excited to share that I’m currently developing an AI game engine called Helicity.ai✨. It’s a browser-based game engine that’s still in the works, but I’d love for you all to try it out!💖
The AI part is only a really cool add on and this game engine works on its own.

If you are interested in the development, lets chat 1 on 1 here!
https://discord.gg/RkH98RgVDr

What happens in helicity.ai?

I’m currently deep in development on the engine, and I’ve been making a lot of progress. Almost everything is coded in FERN — Firebase, Express, React, and Node.
In the Code Editor, the Main.js code you write is used to control a canvas element. There are concepts like Gameobjects, Input handling, Rendering etc on which I have developed a tiny framework.

I tried teaching GPT3 the framework, but it wasn’t enough. It was like trying to teach a 10 year old calculus🙃🌧️…

Then I taught GPT3.5 the framework and it is able to make simple games using it!🥳🥳 I used the openai API to create a Firebase function in Node, Express that writes the code for you based on a prompt.

It still makes mistakes and repeats code but is a lot better now.

I have applied for the GPT4 API waitlist and will soon use that. The extra parameters and creativity is what makes the AI work, and that’s why GPT3 did not.

IDE and Usage guide

Once you go to the IDE, you’ll see a Code Editor on the left and an AI Console on the right.

Play (Make sure to allow pop ups)

Click the ▶️ play button on the top right to load your game.

This button loads the game and takes you to a new window. *You can share this link with anyone and they can play your game! * Regardless of whether you used AI or not.👍

How to use the code editor

The code editor looks similar to VSCode because I used the monaco code editor component in react.
This Main.js file that you are editing controls a 1280*720 Canvas(ID “myCanvas”).
At the core of it, you make Game Objects that have some logic in them.

Basics of the engine

I have made many modules which make up this engine.

GameObject Class: Each GameObject instance possesses root properties like x, y, width, height and type. So

new GameObject(10,10, 50,50, "player")

creates an object that is automatically added to the game.

Input from “./Input.js”: Handles keyboard inputs. Examples of usage include a True /False output for

Input.getState().keys["space"]//, W A S D like Input.getState().keys["a"]  //WASD
Input.getState().keys["left"] //arrow like "left" , "up" down

Physics from “./Physics.js”: The Physics.checkCollision()method accepts two GameObjects and returns true if they're colliding.
Renderer from “./Renderer.js”: Nothing much, just handles the drawing so you don’t have to write any extra code.

Use Renderer.drawText(text, x, y, size, color = "black", font = "Arial") to draw any text on the screen.

Game.start() and Game.stop() start and stop the game loop. Game.gameObjects is an auto managed array of existing GameObjects. Any created game object is automatically added to this array.

AI Console

The AI has learned this framework to a good limit and it can develop basic games. Give it a detailed prompt in about 4–6 lines like this one. The better the details are, the better the generation.

Example Prompt
I want a game where you move a block around with arrow keys vertically up and down.
Enemies keep coming at you horizontally and you have to dodge them. 
Draw the score. If you hit an enemy, the game is over. 
Enemies keep spawning at regular intervals.

Then it will rewrite your code on the left.

How good is the AI?

As I said its GPT3.5 and works fairly well in using my framework. GPT 4 is frankly too pricey, and GPT3 even with fine tuning is really bad. We have a winner.

Multiplayer Support

I had created a framework (Rocket Networking) for building multiplayer games using Gamemaker Engine a few months back, and I am going to add similar low code support to this framework as well.

DALL E Support

Now I added a small dall e plugin! When you set the image source to “lookup: pixelart flappy bird” or something, it hits up dall e and makes an image!

🙏Support Development

If you’re interested in trying out Helicity.ai, head over to the website and give it a spin.
And if you’re really keen on participating in the development, be sure to sign up with your email address for exclusive early access. That would really mean a lot to me!

Thank you all for your reading, and happy gaming!