update: deepseek redid the entire interface which is even better-looking (while I was implementing a save system). Since this is purely CSS, it’s very simple to change the entire display (colors, shapes, font formatting etc), or even make custom themes for it. At this stage though the engine itself doesn’t exist, meaning this is all hard-coded in a file.
It’s also fully mobile friendly but of course that’s basics.
At this point with the save and flag system it has everything needed to make ‘simpler’ VNs, provided you code them yourself in the files, but again this is just a fun little project lol. It’s not gonna be the next renpy or even publicly released lol.
I’m kind of on a VN binge these days (unfortunately it seems there is nothing as good as Virtue’s Last Reward, Ace Attorney and Paranormasight out there but I digress), and I had this terrible idea one night that it might be possible to make a web-based VN engine, that not only lets you code your game, but lets people play games made with it too.
So I asked deepseek how it would do exactly that. What kind of tech would you need? Is it even possible to make this?
And the answer of course is yes, it is. Everything is made with JS these days so that’s not surprising.
This would allow VNs to be not only created (or recreated) on any device, but also played on any device, since this runs in a browser window.
The prototype picture you see attached to this post is basically all Deepseek-made based on my design decisions - except the pictures, which I shamelessly stole off Google for the prototype.
At this stage the game is hard-coded into a JS file. It consists of nodes, with a node being a Javascript object that tracks a line of text or a choice. Every time you click, we move to the next node in line. A node has text, a background picture, a character asset (just one for the prototype), and a character name to display who is speaking.
There are also flags you can set in a node, which if you don’t code are variables that track progress. In the preview picture above, one choice is locked (replaced by ???) because the player has not ‘enabled’ the correct flag for it yet, i.e. not visited the node that sets this flag to true. This simple system is enough to allow more complex, non-linear storylines already - though there is no save system in the prototype (but it wouldn’t be very complicated to make).
This is what a node looks like in the code:
{
id: 'node_5',
type: 'choice',
character: 'Anna',
sprite: 'anna.png',
background: 'school.png',
speaker: 'Anna',
text: 'What should we do next?',
choices: [
{
text: 'Go to the library',
next: 'library_node1',
require: { hasLibraryPass: true } // Optional: only show if player has this flag
},
{
text: 'Go to the cafeteria',
next: 'cafeteria_node1'
}
]
},
If the engine were to exist of course a more intuitive, visual and streamlined system (allowing to efficiently string nodes along so you can focus on the writing) would be created. But it would render somehow like that in the code.
On the display side it’s literally just a few html <divs> styled and nested. You start the game by opening the html file and it just works. Deepseek took care of all of that without even asking it to, including displaying the choices this way which I honestly really like. It feels sleek and modern compared to the “let’s take up the entire screen with buttons”, but of course in this case we only need to make 2 choices fit.
Being HTML though it’s very easy to rearrange the blocks or style them differently. As much as I know HTML and CSS it’s cool that I don’t have to make this myself to test the first prototype.
I’m not sure I want to actually continue making this engine because, you know, a 200-line prototype is one thing, but turning this into an actual full engine with WYSIWYG development capabilities AND playable capabilities (and all that entails i.e. saving, options, animations, text control, etc.) is of course going to be a lot more work for basically nothing but a hobby project that exists to prove this is possible lol.
But I really like this little prototype and wanted to share :)
Nice cake day post
Years ago I wrote a VN engine from scratch in C++ that never got finished, for a project that never came to be. It had some developer tools (some of which never got fully realized): One where you could manage your Assets in the Game’s Pack file and one where you could create and edit GUIs. I made my own basic scripting language for it which I used not only for scenes but also for all the UI. It was kind of powerful, but in my script I didn’t have any nodes only “functions” which were really just a set of instructions for the engine, and branching decisions would just call out to other “functions” (which could live in other files even).
Not sure what to think of the more data-oriented approach here, I feel like it could get a little messy with the “choices” array. I would make the “type” an Integer instead of a String, and the “character” and “speaker” seem a little redundant, unless one is supposed to be like an ID, in which case I would come up with a better naming convention (like “main_anna” or something like that).
sounds interesting, even if it feels like cheating using AI
Ultimately AI is akin to any other technological progress, it automates things and makes labor easier (in some cases, not all). Do we consider it cheating to be using machines that make construction faster, or that can automatically produce items? In the end I had to concede that AI was not any different from what came before it. It is proving to become better with time (except chatGPT, that’s a fossil at this point) and actual uses are emerging over the bullshit of tech CEOs trying to pump and dump their stock.
I share the same view. The problem of AI does not come from the technology itself, but by the fact that it is a tool that uses work from other people to build the model without compensating them, while at the same time it offers opportunity for companies to exploit other people more. If the world were to be socialist, Generative AI would be just another tool to reduce work.
Fuck vibe coding, man.
If you want to make something, learn how to make it the right way. It’ll be better in the end, and who knows what might be wrong with this that you aren’t aware of?
A developer doesn’t necessarily output 10/10 code. Even a good developer might average 9/10, leaving room for improvement.
Does AI output 10/10 code? No, it might peak at 6, depending. But if you or I cannot reach 6, then the AIs code will still be better than whatever we could output. Not only that, it’s able to come up with ideas and let you try them out. For example I was envisioning the choices being presented in the middle of the screen like all VNs, but ultimately I like the way it coded them in the textbox instead.
A developer might also not be aware of what’s wrong with their code. This is why they write tests, but a lot of testing, from how I code, comes from just testing it in setting as a user.
Ultimately, why does anyone need to become a senior dev to do these things? I run python scripts, sometimes batch commands, make JS scripts with AI and they work great and let me progress with what actually matters, unlocking progress so I can move to the next task. The idea of the ‘right way’ is to spend months learning each language, library and frameworks just to make a 400 line script that interacts with a Web page.
Will I eventually run into a problem that’ll break everything? Maybe! But I could also code that fatal bug in myself without realising it.
Vibe coding prototypes is definitely fine
I think there are lots of good arguments to raise against AI, even for personal hobby projects. I don’t think ‘you can learn to code yourself’ will ever be one of them.
The same way that people don’t program on bits because of assembly, or on assembly because of C and such, or on C because of Python, why would people have to use Python (or whatever) if they can get help from AIs to do what they want?
(unfortunately it seems there is nothing as good as Virtue’s Last Reward, Ace Attorney and Paranormasight out there but I digress)
Have you checked out Danganronpa? Not always the best writing, but I enjoyed it
I played the first one a long time ago but I don’t know, for some reason I didn’t get into it. Still finished it
If you continue, get deepseek onto that saving feature. Code for saving is often repetitive, so its boring for humans to write, but probably very easy for deepseek.
With the node system, saving might be as easy as saving the node ID to localstorage every time you change nodes, as well as persistently storing the flags you’ve unlocked. This should be easy enough, the ‘set’ function that sets the flag in the node can basically also save it to storage at the same time.
But then of course you might want to do save slots, and a soft and hard reset feature somewhere on the UI (brings you back to node 1, or erases all progress and brings you back to node 1). Localstorage might also not be the best solution if it gets wiped. Instead a base64 string like a lot of idle games do might be more persistent.
And that’s why I stopped after the prototype above, it’s a lot of work to make this lol
Got a saving system working lol. Deepseek also redid the entire game area which is fine, this is just CSS so it’s very easy to create even themes for it.
Video was too big for lemmygrad so here is a preview on imgur: https://imgur.com/hnGJOrU
As you can see it tracks flags between restarts (opening up the library), but not a hard reset which wipes everything. I didn’t show it in the video but if you refresh the page, it automatically loads to your save state. The ‘load’ button is thus currently useless, because it will just send you to where you are currently, which is where you are currently, which is redundant.
But at this stage you could code an entire game. it’s very rudimentary but, you could make it.
And of course renpy is much more mature and advanced so this is pretty much useless and only for fun lol
Nice
An Imgur link was detected in your comment. Here are links to the same location on alternative frontends that protect your privacy.
Noooooooo it’s not your design decisons, you have nothing to do with it, it’s just an AI slop. Wrongtool, wrongthink! Admin baaaaaaaan this reactionary. (/s)
Lol but it asks good questions about who made it or who ‘owns’ it. Can I say I made this engine? I think so, because ultimately it came from my impulsion. I make the design choices (not the visuals necessarily, but I decide on the logic of how it works under the hood). But I couldn’t say that I programmed it or wrote the code, this belongs to deepseek. It’s a collaborative effort.
Lol but it asks good questions about who made it or who ‘owns’ it
Naturally, it’s all plagiarised, people even call it “plagiarism machine” here.
I wouldn’t say it’s straight plagiarism because it does output previously non-existing content. Like I doubt that the 200 lines of JS it coded for me are novel and someone else hasn’t written them before, but that wouldn’t count as plagiarism if it’s not directly copying. LLMs are trained on existing content, and this is handled abysmally by capitalist tech companies who rush to remain at the top and wipe out competition (meanwhile deepseek is quietly wiping them out by doing a fraction of the work), but couldn’t we also say that humans are trained on existing content? As token predictors LLMs don’t directly copy what they know, they make stuff up - sometimes with great results and sometimes with abysmal results. It’s not even capable of quoting from a book without external help because it doesn’t “know” the book, it was just part of its training data to make statistical probabilities.
This looks good! Good work!
Self-hosted Deepseek?
Still web interface, I’ve yet to take the plunge with self-hosted coding models because I’m scared I’ll be disappointed lol.
Having an agent interface would be cool though, I have everything set up I just need to actually give it a shot. That way it could read my files instead of having to send them over each time, and edit them instantly. Keeping version control would also be great, that’s probably doable.
