[Solved] Hover over img in button (not imagebutton), with text, trigger style of text; while text hover does nothing.

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
henvu50
Veteran
Posts: 337
Joined: Wed Aug 22, 2018 1:22 am
Contact:

[Solved] Hover over img in button (not imagebutton), with text, trigger style of text; while text hover does nothing.

#1 Post by henvu50 »

This button has an image and text. When you hover over the image, it triggers the style of the text; making it bold, changing its color, and adding an outline effect. However, when you hover over the text, nothing happens; which is what I wanted. So if you have like 5 of these buttons and highlight over one of the image's button, its text will appear bold, outlined with color change; a nice effect to confirm selection before click.

(Major thanks to Remix, Angel Seraphim, AxelKong)

Code: Select all

#generic template - highlighting over image triggers text style05. highlighting over text does #nothing; working as a label only.
button:
  idle_background "a1_idle.png"
  focus_mask "a1_idle.png"
  hover_background "a1_hover.png"
  text "hello":
    style "style_05"
  action [jump("bla")]

style style_05:
  hover_color "#A3D"
  hover_bold True
  hover_outlines [(2, "#000", 0, 0)]
This might not seem liek a big deal, but this was extremely, extremely difficult to figure out. It was the hardest thing I've done in Renpy so far. I've designed event systems, complicated dict, list, tuple loops, dry style normalization, good code practice to reduce repetitive variables, but this was the most difficult thing to figure out! lol
Last edited by henvu50 on Fri Jun 18, 2021 8:16 am, edited 2 times in total.

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: How to make button:, with img_idle, img_hover, and text; text hover disabled; img_hover changes text color.

#2 Post by Remix »

Firstly you want to tell the textbutton that the focus area is the background image and not the text.
Then you want to add hover_ settings for the parts you want to change (though I suggest not using bold as that would alter the size of the text part)

The focus_mask displayable will likely mimic your idle_background displayable

Code: Select all

    textbutton "Description":
        focus_mask "a1_idle.png"
        ## Maybe Frame("a1_idle.png", 0, 0) if you want it to expand to fit the text
        idle_background "a1_idle.png"
        action ...
Note: You might need text_ within your style settings so they relate to the text part of the button.
Frameworks & Scriptlets:

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot]