I asked my sister what she wanted for Christmas, and she didn't really know and said that she'd be happy with OC stuff, and so... I made a little visual novel-esque thing for her!
(... In the span of like. 3 days.)
Anyways, I thought it'd be fun to document some parts of the process. I think I do things in a pretty funny way, because it's always geared towards: 1) what feels most natural for me, and 2) doing as little work as possible.
With this project, I started with figuring out what characters I wanted to use/draw, and then made bases for those. During the time I was drawing, I tried to think through how I wanted to actually put things together.
There were 3 main parts to this:
Planning / writing
Art assets
Programming
So... I'll just write about each of these! (╯▽╰ )
Planning / Writing
I'm going to be upfront and say... I have no idea what the general process is like for VNs, their dialogue, setup, etc.! I think the way that I did things is just what made sense for me, my skillset, my use case, and what seemed like it'd be the easiest.
And for a lot of things... the easiest for me is a spreadsheet!
That's all it is, more or less: all the dialogue and effects (actions, scene changes, etc.) were written out in a spreadsheet before I started anything else.
Essentially, with each line of dialogue, I only really needed to know who the speaker was, what the dialogue would be, and figure out what other changes were needed.
Since I'm used to programming function calls, that's just naturally how I decided to write the "Effects": function calls that I didn't really think through. For example:
bg(...): Would change the background of the scene to whatever was mentioned.
show(character, #): Would make a character appear at a given position (which is from 0 to 100, where 0 is the left-most part of the scene and 100 is the rightmost.)
move(character, #): Would move a (displayed) character to the given position.
change(character, emotion): Would change a (displayed) character's image to another one.
... and so on! At this point, I didn't think too much about how I would implement these. All I needed was to figure out what I needed to happen and just make note of it.
This also let me know exactly what expressions I needed to draw for each character, and so I wouldn't need to draw more than what I had to... which brings us to:
Art
I don't think there's too much to talk about: I just made a base of the character (without any facial features), and drew different expressions!
There were 6 characters in total, so 6 bases. The expressions were pretty fast to draw beyond that. There's about 25 different images in total!
While I could be more space-conscious and have them in a single file per character, I wanted to be lazy and so I just have 1 folder per character, and in that, a file named for each expression.
The filename corresponds to the mood that I have in my written script (see above), which means switching files is just a matter of grabbing the corresponding mood! Super easy.
But... all of the art took me about 2-3 days to finish. My hand was suuuuper tired...（；´д｀）ゞ Don't do that to yourself. 6 half bodies in 2-3 days is hell.
Programming
This one's probably the more fun (?) topic! In general, I knew that I was going to be making this as a website, and thus HTML + CSS + Javascript/Jquery would be used.
There's 2 main parts for the programming: the first was using the spreadsheet to make the actual dialogue/flow of the game, and the second was actually rendering/displaying everything.
Using the spreadsheet
I mentioned that I had the dialogue written in a spreadsheet, and while there's a few ways I could use a CSV with Javascript... it's always way more of a pain than it's worth, especially to process the data.
In general, I like to just use that CSV and convert it into JSON using Python! So my first task was essentially turning that spreadsheet into this:
(I don't think it's super important to explain this, but essentially just think of it as a way for me to re-organize the data.)
I work with this sort of stuff a lot, so this probably took me like... 15 minutes to write, with a bunch of that just being me fiddling with regexes and trying to figure out the structure of the JSON.
Either way: this means I just take the CSV, put it through my script, and bam: all of the dialogue and effects are in the format that I need! Which means I can edit the dialogue/effects/etc. as much as I want without having to do much additional coding.
Rendering the game
Teeeechnically this breaks down into more parts: the actual HTML/CSS styling and setup, and then the javascript parts. But... the HTML/CSS part is a bit straightforward:
There's 2 parts to the game, one part that displays the characters (the "Scene") and one that displays the dialogue.
Characters get added into the scenes and then highlighted as needed if they're the active speaker, and moved around.
The character's name and the dialogue spoken gets updated as needed.
I don't do webdev that much, so it's always a little fun to find out what CSS things exist that I haven't seen before. Most of my knowledge is beginner stuff from like... 2015ish, so suuuuuper outdated at times, hehe. Life is so much more convenient now with aspect-ratio and container query units... (´。＿。｀)...
... Anyways! The rest of the coding was towards "how do I most easily use the dialogue that I parsed and get it to render how I need"? The actual visual changes weren't too hard, since most of them were just updating the text or adjusting positioning - that stuff is super easy to do.
But to be honest, the code structure for rendering things... also isn't that hard! There's only 3 classes that I wrote (i.e. structures to contain information):
Game: A class that holds all of the information about a game. This consists of keeping track of what characters exist, what dialogues exist, and where we are in the dialogue. It's also where all of the effects exist (e.g. to move characters around, hide characters, show them, and so on).
Dialogue: A class that holds the information from my spreadsheet! The speaker, the text they say, and all of the effects that happen (which essentially just uses the Game to find the corresponding effect's method, and make a call).
Character: A class that holds informations about the displayed characters, namely the id they use (which corresponds to their div), the display name of the character, and the folder where their art is stored. There's a single method for this class, which is simply to change the displayed image.
In total, with line breaks and everything... the file for these classes was 103 lines, which is really really small! I also had to write small functions to create these classes from the JSON files, but those are also pretty small.
In total, all of the code for this took me roughly 3 hours (with a break for dinner included in that), which I think is pretty fast? And a lot of that was actually me fiddling with CSS and trying to make it scale how I wanted it to.
The end result
... is here!
There's probably a billion ways to get things done, but I'm a bit silly and like to do things myself. Maybe I could have learned renpy or done other things, but... I like websites! They don't require people to download things! And I also don't like using other people's frameworks and stuff, especially if I'm working on something small! I feel like it's unnecessary and overkill for me to to learn it.
Also I just find it fun to write things from scratch.
For me, one of the important things was to also make a base that's very easy for me to reuse in the future. There's a few things that I might want to clean up (and document), but in general, everything was written so that I could reuse this as much as I want in the future!
... So, in theory, I might make a bunch of short OC skits. Just for fun. o(*￣▽￣*)ブ I think it's a fun way of storytelling.
Making commissions like this would be fun too, I think... but I don't know how that would really work. I'd need people to give me a storyboard essentially? Or a bunch of dialogue, and then I figure it out from there...? I don't know. (。_。)... I don't think I'll bother with that train of thought, not for a good while at least.