Image button question (solved)

[Smaymay]

Hi there! I'm still new to ren'py and I stumbled upon a problem while coding my title screen menu. I want to replace each idle imagebutton with another hover imagebutton when you hover over it. So I've got several png files with the idle and hover state of each button. I took the xpos and ypos from the idle buttons and pasted them in the code written below.
(The screen resolution is: 1920x1080p)

Code: Select all

# 
screen main_menu:
    
    tag menu 
    add "images/GUI/titlescreen/titlescreen_background.png" 
    
    #Imagebutton code 
    imagebutton auto "images/GUI/titlescreen/newgame_%s.png" xpos 701 ypos 595 focus_mask None action Start() hovered [ Play ("Soundeffect_1", "audio/soundeffects/menu_hover.wav") ]
    imagebutton auto "images/GUI/titlescreen/loadgame_%s.png" xpos 813 ypos 695 focus_mask None action ShowMenu("load") hovered [ Play ("Soundeffect_2", "audio/soundeffects/menu_hover.wav") ]
    imagebutton auto "images/GUI/titlescreen/settings_%s.png" xpos 855 ypos 800 focus_mask None action ShowMenu('preferences') hovered [ Play ("Soundeffect_3", "audio/soundeffects/menu_hover.wav") ]
    imagebutton auto "images/GUI/titlescreen/quit_%s.png" xpos 943 ypos 906 focus_mask None action Quit(confirm=False) hovered [ Play ("Soundeffect_4", "audio/soundeffects/menu_hover.wav") ]

But the hover imagebuttons are way bigger then the idle imagebuttons so ofcourse the xpos and ypos couldn't possibly be the same. I only provided the code with the xpos and ypos from the idle imagebuttons, causing the buttons to appear slightly to the right when you hover over them.



I want to have control over the position where the hover imagebuttons are placed and get the following result:



So basically I want to tell Ren'py "This is the xpos and ypos from your idle imagebutton. When you hover over it replace it with your hover imagebutton at this xpos and ypos. Does anyone have any idea how to achieve this? Or is there maybe another solution to my problem?

Thank you in advance!

[namastaii]

Well, just so you know when you put 'auto' after your imagebutton statement, you're taking that freedom away (of choosing your own hover images)

Easy solution, though.

Code: Select all

imagebutton:
  idle "idle_image.png"
  hover "hover_image.png"
  action ##something

Sorry I forgot to read the bottom half of your post. Honestly what you're asking for...I'm not sure how to do with imagebuttons or if you CAN necessarily but you can easily do that with imagemaps. Make the whole image of the menu before hand then have your hover image have the buttons moved if you want them moved. Which, you can't really move your hover images THAT much since they still need to be under the mouse when you do this. With imagebuttons or hotspots (with imagemaps)

Don't quote me on this but MAYBE you can tell a hovered part of the button to animate. slide over to the left or right slightly or something like that. Does that make sense?
Something like hover "hover.png" at transform_right
but I have no idea if it works that way.

or another option: you could have the idle version of your button have the text centered and then have your hover version aligned to the right side but the button technically stays in the same spot. I think this would be the best for your situation.

[Smaymay]

#namastaii thank you for your response!

I already used imagemaps once and it worked fine just like you said. But I read something at The Ren'Py Handbook about imagebuttons being more efficient (Less coding, fewer and smaller images, etc.)
so I switched from imagemaps to imagebuttons. I'll try your suggestions and we'll see what happens ^.^ Thanks again for answering.

[trooper6]

Or is there maybe another solution to my problem?

The easiest solution to your problem is to have the idle and the hover image be the same size. This is done by cropping the idle image to the dimensions of the hover image, this will result in the idle image having extra transparent space that can't be seen.

If you imagine the underline "_" as a transparent space, make your images like so:

idle: __quit__
hover: _*quit*_

Then you have no issues placing the button with one xpos/ypos

[Smaymay]

#trooper6

Thank you! That is indeed the easiest solution since it doesn't require more coding.
I'll only have to keep in mind that the extra transparent space will probably be interactive due to

Code: Select all

focus_mask None

And if I set it to True the idle button on its own will probably be too small to function properly as an interactive area. But I don't see
that as a problem for now.

I'm still curious to see what I can I achieve with the suggestion from namastaii so I''ll give that a try as well.
Thank you both for your responses.

[trooper6]

#trooper6

Thank you! That is indeed the easiest solution since it doesn't require more coding.
I'll only have to keep in mind that the extra transparent space will probably be interactive due to

Code: Select all

focus_mask None

And if I set it to True the idle button on its own will probably be too small to function properly as an interactive area. But I don't see
that as a problem for now.

I'm still curious to see what I can I achieve with the suggestion from namastaii so I''ll give that a try as well.
Thank you both for your responses.

I do recommend imagebuttons, they are more flexible and more efficient. If you are worried about the button being too small to register with focus_mask True but don't really want focus_mask False, I believe one trick people often do is create a layer that is *almost transparent* but isn't exactly. Something like 1-2% opaque. I did that for a map tile thing I was testing out and it worked well. You make the layer just a bit bigger than the text, or have it fill in the empty space within and between the letters...and all of that should register for hover purposes without making the hover area too big, but wouldn't really be seen by the human eye.

[Smaymay]

#trooper6

That "almost transparent trick" is genius! Thank you for sharing. I think I'll manage to proceed with my code now