Originally published September 3, 2022.
Today, I’ll show you the nitty-gritty of rebuilding the screens for the port!
What’s in a Ren’Py project?
The code of Soundless is old. Very, very old. I have been working with Ren’Py for a decade now, ever since I was in middle school. I created Soundless’s Ren’Py project way back in 2016 according to some of the files. Maybe even before that—the oldest “last modified” date on an ancient type of Ren’Py file in the directory had 2016 as the year. That’s all I have to go off of, because moving data from PC to PC changed the creation date.
Before the new GUI template was launched with Ren’Py 7 in 2018, you were greeted with a selection of themes when you created a new project. They all had generally the same layout with tweaks to borders and elements like bars, such as a theme that looked digital and another theme that looked like it was drawn with marker. The ideal way to customize your screens back then, if you were an amateur, was to completely trash the whole default theme and create imagemaps.
For those unaware, an imagemap is a type of displayable that requires at least three different variations to work: the “ground state” version, the “idle state” version, and the “hover state” version. You would essentially create your entire screen in one image editor file, text and buttons and all, and save these different variations, then feed Ren’Py some numbers that corresponded to a bunch of rectangular spaces on the map. You would then tell Ren’Py that these rectangles are buttons/sliders from there.
That is how Soundless’s old menus were created. Just me, Photoshop 7 (yes, in 2016+), and painstakingly measured-out rectangle numbers.
This method is painful, even with Ren’Py’s built-in rectangle picker. But if I really wanted to, I could have just upscaled the old imagemaps and copied and pasted my code…except I did not want to do that.
I Needed To Change and Add Things Jesse
The old way just wasn’t viable anymore.
For one, Ren’Py’s modern screen code is just much less painful to use. You can add and manipulate elements on the fly if you just take the time to create and style various types of buttons and frames. It’s also much easier and faster to make any changes if your element isn’t hard-implemented into images. That screenshot up there doesn’t have a single bit of text that’s a part of a picture. Those are all typed out in the code file and rendered by the engine. This method allowed me to make tweaks to make the menus a little more player friendly, like making it very obvious that page 2 of the options screen is selected through better colors.
Another issue is the fact that I don’t have the .PSDs for the original imagemaps anymore! I have no idea where they went. And even if I did find them, I use the latest edition of Photoshop, so I’m not sure what would happen to the text’s appearance. I needed to add things like the accessibility options screen, and without those .PSDs there was no hope of doing it the old way.
There were, of course, slight downsides to this. I had to recreate the background images (mostly because of the missing .PSD issue), and they didn’t look quite the same because new Photoshop versions means a different way of processing the effects I once used. Since I also committed to reducing images as buttons as much as possible, the main menu buttons are slightly different as well.
A Special Mention Goes to the Save Menu
Like I said, the code for the original Soundless is really old and sad. The method used to make the save slot screenshots appear elsewhere on hover was long deprecated. I had to figure out a new way to do it all by myself, and it took me almost an hour, but I managed. I actually had the correct solution at one point, but because of what I can only assume was something being slightly off, it didn’t work at first…I nearly tore my hair out LOL. I’ll put up the solution I came up with on my personal blog (link) at a later time so that everyone can use it for themselves if you’d like to also have the save screenshot appear elsewhere on hover.
Though, to be fair to myself, if you gave this problem to the me of 5 years ago, they’d just go “I can’t do that, are you crazy?” and walk away.
That concludes this issue. Next issue, I’ll be talking about the new way Ren’Py parses the NVL text in Soundless, the differences from the old way, and how I got it to look (almost) just how it did before.