SOLVED Adding a picture to a textbutton while hovered (a "pointer")

[tim640]

Hello again!
I am afraid i need to write here once again, haha U_U; I am not even sure if that's a possible option in RenPy, so far my tries haven't got me anywhere eh

So there are my menu textbuttons in a form like this:

Code: Select all

textbutton _("NEW GAME") action Confirm("Start the story from the beginning?", yes=Start(), no=None):
                activate_sound "music/optionsclick.mp3"
                hover_sound "music/hover.mp3"

The styles are also, of course, set to change the textbutton color when you hover over it and such. I was wondering if there's an option (without changing a textbutton to an imagebutton) to add a little picture to the side of the textbutton when it's hovered, like a pointer -


Ideally, i thought of it like of am image you add to a needed menu textbutton. Something like defining the image first like this:

Code: Select all

image pointer:
    "gui/pointer.png"
    xalign 0.2 yalign 0.0

and then adding in to a textbutton, like

Code: Select all

textbutton _("NEW GAME") action Confirm("Start the story from the beginning?", yes=Start(), no=None):
                add image pointer

But i know i am doing it wrong again bc it doesn't work. Any ideas how to realize it?..
Thank you all in advance again!!

UPD: i take it first i need to convert all my textbuttons to buttons and then customize it, but how to make it right? Something like

Code: Select all

  button:
                hbox:
                    image "gui/menupointer.png"
                    textbutton _("NEW GAME") action Confirm("Start the story from the beginning?", yes=Start(), no=None)

works good as a single menu line, but how do i make the image appear just on hover and disappear on unhover?.. Anyone can point me at the right direction so it'd work, please?..

[kivik]

I don't think you should be putting buttons inside buttons - I'm not sure what actually happens, but I don't think you need to do this at all anyway. Also you generally can't dictate how you want the syntax to be unless you're talking about custom functions, you'll typically have to follow Ren'py's syntax and rules of how to do something. Luckily in this case, I think the Ren'py syntax is way simplier.

Now looking at your screenshot, I'm going to guess that you don't have background images for your buttons, that's a good start. You should be able to do what you want with textbutton, a background image and a bit of left padding.

Code: Select all

define pointer_width = 50

style pointer_button is textbutton:
    left_padding pointer_width
    hover_background "gui/menupointer.png"

...

textbutton _("test"):
    style "pointer_button"
    action Null

You need to alter your image so that it's the correct width of the entire button, with empty space where the button text would be. The left_padding needs to be the width of your pointer's original size (excluding the empty space), probably some extra padding as well so it doesn't touch your text.

Then use the pointer_button style (call it whatever you want to actually call it, and make sure it inherits your existing styling). The hover_ property automatically changes the relevant property when the item is being hovered over, so in this case it's hover_background. You can change any textbutton properties by just adding hover_ in front of the property and it'll respond accordingly.

You'll most definitely need to do some tweaking but the core principle is there.

[tim640]

Yesssss thank you, it works perfectly!!
I guess sometimes the solution is way less complicated, huh. I had no idea you can add background just on hover in style properties of a button. Thank you!!

[kivik]

Cool! Yeah sometimes you spend ages trying to get something to work and then someone tells you a builtin feature! I certainly have had that happen to me a good few times