Button containing button images and text

[EOWNERDEAD]

I am extremely new to Ren'py, but I've been managing to get a handle on imagebuttons, textbuttons and styles without much of a problem. The one thing I've been playing around with that I simply cannot get a grip on this the 'button' screen interface.

What I am trying to accomplish is the creation of a button that contains an image and a piece of text. When either is in a hovered state, the button should show the hovered version of the image. A visual representation is below:

button example.png (8.55 KiB) Viewed 567 times

The triangle represents the button's idle and hover images while the text is obviously the text. As mentioned, hovering the button or the text should show the image's hovered state.

Taking examples and trying to work backwards has been fruitless, so I tried to start small.

Code: Select all

screen mybutton():
    button:
        action NullAction()
        add "images/2_idle_right.png" xpos 910 ypos 450
        text "The text of the button" xpos 1140 ypos 615

The code above will produce the look I want. But when trying to add a hover image or additional buttons, things start going off the rails.

Code: Select all

    button:
        action NullAction()
        add "images/2_idle_right.png" xpos 910 ypos 450
        text "The text of the button" xpos 1140 ypos 615
        
    button:
        add "images/2_idle_left.png" xpos 700 ypos 445
        text "Left text dklfjakolsdfjlkajslkdjf;alskjf" xpos 710 ypos 615 xalign 1.0
        action NullAction()

The addition of a second button shows both buttons where they are supposed to be, but the right side button's text disappears. This leads me to believe I'm lacking knowledge in something very basic about screens, like those buttons should each be contained in separate frames/windows/etc, and the missing text is being covered by the 2nd button, though why it doesn't cover the first button as well as the text is beyond me. This belief that it is something very basic is also supported by the behavior when I try to add hover images, where the hit box for the hover state is a tiny area on the very left of the first button. Something must be getting covered/masked.

So, this is the problem. To go further, I need to understand how to create two buttons, each with separate text, that have hover and idle images. It will look similar to:

As I said, I'm a rookie and clearly missing a fundamental piece of the button pie here. Any help would be greatly appreciated.

[philat]

Honestly, just make an imagebutton and show the text next to it? Seems like less work overall. That said, it would probably help you to understand how buttons work to add a background to the button (background Solid("#FFF6"), for instance) to see where it is and how large it is.

[EOWNERDEAD]

Totally less work, and something I'm at least familiar with. I've been holding out for a way to get hovering the text to trigger the image's hover state, but if button is going to defy me, imagebutton it will be.

And that's a great idea about giving them a background, as I have no idea what's going on and that may shed some light.

Thank you.