[SOLVED] Imagemap not showing up?

[smolapplepie]

Hiya! So I'm working on a VN and I really want to make the main menu look pretty by using imagemaps. I followed every tutorial very carefully, but it still doesn't seem to be working? It still shows the default text buttons instead of the imagemaps, so I'm wondering if I did something wrong?

Here's the code from my screens.rpy file:

Code: Select all

################################################################################
## Main and Game Menu Screens
################################################################################

## Navigation screen ###########################################################
##
## This screen is included in the main and game menus, and provides navigation
## to other menus, and to start the game
screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            textbutton _("Start") action Start()

        else:

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Settings") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")

        if renpy.variant("pc"):

            ## The quit button is banned on iOS and unnecessary on Android and
            ## Web.
           textbutton _("Quit") action Quit(confirm=not main_menu)

##############################################################
##############################################################
#############################################################


style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")


## Main Menu screen ############################################################
##
## Used to display the main menu when Ren'Py starts.
##
## https://www.renpy.org/doc/html/screen_special.html#main-menu

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

    imagemap:
        idle "main_menu_idle.jpg"
        hover "main_menu_hover.jpg"
        ground "main_menu_ground.jpg"

        hotspot (44,94,208,86) action Start()
        hotspot (39,182,209,86) action ShowMenu("load")
        hotspot (56,271,220,73) action ShowMenu("settings")
        hotspot (59,356,199,77) action ShowMenu("help")
        #hotspot (39,456,230,89) action ShowMenu("gallery") #gallery will unlock later
        hotspot (58,550,192,74) action Quit("quit")


    style_prefix "main_menu"

    add gui.main_menu_background

    ## 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"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text
style main_menu_frame:
    xsize 280
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -20
    xmaximum 800
    yalign 1.0
    yoffset -20

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")

What it looks like now:


What I really want it to look like:


If there's anyone who could help me with this, or tell me if I did something wrong, I'd appreciate it loads! ;;

[Ocelot]

First of all, remove use navigation — you are not using default navigation screen — and frame: pass — you do not need darkening here.

Second: remove add gui.main_menu_background if your imagemap is the size of the screen. If not, move it before imagemap statement — right now it is drawn after imagemap and completely covers it.

[Per K Grok]

Hiya! So I'm working on a VN and I really want to make the main menu look pretty by using imagemaps. I followed every tutorial very carefully, but it still doesn't seem to be working? It still shows the default text buttons instead of the imagemaps, so I'm wondering if I did something wrong?

-------

What it looks like now:


What I really want it to look like:


If there's anyone who could help me with this, or tell me if I did something wrong, I'd appreciate it loads! ;;

In the code for the main menu you have this line

use navigation

that is what shows the default text buttons, so remove that line or comment it out


#use navigation


Your image map is entered before your background image so the background image would cover the image map. Move the code for the image map to where use navigation is, and hopefully that should fix things.

I've just taken a very quick look so there might be things I've missed, but at least it would give you a place to start.

added:
Opps! Got beaten to the punch here.

[smolapplepie]

Ahhh, it works!! Thanks so much for the help everyone! <3