Welcome to the second part of the series on "Let's Build A Simple Visual Novel Game Using Ren'Py"! If you missed out on the first one, no worries! You can view the article below on how to get your Ren'Py environment set up:

Every visual novel game (no matter the platform) has its own unique GUI system. Whether if they have interactive video, special effects, or stunning artwork, there’s no limit on how you can create your GUI system for your game.

What’s amazing about Ren’Py is that when you create your visual novel project, it provides a template of how the GUI will look like based on the color scheme you chose during the creation process. You’re more than welcome to leave the GUI as is. But, I think it’ll be more fun to customize it to our liking 😊

For this tutorial, we’ll focus on changing the background, font, and add some custom text on the About Menu. If you're interested in making advanced customization on your GUI, you can check out the documentation here.

Adding a menu image background

Now that we have our project set up, we can launch our base game to see how it looks. Click Launch Project and you’ll be presented with the following window:

It looks bland, doesn’t it? What’s nice about Ren’Py is that you can customize the menu screen to your liking. If you want to keep the background as is, not a problem! However, if you want to replace the main menu image, you will need to access the gui folder and find the image file main_menu.png. The easiest way to update will be to replace your own image with the same file name within the gui folder.

Once you update your new menu image, launch your project again and you should see your updated menu image. In my case, I used a stock image featuring some nice clouds and tweaked the saturation on my photo editor. This is what it looks like on my end:

Adding your custom font

By default, Ren’Py uses DejaVuSans.ttf as the base font for the visual novel game. However, it can be easily changed by adding our custom font file to our project folder and define the new font style via the gui.rpy file.

For this tutorial, I’m using PTSerif-Regular.ttf that I downloaded from the Google Fonts website. To make your font file accessible in the game, move the file to the game folder where your script files are located. It should look something like this:

Now that we have the file added, it’s time to edit the gui.rpy file. Open up your preferred code editor (I’m using Atom) and scroll down to view the comments section “Fonts and Font Sizes.” Here’s a snapshot of what it looks like:

For the first three lines, we will be changing the default font from DejaVuSans.ttf over to PTSerif-Regular.ttf. It will look like this:

Once you save your file, launch your project from the Ren’Py menu. If done successfully, you should see the updated font style on your GUI. Here’s what it looks like on my end:

If you're feeling adventurous, you can customize your font color and size of the GUI menu. You can check out how to do so by viewing the guide here. As a side note, I've gone ahead in customizing my colors with a slightly darker text, which you will see in the next section and in my next tutorial article when we dive into adding the assets for our game.

Updating our About section

Our GUI menu wouldn't be complete without adding some text about our game! If you launch your project and click About, you'll notice that it provides the name of the game and the version number:

We can add some text to our About page by opening up our options.rpy file within our code editor. Scroll down to the section where it says define gui.about. It should look like this:

Between the triple quotes, you can add as much text as you want within the parentheses. Here is my text that I added for the line:

Save your file, launch the project one more time, and navigate to the About section. You should now see your text added to the section. Here’s what mines look like:

Next Steps

Hooray! Not only we’ve set up our Ren’Py project, but we also managed to customize our GUI menu. For the next tutorial, we’ll start looking into adding the assets for the game and scripting for our visual novel game. Enjoyed this article? Feel free to share and tag me on Twitter.