[Tutorial]Custom Backgrounds:Save/Load/Pref/Yes-No/MainMenu

[OokamiKasumi]

How to Customize the Backgrounds for the
Main Menu, Save, Load, Yes/No "Are you sure?", and Preferences Screens
Special Note: This tutorial is meant to be used IN ADDITION to Camille's fantastic tutorial:
[Tutorial] Customizing Menus

Special Note: Always put Backgrounds at the top (or very close to the top) of the code.
-- Ren'Py Code is Additive, as in it Adds each section of code on top of the one before it. If you list the background last, it will cover up and block everything coded before it -- even if the layer is completely transparent!

Let's begin with the easiest and most common way to change your Game Menu (GM) and Main Menu (MM) backgrounds.

When you first open your new game, your Main Menu and Game Menu backgrounds are set to color codes in options.rpy. They're chosen when you select your Theme.

The Main Menu uses mm_root as its background.

options.rpy:

Code: Select all

        ## The background of the main menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        mm_root = "#F7F7FA",

The Save, Load, Preferences and all the Yes/No, or "Are you sure?" use gm_root for their backgrounds.

Code: Select all

        ## The background of the game menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        gm_root = "#F7F7FA",

To change these to an Image, FIRST! Go to script.rpy and declare your images the same way you declare all your other images.

script.rpy

Code: Select all

init: 
    # Declare images below this line, using the image statement.
    # eg. image eileen happy = "eileen_happy.png"
    
    ## -------------- backgrounds --------------------- 
    image bg_mm = "ui/bg_mm.jpg"
    image bg_gm = "ui/bg_gm.jpg"

Note: I keep my GUI images in a file labeled ui, so those images are prefaced with ui/.

Examples:

The Main Menu background.

The Screens or Game Menu background.

Next! In options.rpy, change your color codes to the name you declared:

Code: Select all

        ## The background of the main menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        mm_root = "bg_mm",

        ## The background of the game menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        gm_root = "bg_gm",

Don't forget to keep the commas!

Main Menu Background with Imagemap:
-- If you are using Imagemaps with hotspots for your Main Menu, this still works. However! You'll need to make a TRANSPARENT Ground image for your Imagemap, so that it doesn't cover the Background. This can be a completely transparent .png with absolutely nothing on it, or something that indicates that the option is not available yet.

Images for Main Menu Imagemap on Transparent backgrounds.

Idle

Hover

Ground

Note:

• Idle is your TEXT when no one is touching it.
• Hover is your TEXT when someone puts a mouse pointer over it.
• Ground is what your TEXT sits on, or what shows when the text is not accessible.

Code for an Imagemap Main Menu screens.rpy:

Code: Select all

##############################################################################
# Main Menu 
#
# Screen that's used to display the main menu, when Ren'Py first starts
# http://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu:
    tag menu
    # This ensures that any other menu screen is replaced.

    # The background of the main menu.
    window:
        style "mm_root"

    imagemap:
        ground "ui/mm_ground.png"
        idle "ui/mm_idle.png"
        hover "ui/mm_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 
       
        hotspot (78, 244, 192, 47) action Start()
        hotspot (66, 303, 118, 48) action ShowMenu("load")
        hotspot (17, 355, 215, 58) action ShowMenu("preferences")
        hotspot (17, 418, 215, 57) action ShowMenu("about")
        hotspot (66, 468, 120, 61) action ShowMenu("bonusmenu")
        hotspot (78, 532, 92, 57) action Help()
        hotspot (78, 592, 88, 46) action Quit(confirm=False)
        
init -2 python:
    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"

In the game, it looks like this:

Adding a Specific Preferences Background

Example:

Coding a Preferences Background is done a little differently. In this case, you use the word add, and you actually use the image file's name and extension.

Note: This Code is meant for an 800x600game!

Code: Select all

##############################################################################
# Preferences
    
screen preferences:
    tag menu
    add "ui/Pref_bg.jpg" # The Background image.
    use navigation

Keep in mind you may need to adjust the Margins too.

Code: Select all

