How to GUI in renpy

[DAX]

I have been using an engine called CloudNovel to do my visual novel and I am responsible to do everything including GUI. Recently, I have been quite satisfied with my GUI and I wanted to make a commission out of it. The thing is, CloudNovel do not need any programming or coding so I'm not sure how the stuff works here in renpy. I have absolutely no skills in coding/programming too but what I am interested to do is to draw GUI.

So what I need to know is what is the art assets needed for the GUI in renpy?

I know the basic one will need textbox, option and choices. I am more interested to know about assets needed in the screen. For Main Menu for example, all you need is basically an illustration background (which may and may not have to do with me, depending on the requester) and several buttons.

I don't know about Save/Load screens, Preferences and etcetera... Please help...

And oh, the size for those assets too! Textbox, button, etc...

Here is some of my GUI work.

[wyverngem]

Brush up on your screen language through the documentation, it should help you get started on how to set up the screen. It's really easy to do.

The placeholder images that the GUI generates are in the GUI folder and can be used as a template for your GUI elements. However, you can always customize your elements by defining them in the gui.rpy file. Most of the time it's an easy replacement, but if you have a screen that you want to completely customize you can use style_group "mygroup" to change elements. You just need to have unique names instead of mygroup

Anywhere you see a textbutton in your script you can use imagebutton instead. These imagebuttons just need an idle and hover images. Alt will tell the self-voicing reader what to say for the element on screen.

Code: Select all

            imagebutton:
                idle "gui/button.png"
                hover "gui/button_hover.png"
                alt "Start"
                action Start()

So if you redid your main menu it might look like this:

Code: Select all

screen main_menu():
    ## This ensures that any other menu screen is replaced.
    tag menu
    style_prefix "main_menu"

    add gui.main_menu_background #This is the background in the game folder.

    if main_menu: #Variable that decides if you are on the main menu or not. Otherwise use the default for the other screens.
        add "gui/title.png" xalign 0.5 yalign 0.4
        vbox:
            xalign 0.5 yalign 0.5
            textbutton _("Start") action Start()
            textbutton _("Load") action ShowMenu("load")
            textbutton _("Preferences") action ShowMenu("preferences")
            textbutton _("About") action ShowMenu("about")
            if renpy.variant("pc"):
                ## Help isn't necessary or relevant to mobile devices.
                textbutton _("Help") action ShowMenu("help")
                ## The quit button is banned on iOS and unnecessary on Android.
                textbutton _("Quit") action Quit(confirm=not main_menu)

    else:
        ## This empty frame darkens the main menu.
        frame:
            pass

        ## The use statement includes another screen inside this one. The actual
        ## contents of the main menu are in the navigation screen.
        use navigation

        if gui.show_name:

            vbox:
                text "[config.name!t]":
                    style "main_menu_title"

                text "[config.version]":
                    style "main_menu_version"

This menu uses a conditional branch to display the type of screen. When not the main menu it defaults the the traditional menu, which is used in all your other screens.

You can customize your screen language completely, but be cautious with file_picker. Renpy has a save and load screen, but uses file_picker to display your saves. Depending on which one is being viewed it whether or not the game saves or loads. So when you hit escape you enter the save screen. The game automatically knows that you want to save. So if you customize it remember that save and load specific images and text need to go on the save and load screens. Be careful when moving around elements on file_picker so you don't delete code you need to have your save system functional.

[Sarchalen]

on the surface level, you just replace the images in your game folder from the basic gui to your custom. To customize the layout you modify the script called "screens"