Add Navigation Imagebuttons with Text? [Solved]

[Katy133]

I'm trying to add images behind the text buttons in the Main Menu and Game Menu (aka the Navigation screen). The images are .png files of an idle button and a hover button. So far, I've programmed textbuttons in the Navigation screen. But how would I add imagebuttons with text?

A work-around I used to use would be to save buttons with the text already printed onto them. But here, that would add a huge amount of images to make (an idle and hover image for each button, timed by how many buttons with text you want). Plus, it would stop people from being able to change the font for accessibility purposes.

Is there a way to combine text with imagebuttons?

This is the navigation screen:

Code: Select all

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 _("Options") action ShowMenu("preferences")

        if renpy.variant("pc"):

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

        if _in_replay:

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

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()
        
        if renpy.variant("pc"):

            ## The quit button is banned on iOS and unnecessary on Android.
            #textbutton _("Quit") action Quit(confirm=not main_menu)
            #Add confirm choice in Main Menu
            textbutton _("Quit") action Quit(confirm=True)


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

[Imperf3kt]

Sure!
You just need to use an idle_foreground and hover_foreground

Here is an example imagebutton.

Code: Select all

    imagebutton:
        auto 'gui/button/button_base_%s.png'
        hover_foreground Text("yourText", xalign=0.5, yalign=0.5)
        idle_foreground Text("yourText", xalign=0.5, yalign=0.5)
        action yourAction

I use it in a project to make something like this with just two images (_hover and _idle versions of the same image)


You could change the font, color, size, etc even.

[Chiligoat]

Sure!
You just need to use an idle_foreground and hover_foreground

You are a lifesaver. I was looking for something like this just hours ago and figured, eh, I'll just make do without image backgrounds and go with plain textbuttons, and here you are. Thanks!

[Katy133]

Sure!
You just need to use an idle_foreground and hover_foreground

Here is an example imagebutton.

Code: Select all

    imagebutton:
        auto 'gui/button/button_base_%s.png'
        hover_foreground Text("yourText", xalign=0.5, yalign=0.5)
        idle_foreground Text("yourText", xalign=0.5, yalign=0.5)
        action yourAction

I use it in a project to make something like this with just two images (_hover and _idle versions of the same image)
[img]

You could change the font, color, size, etc even.

Thank you SO much, Imperf3kt! I was able to get the effects I wanted with your help!

I deleted this line:

Code: Select all

#textbutton _("Start") action Start()

And replaced it with this, based on your code:

Code: Select all

imagebutton:
                auto "gui/side menu button %s.png"
                idle_foreground Text("Start", font="HoboStd.otf", color="#e066a3", size=40, xalign=0.5, yalign=0.5)
                hover_foreground Text("Start", font="HoboStd.otf", color="#cc0066", size=40, xalign=0.5, yalign=0.5)
                action Start()

I also changed the font/position of the Return button:

Code: Select all

style return_button is navigation_button
#style return_button_text is navigation_button_text
style return_button_text:
    idle_color "#ffffff"

Code: Select all

style return_button:
    #xpos gui.navigation_xpos
    xpos 90
    yalign 1.0
    #yoffset -30