init -2 python:
    ## grid -----------
    style.prefs_grid.ypos = 0.15 # To the right.
    style.prefs_grid.xmaximum = 700 # Width of whole grid. 
    style.prefs_grid.xalign = 0.5 # Centered
    
    ## vbox ---------------
    style.pref_vbox.xfill = True
    style.pref_vbox.top_margin = 50 # Space down from the top.

It looks like this:

Note: If you want to change the buttons and text, or find the coordinates of a hotspot, please check out to Camille's fantastic tutorial: [Tutorial] Customizing Menus. There's a working sample game at the end.

To Change the Save and Load backgrounds.

First, make two separate backgrounds:

Adjust the code like so:

Code: Select all

screen save:
    tag menu
    add "ui/sl_save.jpg" # The Background Image
    use navigation
    use file_picker

screen load:
    tag menu
    add "ui/sl_load.jpg" # The Background Image
    use navigation
    use file_picker

To adjust the MARGINS of the Save/Load screens, (and a few other things,) add this directly under it:

Note: This Code is meant for an 800x600game!

Code: Select all

init -2 python:
    ##The save/load slots.
    style.large_button_text.font = "AUBREY1__.TTF"
    style.large_button.background = Frame("ui/save_button_idle.png",5,5)
    style.large_button.hover_background = Frame("ui/save_button_hover.png",5,5)
    style.large_button.selected_background = Frame("ui/save_button_selected.png",5,5)
    style.large_button.selected_hover_background = Frame("ui/save_button_hover.png",5,5)
    style.large_button.yminimum = 50
    style.large_button.ypadding = 3
    
    ## The size of the Save/Load thumbnails
    config.thumbnail_width = 150
    config.thumbnail_height = 100

    style.file_picker_frame = Style(style.menu_frame)

    style.file_picker_frame.top_margin = 85
    style.file_picker_frame.left_margin = 80
    style.file_picker_frame.right_margin = 80
    style.file_picker_frame.bottom_margin = 40

    style.file_picker_nav_button.xalign = 0.5

    style.file_picker_nav_button = Style(style.small_button)
    style.file_picker_nav_button_text = Style(style.small_button_text)

    style.file_picker_button = Style(style.large_button)
    style.file_picker_text = Style(style.large_button_text)

It looks like this:

CAUTION! If you are using an Imagemap for your Navigation Menu, you'll need a Transparent (or mostly transparent) Ground image for your Navigation menu!

Example:

Note: This Code is meant for an 800x600game!

Code: Select all

screen navigation:
        
    ## The various buttons.
    imagemap:
        ground "ui/navigation_ground.png"
        idle "ui/navigation_idle.png"
        hover "ui/navigation_hover.png"
        selected_idle "ui/navigation_selected_idle.png"
        selected_hover "ui/navigation_selected_hover.png"
        
        alpha False # So that your Navigation Menu won't block out the buttons under it.
       
        hotspot (66, 543, 120, 56) action Return() 
        hotspot (191, 544, 88, 55) action ShowMenu("save") 
        hotspot (282, 545, 88, 53) action ShowMenu("load") 
        hotspot (374, 540, 101, 59) action ShowMenu("preferences") 
        hotspot (479, 541, 171, 58) action MainMenu() 
        hotspot (656, 540, 73, 59) action Quit() 
    
init -2 python:
    style.gm_nav_button.size_group = "gm_nav"

Changing the Yes/No "Are you Sure?" BACKGROUNDS.

This is a little more complicated because there are several ways to do this.
-- Note: If you're interested in more ways to do this, a quick search in the Ren'Py Questions and Announcements section of the forum will reveal them.

To Change ONLY the Backgrounds

You begin by making 6 different images OR use 1 image 6 times with 6 different names:
-- And yes, use these names.

yesno_are_you_sure.jpg
yesno_delete_save.jpg
yesno_overwrite_save.jpg
yesno_loading.jpg
yesno_quit.jpg
yesno_main_menu.jpg

Code like so:
Note: This Code is meant for an 800x600game!

Code: Select all

##############################################################################
# Yes/No Prompt

