Save slot hotspots don't work?

[Bto3]

Hello there! I've set up an imagemap layout for my save/load screens, and on both of them, I can't get them to click even though I'm certain I've selected the correct hot spot coords.

Pasting the screens.rpy we have in here first. I was able to get the navigation screen working fine, but I'm stumped about the save/load slots.

Thanks for any help you can give me, and let me know if I can provide anything further. Thanks!

Code: Select all

# This file is in the public domain. Feel free to modify it as a basis
# for your own screens.

# Note that many of these screens may be given additional arguments in the
# future. The use of **kwargs in the parameter list ensures your code will
# work in the future.

##############################################################################
# Say
#
# Screen that's used to display adv-mode dialogue.
# http://www.renpy.org/doc/html/screen_special.html#say
screen say(who, what, side_image=None, two_window=True):

    # Decide if we want to use the one-window or two-window variant.
    if not two_window:

        # The one window variant.
        window:
            id "window"

            has vbox:
                style "say_vbox"

            if who:
                text who id "who"

            text what id "what"

    else:

        # The two window variant.
        vbox:
            style "say_two_window_vbox"

            if who:
                window:
                    style "say_who_window"

                    text who:
                        id "who"

            window:
                id "window"

                has vbox:
                    style "say_vbox"

                text what id "what"

    # If there's a side image, display it above the text.
    if side_image:
        add side_image
    else:
        add SideImage() xalign 0.0 yalign 1.0

    # Use the quick menu.
    use quick_menu


##############################################################################
# Choice
#
# Screen that's used to display in-game menus.
# http://www.renpy.org/doc/html/screen_special.html#choice

screen choice(items):

    window:
        style "menu_window"
        xalign 0.5
        yalign 0.5

        vbox:
            style "menu"
            spacing 2

            for caption, action, chosen in items:

                if action:

                    button:
                        action action
                        style "menu_choice_button"

                        text caption style "menu_choice"

                else:
                    text caption style "menu_caption"

init -2:
    $ config.narrator_menu = True

    style menu_window is default

    style menu_choice is button_text:
        clear

    style menu_choice_button is button:
        xminimum int(config.screen_width * 0.75)
        xmaximum int(config.screen_width * 0.75)


##############################################################################
# Input
#
# Screen that's used to display renpy.input()
# http://www.renpy.org/doc/html/screen_special.html#input

screen input(prompt):

    window style "input_window":
        has vbox

        text prompt style "input_prompt"
        input id "input" style "input_text"

    use quick_menu

##############################################################################
# Nvl
#
# Screen used for nvl-mode dialogue and menus.
# http://www.renpy.org/doc/html/screen_special.html#nvl

screen nvl(dialogue, items=None):

    window:
        style "nvl_window"

        has vbox:
            style "nvl_vbox"

        # Display dialogue.
        for who, what, who_id, what_id, window_id in dialogue:
            window:
                id window_id

                has hbox:
                    spacing 10

                if who is not None:
                    text who id who_id

                text what id what_id

        # Display a menu, if given.
        if items:

            vbox:
                id "menu"

                for caption, action, chosen in items:

                    if action:

                        button:
                            style "nvl_menu_choice_button"
                            action action

                            text caption style "nvl_menu_choice"

                    else:

                        text caption style "nvl_dialogue"

    add SideImage() xalign 0.0 yalign 1.0

    use quick_menu

##############################################################################
# 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():

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

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

    # The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98

        has vbox

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)

init -2:

    # Make all the main menu buttons be the same size.
    style mm_button:
        size_group "mm"



##############################################################################
# Navigation
#
# Screen that's included in other screens to display the game menu
# navigation and background.
# http://www.renpy.org/doc/html/screen_special.html#navigation
screen navigation():
    
# This ensures that any other menu screen is replaced.
    tag menu
    


