how to make a simple visual novel

sometimes people ask me how i make my games so here is a more detailed explanation.

here is the visualnovel code template i made , i used this for all of my games. basically its a big slideshow. you can insert your own images and text into this and youll probably have to adjust some of the positions in css.

before really starting i write down a rough script of the dialogue and options i want to have in the game and doodle some ideas and designs.

if you only want one ending you only need one html file but for every ending you need to double your files...idk how to explain lol just look at the image. i dont suggest making more than 4 routes tho because youd need an insane amount of files. (i made 4 routes for the prison game and look how many there are...) i usually name them stuff like page1a.html, page1b.html, page2a.html etc

thats pretty much everything i have to say about the code.

there are lots of ways to make character sprites and backgrounds but im gonna try to go somewhat in depth about the way i make those slighty animated ones. there are quite a few steps but no need to get intimidated! making the background in the video only took me like 15 minutes. the programs i use are mainly clip studio paint for drawing, procreate for animating and nomad sculpt for making 3D models. these all cost money but you could probably use free alternatives as well.

first i make a simple 3D model of a room or whatever prop i need in Nomad sculpt. it doesnt need to look great or be detailed. Then i export it as a transparent png into CSP. (this step can be skipped if youd rather just draw a room by yourself but for me this is quicker)
then go to Filter and select Effect and then Artistic. mess around with the sliders a bit till it looks okay. after than you can add more details and colors to the bg. go to Filter,Effect again and select Mosaic to slightly pixelate the image and add even more details if you want.
Import into Procreate and turn on animation assist. duplicate the image 3 times, add a vignette in the foreground maybe and turn on chromatic aberration on two of the frames. do some lighting too if you want.
export as an animated gif and make sure to turn on "per frame color palette" to get that flickering effect.
done thats basically it.

if you want to add a character to the scene its basically the same thing. to animate them select a limb and slightly move it with the liquify tool. a little movement can go a long way and add a lot compared to just a static image. (pls ignore how bad this example drawing looks...)

making character sprites is super straightforward i dont think i need to explain how to make them. just draw your character and make it transparent lol

if you have any more questions or need help you can always contact me. if you actually decide to make your own game i would love to see 0_0 (SEND IT TO ME)