【Renpy Tutorial #08】 Let's make a beautiful GUI for the VN Together! 【II】

In this article, I will continue to complete the creation of the Help Screen

Step 3 - Help Screen

If you already have the keyboard and mouse positions, you can start to locate the position of the help text below

First you need to add below 

screen keyboard_help(): 

screen mouse_help(): and

 screen gamepad_help(): 

       vbox:

            spacing # ( Distance between cells - Example 15)

            xpos # ( Distance from left side of screen to text - example 500)

            ypos # ( Distance from top of screen to text - example 300)

            xmaximum # ( The longest distance the text can reach - example 1200)

            ymaximum # ( The distance the text can reach from the top - example 700)

If it is a 1280 x 720 screen 

If everything is adjusted, it will probably look like this:

The color of text on the right (below Keyboard and Mouse / next to Enter or Space / right,) can be changed by changing the color code behind gui.interface_text_color in gui.rpy (I used #ffffff so the text on the right is white)

To change the Idle/hover/selected color of the Keyboard and Mouse buttons you need to change the code in gui.rpy

# Normal text color when Keyboard and Mouse are not selected #c2bebe is light white/grey

define gui.button_text_idle_color = "#c2bebe"

# The color displayed when the mouse is over the Keyboard and Mouse text #171717 is like black

define gui.button_text_hover_color = "#171717"

# Select the color of the text after Keyboard or Mouse #ffffff is white

define gui.button_text_selected_color = "#ffffff"

It would look like this if I used the same color - preview

So Help Screen is complete! 

Step 4 - Load / Save Screen

I will use the same image in load or save Screen

So I need an image of Idle / a hover / a selected / a selected hover

This is the screen I just made

The load or save screen might look like this

The black frame in the middle is the slot (for picture/archive/reading)

The numbers below ( 1 to 8 ) are different page numbers so 8 x 4 = 32 so the player can save/read up to 32 files in total

After having the picture, the next step is to working with the code

Open screen.rpy and find the location of save and load screen to start 

Delete all the stuff below these 2 screens --> screen save(): and screen load():

After you deleted everything below creen save(): and screen load():

You can type:

    tag menu

    imagemap:

        ground 'Path of image '

        idle 'Path of image'

        hover 'Path of image'

        selected_idle 'Path of image'

        selected_hover 'Path of image'

below your screen save() and screen load()

Because load and save use the same image, you can directly copy the above paragraph and paste it to another screen

After you have placed the correct picture position (path of image), you can reopen the project.

It's just that it can't be used at this time - because the position of the button has not been defined (test it first to make sure that the position of the picture is correct)

If there is no problem, you can put the correct hotspot under the imagemap

(bottom) - this section

Used both in About and Help screen so you can copy it directly from there

The load / save location can be represented by the following code       

hotspot ( Correct hotspot location ) action FileAction(1):

            use load_save_slot(number=1)

Page numbers ( 1 to 8 ) can then be showed by the following code

     -    hotspot ( Correct hotspot location ) action FilePage (pages 1 - 8)

The first page is - hotspot (correct hotspot location) action FilePage (1)

The second page is - hotspot (correct hotspot location) action FilePage (2)

There are 8 pages so there will be 8 lines of stuff like this

After finding the location / writing the code, lets start with screen load_save_slot (other names are also fine)

screen load_save_slot:

    $ file_text = "% s\n  %s" % (FileTime(number, empty=" "), FileSaveName(number))

    add FileScreenshot(number) xpos -Screenshot's X-axis position- ypos -Screenshot's Y-axis position-

    text file_text xpos -X-axis position of text- ypos -Y-axis position of text- size -size of the text-  color "# Color Code"

(Things between - and - and mark as green are things you need to customize)

Then you will also need the following code:

init python:

    config.thumbnail_width = # the width of the screenshot

    config.thumbnail_height = # the height of the screenshot

If there are no errors it will look like this- Preview 

Next, you need to add the words load and save to the load and save screens so that the player can determine which screen they are in.

To add text/sentence in screen, you can use the following code

        text _("Load Data") xpos -X-axis position of text- ypos  -Y-axis position of text-

Change the text of ("here ") you can change the words that actually appear in the game

So the code for the save screen is - text _("Save Data") xpos -X-axis position of text- ypos -Y-axis position of text-

change font color- {color=#Color code} text {/color}

change font size- {size=font size( such as 20，12，32...)} text {/size}

Underline - {u} text {/u}

Example:

        text _("{u}{size=42}{b}Save Data{/b}{/size}{/u}") xpos 500 ypos 8

Text can come like this:

If there are no problems it will look like this - Preview

This way save and load screen are done

All that's left is the usual / most players looking at the screen in the game - text box

Step 5 - Textbox & Namebox

Usually I edit the textbox along with the box with the name

Example - textbox:

Because it feels a little monotonous, I added a flower behind the name box, but you can also add nothing or add a light

After the textbox /name boxes are completed, you can export them and put them in the renpy folder (you can name the picture textbox, so that you can directly replace the original textbox)

It will look like this when you put it in:

Now to relocate where the text/name appears - open gui.rpy

Change the position of the name:

define gui.name_xpos = The x-axis where the name appears

define gui.name_ypos = Y axis where the name appears - the number is negative ( -10 ) because I want to make the name go up a bit

If you want the name to go down a bit it needs to be positive (like 10 )

Change the position of the text:

define gui.dialogue_xpos = The x-axis on which the text appears

define gui.dialogue_ypos = The y-axis on which the text appears

You can also go to screen.rpy and change it, just find screen say in style window / style namebox:

- Here

Change the numbers after xpos and ypos - what it looks like after adjust:

After the position is correct, you need the correct size, color and the range where the text can appear

The following code is in gui.rpy

define gui.text_size = a number - can change the size of the text

define gui.name_text_size = a number - can change the size of the character name

define gui.dialogue_width = the farthest position the text can reach (950 in my words ((I used a 1280 x 720 screen)

To change the color of the name, open script.rpy and add color="#color code" to the character's name

Like this - define e = Character("Eileen", color="#000000")

Then the name Eileen will be black (#000000 = black)

You can check out the color hex code online

To change the color of the text - also change the code in script.rpy

Just add color "color code" below style say_dialogue:

it's here:

It will look like this after changing it all:

Now I just need to change a small place - the font (( I feel that this font is not suitable for this GUI

The font should be changed in gui.rpy - the original code should look like this:

## The font used for in-game text.

define gui.text_font = "DejaVuSans.ttf"

## The font used for character names.

define gui.name_text_font = "DejaVuSans.ttf"

## The font used for out-of-game text.

define gui.interface_text_font = "DejaVuSans.ttf"

Just change the text after =, but before changing the font you need to put the font into the renpy Project folder

After the modification, the part of the textbox is end - Textbox preview

Step 6 - Choice Button

Basically, you only need to prepare the Idle and hover pictures and replace the original Idle and hover pictures with the prepared pictures.

- these 2 (both in the gui / button)

1. choice_idle_background

2. choice_hover_background

Here is the idle and hover image of my button

After replacing the original image, it will look like this:

You can also change the choice to circular like this

If you want to change it to a circle, you will need to change some code

According to the size of the image and the color of the desired font, you can change the above code (in gui.rpy)

((Because they are basically repeated things, so I will put a picture here, if you don’t understand, you can read the above tutorial or leave a message

To change the position where the picture appears, we need screen.rpy

Below screen choice you can find style choice_vbox is vbox If you want the circles to be side by side (left and right) instead of straight (up and down), you can change vbox to hbox, if you are satisfied with top and bottom, you don't need to change the code here

- style choice_vbox is hbox - side by side

The code can be found below

style choice_vbox:

    xalign 0.5 ( Make the picture appear in the middle - you can make changes it to fit your picture )

    ypos 450 ( It also makes the picture appear in the middle - you can change it to fit your picture )

  spacing gui.choice_spacing ( The space between choices can be changed )

- gui.choice_spacing is in gui.rpy

 - define gui.choice_spacing = spacing between choices

My circle choices look like this:

Step 7 - Quick_menu

It is the small texts below the text box. If you want to adjust it, you must first find the screen quick_menu() in screen.rpy:

Like this :

You can use imagemap or imagebutton. I will now use imagebutton for quick menu (because imagemap is already used in other steps above, so I don't repeat it here again)

First of all, you need to prepare pictures for all buttons, you need an idle / a hover / a selected / a selected hover (not necessarily a picture of a selected hover is actually just to see people, I will prepare a special one, but in fact You can also use the same image as a normal hover)

I will put -  back button, load and save, history, skip, auto, back to title and setting button- into the quick menu, so there are 32 pictures in total

After the picture is ready, you can start working with the code

     imagebutton auto "Path of your image_%s.png" action  an action  xpos any Number ypos any Number

- imagebutton - Let renpy know this is an image button

- auto renpy will automatically detect which picture is idle / hover, so remember to use the right name when using auto

- Path of image - It is the place where this picture is saved, for example: gui/button/picture name_%s.Picture format ( such as png or jpg)

- In front Image.png or .jpg must have  %s，If the image name is not _ but simply a blank, then this code will look like this: imagebutton auto "image name (- here is a blank here)%s.png" action 

- action Followed by an instruction like Rollback() ((return to the previous sentence

- xpos and ypos is used to locate the position of an image

- So an Imagebutton code can look like this: 

imagebutton auto "gui/back_%s.png" action Rollback() ypos 500 xpos 400 - Return

Other commonly used actions :

action ShowMenu('load') - Enter load screen

action ShowMenu('save') - Enter save screen

action ShowMenu('history') - Enter the previous dialogue screen

action Skip() alternate Skip(fast=True, confirm=True) - Skip Texts

action Preference("auto-forward", "toggle") - auto forward text

action ShowMenu('main_menu') - back to titel screen

action ShowMenu('preferences') - Enter preferences screen

About imagebutton you can also check Offial Documentation

If there are no errors the screen will look like this - preview

Then I just suddenly noticed that the history screen has not yet been made. So um... this is too long. I will put the history screen tutorial in the next article.

Before you leave this post, Would you like to give me a Like?