##Code for save screen imagemap
    imagemap:
        ground "images/menuScreen.png"
        idle "images/menuScreen.png"
        hover "images/menuScreenHover.png"
        cache False

        hotspot (1012, 628, 210, 45) action Return()
        hotspot (404, 631, 213, 40) action ShowMenu("preferences")
        hotspot (5, 627, 152, 45) action ShowMenu("save")
        hotspot (205, 629, 160, 44) action ShowMenu("load")
        textbutton _("Main Menu") action MainMenu()
        hotspot (661, 630, 162, 42) action Quit()


##############################################################################
# Save, Load
#
# Screens that allow the user to save and load the game.
# http://www.renpy.org/doc/html/screen_special.html#save
# http://www.renpy.org/doc/html/screen_special.html#load

# Since saving and loading are so similar, we combine them into
# a single screen, file_picker. We then use the file_picker screen
# from simple load and save screens.

## Save, Load
## Screens that allow the user to save and load the game.

##Save screen starts here
screen save:

    # This ensures that any other menu screen is replaced.
    tag menu
    
    use navigation
    


##Code for save screen imagemap
    imagemap:
        ground "images/savescreen.png"
        idle "images/savescreen.png"
        hover "images/saveoverlay.png"
        cache False
     

                
            hotspot (105, 140, 324, 207) clicked FileSave(1):
                use load_save_slot(number=1)
            hotspot (478, 141, 322, 204) clicked FileSave(2):
                use load_save_slot(number=2)
            hotspot (854, 142, 318, 202) clicked FileSave(3):
                use load_save_slot(number=3)
            hotspot (105, 360, 320, 200) clicked FileSave(4):
                use load_save_slot(number=4)
            hotspot (480, 360, 317, 201) clicked FileSave(5):
                use load_save_slot(number=5)
            hotspot (854, 356, 321, 202) clicked FileSave(6):
                use load_save_slot(number=6)

            hotspot (1070,635,1230,664) action Return():

##Load screen starts here
screen load:

    # This ensures that any other menu screen is replaced.
    tag menu
    
    use navigation
    
    ##Code to add a background image in the load screen
    #add "images/savescreen.png"

##Code for load screen imagemap
    imagemap:
        ground "images/savescreen.png"
        idle "images/savescreen.png"
        hover "images/saveoverlay.png"
        cache False
     
            hotspot (746,67,51,45) clicked FilePage(1):
            hotspot (747,122,50,43) clicked FilePage(2):
            hotspot (747,175,50,46) clicked FilePage(3):
            hotspot (748,231,50,43) clicked FilePage(4):
            hotspot (750,284,45,45) clicked FilePage(5):
            hotspot (749,338,47,47) clicked FilePage(6):
            hotspot (749,390,47,45) clicked FilePage(7):
            hotspot (750,446,47,42) clicked FilePage(8):
            hotspot (750,500,46,44) clicked FilePage(9):
        
        hotspot (108,149,416,336) clicked FileLoad(1):
            use load_save_slot(number=1)
        hotspot (487,149,797,336) clicked FileLoad(2):
            use load_save_slot(number=2)
        hotspot (857,149,1163,336) clicked FileLoad(3):
            use load_save_slot(number=3)
        hotspot (111,365,417,553) clicked FileLoad(4):
            use load_save_slot(number=4)
        hotspot (485,365,790,553) clicked FileLoad(5):
            use load_save_slot(number=5)
        hotspot (860,365,1166,553) clicked FileLoad(6):
            use load_save_slot(number=6)

        hotspot (1070,635,1230,664) action Return()

        
##Code to customize the save slots in the save menu
screen load_save_slot:
    #shows information in the save slot about the saved game file
    $ file_text = "% 2s. %s\n%s" % (
                        FileSlotName(number, 6),
                        FileTime(number, empty=_("Empty Slot")),
                        FileSaveName(number))

    #shows a screenshot of the saved game in the save slot
    add FileScreenshot(number) xpos 220 ypos 20
    text file_text xpos 0 ypos 10 size 40 color "#ffffff" outlines [ (2, "#302B54") ] kerning 2 font "font.ttf"
    
    key "save_delete" action FileDelete(number) #allows the player to delete a saved game file
    
