Originally published September 4, 2022.
You would be amazed at how much thought goes into how text is displayed to the reader.
NVL in Ren’Py
As I said in the previous issue, I’ve been working with Ren’Py since middle school. Back during those days, I wanted all of my visual novels to be in NVL mode, because I simply believed it was the superior text display method (I still kind of think that…). I was a super amateurish programming newbie, but I wished to closely replicate how NVL appeared in visual novels that used the NScripter engine regardless of my skill for my own self-satisfaction.
So, I figured out how to do it, in the dumbest way possible. That stupid way persisted all the way to Soundless.
Let me paint the picture that is the old code for you. We’ll use the first three sentences from Crime and Punishment to demonstrate what I did.
First, here is what the excerpt is meant to display as in-game.
On an exceptionally hot evening early in July a young man came out of the garret in which he lodged in S. Place and walked slowly, as though in hesitation, towards K. bridge.
He had successfully avoided meeting his landlady on the staircase.
His garret was under the roof of a high, five-storied house and was more like a cupboard than a room.Each sentence gets a line of its own, separated by single line breaks. They are displayed one by one, with two different click to continue indicators nestled at the end of the text: one kind that tells you you’re going to the next line, and another line that lets you know the screen will be cleared and the page will “turn”.
Because of (what I believe was) certain particulars about how the engine worked when Soundless was first made, in order to get those two different kinds of indicators, I had to write…this.
nar "On an exceptionally hot evening early in July a young man came out of the garret in which he lodged in S. Place and walked slowly, as though in hesitation, towards K. bridge.{w}\nHe had successfully avoided meeting his landlady on the staircase.{w}\nHis garret was under the roof of a high, five-storied house and was more like a cupboard than a room."
nvl clearJust a giant paragraph of all the page’s text shoved into a single string.
But now, the engine has changed, and my knowledge has expanded! I don’t need to do this anymore. It’s set up so that Ren’Py can automatically tell which of the indicators it’s supposed to use whenever the words nvl clear are coming up. All you have to do from there is just tell Ren’Py what the pictures are.
So, now Soundless’s code looks more like this:
nar "On an exceptionally hot evening early in July a young man came out of the garret in which he lodged in S. Place and walked slowly, as though in hesitation, towards K. bridge."
nar "He had successfully avoided meeting his landlady on the staircase."
nar "His garret was under the roof of a high, five-storied house and was more like a cupboard than a room."
nvl clearLooks a lot better, right? This seems really awesome until I tell you that I had to go through the entire script and make sure everything was getting broken up like this. I did do Find and Replace for most of it, so it wasn’t too painful, but I still had to comb through it to make sure everything was done correctly. Sometimes, the spacing would get strange and it wouldn’t replace correctly, because some of Soundless’s old code is, uh, manually word wrapped.
Yes.
I used the enter button to manually word wrap it. In jEdit. Many many years ago.
It hurts.
Couldn’t you have just kept it like that?
I actually could have. It still works! But that would’ve hurt the backlog.
When I hastily gave Soundless an actual backlog and not just Ren’Py’s default rollback back during the Version 2.0 update, I just made a simple backlog screen and told Ren’Py to record it page-by-page and not line-by-line and called it a day. My memories of what it actually looks like have been blacked out because all I remember is that it looked pretty bad with a tiny scrollbar, and I don’t want to remember it.
Due to strange cuteness that I don’t understand despite my efforts to make it not do that, the current backlog can still get a little janky, but it now records things in a sane line-by-line way…but I have to make sure that the lines it records aren’t too long. That old way of doing it produces massive paragraphs that go past this limit. Cutting it up is the only way to preserve your mind.
This also meant I had to cut up any instances of text filling up the screen. I did this in a clever way as many times as I could so it still looks like fairly unbroken giant walls of text. When you look at the backlog after reading these parts, you’ll find that it was all actually individual lines. Personally, I think this is much better, because your heart gets to sink when you see line after line of “Begone!” as you scroll.
Styling, Ruby Text
When I tell you that styling it was a pain, it was really a pain!!!!!!
I had to keep cross-comparing what I was doing with an old Soundless window open at the same time. It didn’t take forever, but going back and forth tweaking the numbers until everything fit on the screen just like how it used to was a pain.
But nothing compares to what I had to do with the ruby text. Oh boy, I hated it. Ruby text in Ren’Py gets its own special style, and in order to make it appear properly, you need to change the line height. Not only did I have to figure out a way to do this without breaking everything, but I also had to make it so the ruby text font changes when you pick a different font.
I eventually settled on making a unique character that holds any lines that include ruby text. I also had to give the font change buttons another action that does some things under the hood that I don’t really know how to explain in a simple way. Speaking of those buttons, the action list is incredibly long and ugly…I hate looking at it.
The only little issue I had with it was that sometimes the English translation for a line in Doon Po Sa Amin was longer than the Tagalog. It still looked fine in-game, but when you viewed it in the backlog, the beginning of the translation would be cut off. I had to do some weird solution to make it so it’s always readable, whether in-game or in the backlog. It unfortunately…doesn’t look the greatest, but I’d rather people be able to read it than go “oh, that’s pretty, would be nice if I could read it, though.”
This concludes the issue. I’m not sure what I’m going to talk about next, but I was thinking it could either be the first part of the accessibility series or something about the violent images toggle. We’ll see!