[SOLVED] Imagebutton with text?

[RicharDann]

I was wondering if there is a way to have imagebuttons show a string over them? I'm making some menu buttons with text that can be translated, I've tried this:

Code: Select all

screen gm_menu():
    
    imagebutton _("Inventory") auto "gm_button_%s.png" action ShowMenu('inv_menu')

But obviously this didn't work. Is there a way to have text appear over an imagebutton?

I suppose I could use a textbutton, but how would I add an image below that would react to the button being hovered and unhovered so it changes like imagebuttons do automatically?

[Donmai]

Images can also be translated.
https://www.renpy.org/doc/html/translat ... anslations

When translating a game, it may be necessary to replace a file with a translate version. For example, if an image contains text, it might make sense to replace it with a version of the image where the text is in another language.

Ren'Py handles this by looking in the translation directory for the image. For example, if the "piglatin" language is in use, and "library.png" is loaded, Ren'Py will use "game/tl/piglatin/library.png" in preference to "game/library.png".

Let's say your game is in English and you have your imagebuttons in game/images/imagebutons/
and your game has, say, a Russian translation, then you will put your Russian imagebuttons in
game/tl/russian/images/imagebuttons/.

[RicharDann]

So as I expected I have to make multiple copies every single imagebutton file for each translation. I didn't want to do it this way hoping to save some space. But now that I think about it, imagebuttons have really small size so it won't make that much of a difference. I'll go with this, thanks Donmai!

[xavimat]

Don't forget that you have the "button" in screens. imagebuttons and textbuttons are made from "button", but "button" is a fixed where you can add what you want: an image, a translatable text on top of it, another text on the corner, another image on the left..., and an "action" when anywhere on the button is clicked.
https://renpy.org/doc/html/screens.html#button

[Donmai]

"Button" is a great interface statement. It's only lacking some good examples of usage in its documentation.

[xavimat]

"Button" is a great interface statement. It's only lacking some good examples of usage in its documentation.

That.

In screens.rpy, in the screen file_slots(title) there are some examples of "button", one of them with a vbox inside of it. But they are a little advanced. I suggest to study those.

[RicharDann]

xavimat, you're totally right! At first I thought button was a kind of hotspot like on imagemaps I didn't imagine it could accept children, this will be indeed very useful, thank you!

[Remix]

Another option (which retains all the benefits of imagebutton, such as alpha mask and the auto toggle for the images) is to just throw the imagebutton and text in a fixed...

Code: Select all

        fixed:
            imagebutton idle "images/btn.png" action Jump('nowhere') xpos 0 ypos 0
            text _("Translate Me") xpos 5 ypos 20

[RVNSN]

I'm missing something, neither of these worked for me. Could you show the code you got to work to display text over an imagebutton, please?

[UPDATE:]

After going back to it with a less weary brain, I finally got it to work using remix's method, as it required almost zero modification to my preexisting code.

The 2 following variations worked out just fine and dandy. And a screenshot to show it in use, if anyone else needs to see an example. Oh, and I used "textbutton" instead of "text", because I have it set to use a certain font.

A big thank you to everyone here!

Code: Select all

screen booty2():
    fixed:
        imagebutton xalign 0.01 ypos 650:
            idle "gui/treasure_chest_gui_idle.png"
            hover "gui/treasure_chest_gui_hover.png"
            action [Show ("booty"), Hide ("booty2")]
        textbutton _("{color=#000000}{size=-20}$[money]{/size}{/color}") xalign 0.085 ypos 760

OR, using the auto variant for imagebutton:

Code: Select all

screen booty2():
    fixed:
        imagebutton auto "gui/treasure_chest_gui_%s.png":
            xalign 0.01
            ypos 650
            action [Show ("booty"), Hide ("booty2")]
        textbutton _("{color=#000000}{size=-20}$[money]{/size}{/color}") xalign 0.085 ypos 760