init -2 python:
    config.thumbnail_width = 180 #width of saved game screenshot to appear in the save slot
    config.thumbnail_height = 150 #height of saved game screenshot to appear in the save slot
##############################################################################
# Preferences
#
# Screen that allows the user to change the preferences.
# http://www.renpy.org/doc/html/screen_special.html#prefereces

screen preferences():

    tag menu

    # Include the navigation.
    use navigation

    # Put the navigation columns in a three-wide grid.
    grid 3 1:
        style_group "prefs"
        xfill True

        # The left column.
        vbox:
            frame:
                style_group "pref"
                has vbox

                label _("Display")
                textbutton _("Window") action Preference("display", "window")
                textbutton _("Fullscreen") action Preference("display", "fullscreen")

            frame:
                style_group "pref"
                has vbox

                label _("Transitions")
                textbutton _("All") action Preference("transitions", "all")
                textbutton _("None") action Preference("transitions", "none")

            frame:
                style_group "pref"
                has vbox

                label _("Text Speed")
                bar value Preference("text speed")

            frame:
                style_group "pref"
                has vbox

                textbutton _("Joystick...") action Preference("joystick")


        vbox:
            frame:
                style_group "pref"
                has vbox

                label _("Skip")
                textbutton _("Seen Messages") action Preference("skip", "seen")
                textbutton _("All Messages") action Preference("skip", "all")

            frame:
                style_group "pref"
                has vbox

                textbutton _("Begin Skipping") action Skip()

            frame:
                style_group "pref"
                has vbox

                label _("After Choices")
                textbutton _("Stop Skipping") action Preference("after choices", "stop")
                textbutton _("Keep Skipping") action Preference("after choices", "skip")

            frame:
                style_group "pref"
                has vbox

                label _("Auto-Forward Time")
                bar value Preference("auto-forward time")

                if config.has_voice:
                    textbutton _("Wait for Voice") action Preference("wait for voice", "toggle")

        vbox:
            frame:
                style_group "pref"
                has vbox

                label _("Music Volume")
                bar value Preference("music volume")

            frame:
                style_group "pref"
                has vbox

                label _("Sound Volume")
                bar value Preference("sound volume")

                if config.sample_sound:
                    textbutton _("Test"):
                        action Play("sound", config.sample_sound)
                        style "soundtest_button"

            if config.has_voice:
                frame:
                    style_group "pref"
                    has vbox

                    label _("Voice Volume")
                    bar value Preference("voice volume")

                    textbutton _("Voice Sustain") action Preference("voice sustain", "toggle")
                    if config.sample_voice:
                        textbutton _("Test"):
                            action Play("voice", config.sample_voice)
                            style "soundtest_button"

init -2:
    style pref_frame:
        xfill True
        xmargin 5
        top_margin 5

    style pref_vbox:
        xfill True

    style pref_button:
        size_group "pref"
        xalign 1.0

    style pref_slider:
        xmaximum 192
        xalign 1.0

    style soundtest_button:
        xalign 1.0


##############################################################################
# Yes/No Prompt
#
# Screen that asks the user a yes or no question.
# http://www.renpy.org/doc/html/screen_special.html#yesno-prompt

screen yesno_prompt(message, yes_action, no_action):

    modal True

    window:
        style "gm_root"

    frame:
        style_group "yesno"

        xfill True
        xmargin .05
        ypos .1
        yanchor 0
        ypadding .05

        has vbox:
            xalign .5
            yalign .5
            spacing 30

        label _(message):
            xalign 0.5

        hbox:
            xalign 0.5
            spacing 100

            textbutton _("Yes") action yes_action
            textbutton _("No") action no_action

    # Right-click and escape answer "no".
    key "game_menu" action no_action

init -2:
    style yesno_button:
        size_group "yesno"

    style yesno_label_text:
        text_align 0.5
        layout "subtitle"