screen yesno_prompt:
    on "show" action With(dissolve)
    modal True

    if message == layout.ARE_YOU_SURE:
        add "yesno_are_you_sure.jpg"
        
    elif message == layout.DELETE_SAVE:
        add "yesno_delete_save.jpg"
        
    elif message == layout.OVERWRITE_SAVE:
        add "yesno_overwrite_save.jpg"
        
    elif message == layout.LOADING:
        add "yesno_loading.jpg"
        
    elif message == layout.QUIT:
        add "yesno_quit.jpg"
        
    elif message == layout.MAIN_MENU:
        add "yesno_main_menu.jpg"

    frame:
        style_group "yesno"
        
    hbox:
        # Buttons
        xalign 0.50 # Centered (Across)
        yalign 0.60 # Just below center (Top to Bottom) 
        spacing 100 # Space between buttons
        
        textbutton _("Yes") action yes_action
        textbutton _("No") action no_action

    text _(message):
        xalign 0.5 # Centered (Across)
        yalign 0.45 # Just above Center (Top to Bottom) 


init -2 python:    
    # The Buttons
    style.yesno_button.size_group = "yesno"
    style.yesno_label_text.text_align = 0.5
    
    # The Frame around the text and buttons. 
    style.yesno_frame.xfill = True
    style.yesno_frame.xmargin = 20 #20px from Right side AND Left side.
    style.yesno_frame.top_margin = 200 # 200px from Top.
    style.yesno_frame.bottom_margin = 200 # 200px from Bottom.

What this looks like:

To change ONLY the Text Messages

Go to screens.rpy and under screen yesno_prompt, and change the code like so:

Code: Select all

    if message == layout.ARE_YOU_SURE:
        label _("Are you really sure you wanna do that?"):
        
    elif message == layout.DELETE_SAVE:
        label _("Do you really wanna Delete this Save?"):
        
    elif message == layout.OVERWRITE_SAVE:
        label _("Are you absolutely sure you wanna Overwrite this Save?"):
        
    elif message == layout.LOADING:
        label _("Are you really sure you wanna Continue with this game? "):
        
    elif message == layout.QUIT:
        label _("You're Quitting? Now way!"):
        
    elif message == layout.MAIN_MENU:
        label _("Are you really sure you want to return to the main menu? You'll lose the spot where you currently are."):

Note: Thank you, ketskari!

To change the Backgrounds AND the Text

Simply combine the codes.

Code: Select all

##############################################################################
# Yes/No Prompt

screen yesno_prompt:
    on "show" action With(dissolve)
    modal True

    if message == layout.ARE_YOU_SURE:
        add "yesno_are_you_sure.jpg"
        label _("Are you really sure you wanna do that?"):
        
    elif message == layout.DELETE_SAVE:
        add "yesno_delete_save.jpg"
        label _("Do you really wanna Delete this Save?"):
        
    elif message == layout.OVERWRITE_SAVE:
        add "yesno_overwrite_save.jpg"
        label _("Are you absolutely sure you wanna Overwrite this Save?"):
        
    elif message == layout.LOADING:
        add "yesno_loading.jpg"
        label _("Are you really sure you wanna Continue with this game? "):
        
    elif message == layout.QUIT:
        add "yesno_quit.jpg"
        label _("You're Quitting? Now way!"):
        
    elif message == layout.MAIN_MENU:
        add "yesno_main_menu.jpg"
        label _("Are you really sure you want to return to the main menu? You'll lose the spot where you currently are."):

    frame:
        style_group "yesno"
        
    hbox:
        # Buttons
        xalign 0.50 # Centered (Across)
        yalign 0.60 # Just below center (Top to Bottom) 
        spacing 100 # Space between buttons
        
        textbutton _("Yes") action yes_action
        textbutton _("No") action no_action

    text _(message):
        xalign 0.5 # Centered (Across)
        yalign 0.45 # Just above Center (Top to Bottom) 

To Change the Background, AND the Text, AND the Yes/No buttons with an IMAGEMAP.

Make the 6 MESSAGES on transparent png backgrounds.
-- And yes, use these names.

yesno_are_you_sure.png
yesno_delete_save.png
yesno_overwrite_save.png
yesno_loading.png
yesno_quit.png
yesno_main_menu.png

Like so:

Plus a background jpg image:

For the Yes and No buttons, make a Hover png and an Idle png with both Yes and No on them:

Code like so:
Note: This Code is meant for an 800x600game!

Code: Select all

##############################################################################
# Yes/No Prompt
    
screen yesno_prompt:
    #on "show" action With(dissolve)
    
    modal True

    imagemap:
        ground 'ui/yesno_ground.jpg' # Background image
        idle 'ui/yesno_idle.png' 
        hover 'ui/yesno_hover.png'
        
        hotspot (202, 374, 179, 125) action yes_action
        hotspot (409, 371, 182, 128) action no_action 

    #text _(message):
        #xalign 0.5
        #yalign 0.5

    if message == layout.ARE_YOU_SURE:
        add "ui/yesno_are_you_sure.png"
        
    elif message == layout.DELETE_SAVE:
        add "ui/yesno_delete_save.png"
        
    elif message == layout.OVERWRITE_SAVE:
        add "ui/yesno_overwrite_save.png"
        
    elif message == layout.LOADING:
        add "ui/yesno_loading.png"
        
    elif message == layout.QUIT:
        add "ui/yesno_quit.png"
        
    elif message == layout.MAIN_MENU:
        add "ui/yesno_main_menu.png" 

It looks like this:

If you are using a Transparent, or mostly transparent image for your Yes/No background, in particular your Quit screen, you may need an additional background image.

When the player clicks the X in the top-right corner to exit from the Main Menu, the Quit prompt will appear. However, if you don't have a full-screen image set for your ground image the blank checkerboard background will appear behind your semi-transparent ground image.

To keep that from happening, use this bit of code for your QUIT:

Code: Select all

    elif message == layout.QUIT:
        add "ui/yesno_quit.png"
        if main_menu:
            add "bg_gm" # your gm_root image.

Thank you Yuucie!

Overlay Screens with NO Background

If you want to make a screen with no background at all, such as a pop-up screen for character stats, or a pop-up menu, create a completely transparent png exactly the size of your game. Name it: blank.png and use it for your Ground image.

Code: Select all

screen special:
    tag menu
    # This ensures that any other menu screen is replaced.

    imagemap:
        ground "ui/blank.png"
        idle "ui/special_idle.png"
        hover "ui/special_hover.png"

In a stats type screen with No Menu, you use add.

Code: Select all

screen special:
    add "ui/blank.png"

Add the rest of your screen code UNDER this.

Enjoy!

[omgitstay]

Thank you!! This helped me so much

[OokamiKasumi]

Thank you!! This helped me so much

My pleasure!
-- We have a ton posted on how to adjust the main menu, but not much on adjusting everything else to match.

I suggest creating a template game that you can copy/paste codes and Graphics from. Then, all you need to do is change the images, and maybe the hotspots, but everything else stays the same. This way you can focus on creating the game, not the GUI.

[Hseo]

Really needed this, 9999 thanks!

[OokamiKasumi]

Really needed this, 9999 thanks!

My pleasure!
-- I love being helpful.

[Giovedi]

Yes.

A thousand times, yes.

This is exactly what a newbie like me needs!

Forgive me if I've overlooked it, but are there any threads in the Creative Commons section offering template GUIs? Making the assets is fun; getting them to work... Ow.

[OokamiKasumi]

Yes. A thousand times, yes. This is exactly what a newbie like me needs!

Excellent! I'm glad I could help.

Forgive me if I've overlooked it, but are there any threads in the Creative Commons section offering template GUIs? Making the assets is fun; getting them to work... Ow.

YES. In fact I link it at the top of this very tutorial: [Tutorial] Customizing Menus
Camille has a downloadable sample game at the end.

[Viobli]

Hello!
Your tutorial really helped me a lot on the Main Menu & Preferences page (I'm working on the Yes-No one and for the Save-Load... I didn't get a single thing v.v Oh well) Anyway, there was one problem I had when I was testing the Yes-No page. Basically, the buttons won't appear D: I tried adding tons of random codes and clearing the cache folder but nothing. Hotspots work finely, but buttons won't show up. Here's the image:

Here's the code I used:

Code: Select all

