(Solved) Adding an Image Behind all the Quick Menu Buttons?

[Katy133]

Basically, I'm trying to create a Quick Menu that has an image ("topbar.png", which looks like a bar that appears along the entire span of the top of the screen); then, on top of that image, I want to add an image button ("topbar_idle.png" and "topbar_hover.png"), and the default text buttons.

The problem is that all that appears on the screen is the "topbar.png" image, and all the other buttons are off-screen (to the right of "topbar.png"). I instead want the image button and text buttons to appear on top of "topbar.png". Any tips?

I'm using Ren'Py version 6.99.12 (which includes the new GUI).

This is the Screens code I'm using:

Code: Select all

screen quick_menu():

    # Ensure this appears on top of other screens.
    zorder 100
    
    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.0
        yalign 0.0

        imagemap:
            ground "gui/topbar.png"
        imagebutton idle "gui/topbar_idle.png" hover "gui/topbar_hover.png" action ShowMenu('preferences')
        textbutton _("Back") action Rollback()
        textbutton _("History") action ShowMenu('history')
        textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Q.Save") action QuickSave()
        textbutton _("Q.Load") action QuickLoad()
        textbutton _("Prefs") action ShowMenu('preferences')

init python:
    config.overlay_screens.append("quick_menu")

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.button_text_properties("quick_button")

[Katy133]

UPDATE: I still have the issue, but I've figured out that you can add the ground imagemap, and then place the textbuttons below it (indented beneath the imagemap), and then use xpadding to place the textbuttons where you want them.

The problem with this is that now the "gui/topbar_hover.png" doesn't work anymore, hovering over any of the buttons highlights only the "prefs" text button, and clicking on any button takes you to the "preferences" screen.

What the code loos like now:

Code: Select all

screen quick_menu():
    
    # Ensure this appears on top of other screens.
    zorder 100
    
    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.0
        yalign 0.0

        imagemap:
            ground "gui/topbar.png"
            imagebutton idle "gui/topbar_idle.png" hover "gui/topbar_hover.png" action ShowMenu('history')
            textbutton _("Back") action Rollback() xpadding 240 ypadding 10
            textbutton _("History") action ShowMenu('history') xpadding 330 ypadding 10
            textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True) xpadding 430 ypadding 10
            textbutton _("Auto") action Preference("auto-forward", "toggle") xpadding 520 ypadding 10
            textbutton _("Save") action ShowMenu('save') xpadding 610 ypadding 10
            textbutton _("Q.Save") action QuickSave() xpadding 700 ypadding 10
            textbutton _("Q.Load") action QuickLoad() xpadding 790 ypadding 10
            textbutton _("Prefs") action ShowMenu('preferences') xpadding 880 ypadding 10

[Katy133]

Someone really nice on Twitter helped me out with this problem. I'll post the solution below:

Code: Select all

screen quick_menu():
        # Ensure this appears on top of other screens.
    zorder 100
    
    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.0
        yalign 0.0

        imagemap:
            ground "gui/topbar.png"
            imagebutton idle "gui/topbar_idle.png" hover "gui/topbar_hover.png" action ShowMenu('history')
        textbutton _("Back") action Rollback() xmargin -1000 ypadding 10
        textbutton _("History") action ShowMenu('history') xmargin -900 ypadding 10
        textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True) xmargin -800 ypadding 10
        textbutton _("Auto") action Preference("auto-forward", "toggle") xmargin -700 ypadding 10
        textbutton _("Save") action ShowMenu('save') xmargin -600 ypadding 10
        textbutton _("Q.Save") action QuickSave() xmargin -500 ypadding 10
        textbutton _("Q.Load") action QuickLoad() xmargin -400 ypadding 10
        textbutton _("Prefs") action ShowMenu('preferences') xmargin -300 ypadding 10