##############################################################################
# Quick Menu
#
# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu():

    # Add an in-game quick menu.
    hbox:
        style_group "quick"

        xalign 1.0
        yalign 1.0

        textbutton _("Back") action Rollback()
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Q.Save") action QuickSave()
        textbutton _("Q.Load") action QuickLoad()
        textbutton _("Skip") action Skip()
        textbutton _("F.Skip") action Skip(fast=True, confirm=True)
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        textbutton _("Prefs") action ShowMenu('preferences')

init -2:
    style quick_button:
        is default
        background None
        xpadding 5

    style quick_button_text:
        is default
        size 12
        idle_color "#8888"
        hover_color "#ccc"
        selected_idle_color "#cc08"
        selected_hover_color "#cc0"
        insensitive_color "#4448"

[chocoberrie]

Does your navigation menu imagemap cover the entire screen? You have use navigation for both the save and load screens, so if those imagemaps aren't showing up, maybe that's why.

As for the hotspot issue, your code looks correct to me! I'd definitely double check the hotspot coordinates. You can quickly do this using the developer tools in Ren'Py:

1. Make sure your images are in your game folder. If you have your images in sub-folders within the game folder, make sure that the file name contains this (e.g. GUI/mm/mm_ground.png).
2. Launch your game in Ren’Py.
3. Once your game loads, hit “Shift+D” on your keyboard to pull up the Developer Menu.
4. In the Developer Menu, click on Image Location Picker.
5. Another screen will appear, showing you the locations of your images. Click on any one of the images (ground, idle, or hover states); it doesn’t matter which one you choose since the menu text should be in the same spot on each image.
6. When the image loads, you’ll be able to left-click to draw transparent rectangles around each of the menu text items. In the lower left corner, you’ll see the coordinates as you draw rectangles around each one. These are the hotspot coordinates that you’ll need in your code! **Note: You can only draw one rectangle at a time, so be sure to write down the hotspot coordinates as you go along!
7. Type in the hotspot coordinates for each menu item. Make sure that the coordinates match up with the named menu item in the code.

[Bto3]

Does your navigation menu imagemap cover the entire screen? You have use navigation for both the save and load screens, so if those imagemaps aren't showing up, maybe that's why.

Those are coming up fine and dandy, WITH functioning links.

As for the hotspot issue, your code looks correct to me! I'd definitely double check the hotspot coordinates. You can quickly do this using the developer tools in Ren'Py:

1. Make sure your images are in your game folder. If you have your images in sub-folders within the game folder, make sure that the file name contains this (e.g. GUI/mm/mm_ground.png).
2. Launch your game in Ren’Py.
3. Once your game loads, hit “Shift+D” on your keyboard to pull up the Developer Menu.
4. In the Developer Menu, click on Image Location Picker.
5. Another screen will appear, showing you the locations of your images. Click on any one of the images (ground, idle, or hover states); it doesn’t matter which one you choose since the menu text should be in the same spot on each image.
6. When the image loads, you’ll be able to left-click to draw transparent rectangles around each of the menu text items. In the lower left corner, you’ll see the coordinates as you draw rectangles around each one. These are the hotspot coordinates that you’ll need in your code! **Note: You can only draw one rectangle at a time, so be sure to write down the hotspot coordinates as you go along!
7. Type in the hotspot coordinates for each menu item. Make sure that the coordinates match up with the named menu item in the code.

Yeah that's what I've been doing but even when I click the slots, the game acts like I've only clicked empty space. No hover effect, nothing saved to that slot :Tc

Thanks for your reply! I'll try redoing the hotspots again if I can't find anything else wrong.

ETA: Hey, I referenced your blog while I was trying to debug this! You've got the best little tutorials on there! Thanks for making them

[chocoberrie]

eah that's what I've been doing but even when I click the slots, the game acts like I've only clicked empty space. No hover effect, nothing saved to that slot :Tc

That's so weird D: After redoing the hotspots, hopefully nothing else pops up! I don't see anything wrong with your imagemap coding...

ETA: Hey, I referenced your blog while I was trying to debug this! You've got the best little tutorials on there! Thanks for making them

Aw shucks, thank you! You're very welcome! I'm happy they help I'll be posting more tutorials soon! (I just finished a 5-part series about the NVL textbox.)