screen yesno_prompt:
    
    imagemap:
        style_group "yesno"
        ground "ground.png" # Background image
        idle "yesno_idle.png"
        hover "yesno_hover.png"
        
        hotspot (179, 145, 114, 47) action yes_action
        hotspot (478, 144, 115, 49) action no_action 

    #text _(message):
        #xalign 0.5
        #yalign 0.5

    if message == layout.ARE_YOU_SURE:
        add "yesno_areyousure.png"
        
    elif message == layout.DELETE_SAVE:
        add "yesno_deletesave.png"
        
    elif message == layout.OVERWRITE_SAVE:
        add "bg_overwritesave.png"
        
    elif message == layout.LOADING:
        add "yesno_load.png"
        
    elif message == layout.QUIT:
        add "yesno_quit.png"
        
    elif message == layout.MAIN_MENU:
        add "yesno_mainmenu.png"

Thank you very much v.v

[OokamiKasumi]

Hello!
Your tutorial really helped me a lot on the Main Menu & Preferences page (I'm working on the Yes-No one and for the Save-Load... I didn't get a single thing v.v Oh well) Anyway, there was one problem I had when I was testing the Yes-No page. Basically, the buttons won't appear D:
Thank you very much v.v

Did you add this to your coding?

Code: Select all

    modal True

[Viobli]

Hello!
Your tutorial really helped me a lot on the Main Menu & Preferences page (I'm working on the Yes-No one and for the Save-Load... I didn't get a single thing v.v Oh well) Anyway, there was one problem I had when I was testing the Yes-No page. Basically, the buttons won't appear D:
Thank you very much v.v

Did you add this to your coding?

Code: Select all

    modal True

Yup I did.

[OokamiKasumi]

Did you add this to your coding?

Code: Select all

    modal True

Yup I did.

If the hots spots work, but you can't see the graphics, then something is On Top of the graphics making them invisible.

Check your Order.
-- Renpy loads code from Top to Bottom, so whatever is at the Top of the code goes Under the following lines of code. Check and see if the code is loading a graphic on top of your Hover & Idle images.

Navigation, for example, is famous for somehow ending on top of other code and blotting it out entirely -- even when the Navigation ground/background is completely transparent.

[Viobli]

Did you add this to your coding?

Code: Select all

    modal True

Yup I did.

If the hots spots work, but you can't see the graphics, then something is On Top of the graphics making them invisible.

Check your Order.
-- Renpy loads code from Top to Bottom, so whatever is at the Top of the code goes Under the following lines of code. Check and see if the code is loading a graphic on top of your Hover & Idle images.

Navigation, for example, is famous for somehow ending on top of other code and blotting it out entirely -- even when the Navigation ground/background is completely transparent.

Ah, thank you! I realized my problem now and fixed it. It works now

[OokamiKasumi]

If the hots spots work, but you can't see the graphics, then something is On Top of the graphics making them invisible.

Check your Order.
-- Renpy loads code from Top to Bottom, so whatever is at the Top of the code goes Under the following lines of code. Check and see if the code is loading a graphic on top of your Hover & Idle images.

Navigation, for example, is famous for somehow ending on top of other code and blotting it out entirely -- even when the Navigation ground/background is completely transparent.

Ah, thank you! I realized my problem now and fixed it. It works now

Excellent!
-- What was the problem, in case the next person runs into it too?

[Viobli]

If the hots spots work, but you can't see the graphics, then something is On Top of the graphics making them invisible.

Check your Order.
-- Renpy loads code from Top to Bottom, so whatever is at the Top of the code goes Under the following lines of code. Check and see if the code is loading a graphic on top of your Hover & Idle images.

Navigation, for example, is famous for somehow ending on top of other code and blotting it out entirely -- even when the Navigation ground/background is completely transparent.

Ah, thank you! I realized my problem now and fixed it. It works now

Excellent!
-- What was the problem, in case the next person runs into it too?

I put the "Are you sure?" text on a box with the rest of the background transparent, but then from your comment I realized that the box will be on top of the Yes/No buttons making them invisible, therefore I removed the box and then I was able to see the Yes/No buttons.

[riiko08]

This really helped me a lot! Thank you so much for taking the time to make one for us newbies.

I have a question please. My preferences and Save/Load background image doesn't change at all even after copying the codes you used. I'm not sure what I did wrong.

Thank you so much!