FallenEros

Dev Log #5 - User Interface from Scratch

Added 2022-01-31 09:21:03 +0000 UTC

When you create a new Ren'Py project you have a simple Game User Interface out of the box. The thing is, it does not look like a classic visual novel at all. The key bindings are different and lacks some configuration settings. Nonetheless it's still great because if you use the classic engines like Kirikiri you have nothing (although there are plugins buried in dead japanese forums)

Here is how it looks out-of-the-box:

Before I start using custom images to decorate the GUI it's better to first set up the functionalities (So it will look ugly for a while)

For example, you can customize the menu that is displayed during the game called 'quick menu' in Ren'Py

You will notice this pattern: textbutton _("button name") action Action() alt "auto_voice_text"

Each action is technically a Python Class that uses a function to 'do something'. For example the action QuickSave() performs a quick save. I think the names are self explanatory. You put the button name inside this: _("here") in order to eventually translate it. The whole alt thing is for the automatic voice. It's optional (for accessibility)

It ends up looking like this: (Don't mind the background and the sprite)

You can give any visual style you want to the buttons and text but that's for later.

Now for the configuration menu I added new settings. For the moment they are the following:

More resolution options. You can change font types and sizes. And the most important a slider for the textbox opacity/transparency.

This is how you do it:

Wrap the textbox image inside the Transform() function and using the alpha argument you can change the transparency. The persistent.say_window_alpha variable is controlled by a slider, this gives the alpha value (from 0 to 1).

Now create the slider that controls said variable:

using the screen language you create the bar by writing bar and giving it a value which is a function called FieldValue() that can control a variable. persistent is the variable field, 'say_window_alpha' is the variable name. The persistent variables retain the value if you close the game.

That's it for now. There's ton more to come.