This project is for the Generative Retro Gaming System Challenge
Inspiration
The idea was inspired by my goal of expanding the power of imagination. It sounds silly and trite but this, in my view is the trajectory of consumer driven AI. I believe within the next few years we will increasingly be able to materialize concepts into code for the average consumer. This project is an attempt to bring that idea to life.
What it does
A.I Text to Game Generator provides a deceptively simple service: translating natural language into games. It takes in user queries and an html game scaffold chosen by the user- out of a premade selection - and builds a game out of html/css/Java script. It does this by sending the user query and html file it to the OpenAi API. The results are spliced and the html is isolated and appended to the DOM. This allows for OpenAi to manipulate the game struture to the requirements specified to the user. And wallah!! You have a user created game.
How I built it
The backend is built with Node.js and Express, using body-parser, CORS, and dotenv for configuration. It reads HTML game templates from disk and sends prompt-engineered instructions to the OpenAI GPT model, asking it to rewrite or transform those templates into something new based on user input.
The frontend serves a clean UI where users can select a base game, type a description, and preview the game output in an iframe. The entire game is returned as a single HTML5 document and rendered directly in the browser without any build steps.
Challenges I ran into
Design direction: At the offset, I had no idea what I was doing. I started knowing that I needed a scaffold of some sort. I chunked together lots of html files and tried to create a synthesized random game. Eventually I realized that the most stable permutation of code was by building off of single scaffolds.
Token limits: Large templates combined with verbose descriptions occasionally exceeded the API's token limits, forcing me to rethink how I would interact with the api.
Canvas and DOM quirks: Since the AI rewrites live canvas logic, I had to make sure it preserved game functionality even while transforming visuals and themes.
Accomplishments that I'm proud of
That the entire thing actually came together!! I talk about how I desire for the user to bring their imagination to life, but in this case I did it. Once I had an idea of what I wanted to build, I could pretty quickly design the application. I was proud of myself for my ability to execute based on my ideas
What I learned
Most centrally, I learned that there is a real future in applications which have at their functional core an LLM. I think many more successful applications will use this model. Many more to come.
What's next for A.I Text to Game Generator
I want to see if I can better pinpoint as to how to makes a part of a game likely to be changed by chat gpt and better design games and systems which could bring the meaning of the user input closer to the actual output sought for by the user. In other words, I want to come closer to understanding the relationship between text and game logic to better bring the user's imagination to life.
Note: since adding my youtube video I have added the feature of allowing for chain prompts. As in the user can now modify previous results.
Built With
- body-parser
- canvas
- cors
- css
- dotenv
- emoji-based
- express.js
- fs
- html5
- javascript
- node.js
- openai
- path
Log in or sign up for Devpost to join the conversation.