Is it possible a texbutton with two colors? Doesn't work the hover color!

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
User avatar
abeplaga
Regular
Posts: 34
Joined: Mon Oct 15, 2018 10:09 am
Contact:

Is it possible a texbutton with two colors? Doesn't work the hover color!

#1 Post by abeplaga » Wed Jun 17, 2020 4:52 pm

Hi, I'm trying to create a textbutton with two colors but I can't! :(

I specify one color in a style, but when putting a second color with a tag on the text... it doesn't work well.

The second color is applied on idle, but not when hover, changing all the text except the second color part with its idle color.

Idle color: Please, DON'T choose me

Actual hover color: Please, DON'T choose me

My desired hover color: Please, DON'T choose me

Is it possible that all the text change his color when hover? How?

Here's my code just in case it's useful!

Code: Select all

textbutton "Please, {color=#ff5a7d}DON'T{/color} choose me" action Return("continue") style "colorfulbutton"

style colorfulbutton is button
style colorfulbutton_text:
    size 12
    color "#1e6dff"
    hover_color "#78008a"

User avatar
MaydohMaydoh
Regular
Posts: 163
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love
Contact:

Re: Is it possible a texbutton with two colors? Doesn't work the hover color!

#2 Post by MaydohMaydoh » Wed Jun 17, 2020 5:55 pm

Not sure if there's a good way to do this but you could use the hover unhover to set a text variable

Code: Select all

default button_text = "{color=#ff5a7d}DON'T{/color}"
textbutton "Please, [button_text] choose me" action Return("continue") style "colorfulbutton":
    hovered SetScreenVariable('button_text', "DON'T")
    unhovered SetScreenVariable('button_text', "{color=#ff5a7d}DON'T{/color}")

strayerror
Regular
Posts: 125
Joined: Fri Jan 04, 2019 3:44 pm
Contact:

Re: Is it possible a texbutton with two colors? Doesn't work the hover color!

#3 Post by strayerror » Wed Jun 17, 2020 8:03 pm

So it seems it is possible to do this in a "Ren'Py" way, however the solution outlined by MaydohMaydoh is IMO considerably more practical in the majority of cases. The following is provided more as a point of interest, a log of my own curiosity and perhaps, just maybe, for specific cases where the additional complexity may be warranted.

By using a vanilla button (rather than a textbutton) we can use sub-displayables (bits of text in this case) which offer us more styling possibilities. Placing text displayables side-by-side used to be a "bad time", however in more recent versions of Ren'Py it's become possible to anchor them using the baseline of the font involved, leading to a near imperceptible difference in appearance. We take advantage of that here by splitting the button text into three constituent parts: pre-dont, dont and post-dont; tweaking the style applied to the middle displayable which lets us pull off this trick.

The rest is just normal style code. The one thing to watch out for is that using the renpy.BASELINE constant means that when positioning your text you're actually positioning the left-hand side of the baseline of the text - not the top-left corner as is usual, so any positioning is likely to need a bump to the ypos or yoffset value to compensate.

Code: Select all

screen test():
    button:
        action Return("continue")
        style "colorfulbutton"
        style_prefix 'colorfulbutton'
        has hbox
        text "Please, "
        text "DON'T" style_suffix 'emtext'
        text " choose me"

style colorfulbutton is button
style colorfulbutton:
    align (.5, .5)

style colorfulbutton_text:
    color "#1e6dff"
    hover_color "#78008a"
    size 12
    yanchor renpy.BASELINE
    ypos .85 # compensate for the fact we're positioning the baseline

style colorfulbutton_emtext is colorfulbutton_text
style colorfulbutton_emtext:
    idle_color "#ff5a7d"
    size 20 # just to show how the baselines will still line up if using different sizes
Hopefully you found this at least interesting, even though it's probably not very practical in your case (or many others!) :)

P.S. My original thought was that a style tag ({=colorfulbutton_emtext}DON'T{/=}) could perhaps be used, however it turns out that the hover_ style prefix is not carried down to it, however it not working is what inspired the approach above.

User avatar
abeplaga
Regular
Posts: 34
Joined: Mon Oct 15, 2018 10:09 am
Contact:

Re: Is it possible a texbutton with two colors? Doesn't work the hover color!

#4 Post by abeplaga » Thu Jun 18, 2020 1:14 pm

MaydohMaydoh wrote:
Wed Jun 17, 2020 5:55 pm
Not sure if there's a good way to do this but you could use the hover unhover to set a text variable

Code: Select all

default button_text = "{color=#ff5a7d}DON'T{/color}"
textbutton "Please, [button_text] choose me" action Return("continue") style "colorfulbutton":
    hovered SetScreenVariable('button_text', "DON'T")
    unhovered SetScreenVariable('button_text', "{color=#ff5a7d}DON'T{/color}")
Very original solution! It would never have occurred to me! Thank you very much!

strayerror wrote:
Wed Jun 17, 2020 8:03 pm
So it seems it is possible to do this in a "Ren'Py" way, however the solution outlined by MaydohMaydoh is IMO considerably more practical in the majority of cases. The following is provided more as a point of interest, a log of my own curiosity and perhaps, just maybe, for specific cases where the additional complexity may be warranted.

By using a vanilla button (rather than a textbutton) we can use sub-displayables (bits of text in this case) which offer us more styling possibilities. Placing text displayables side-by-side used to be a "bad time", however in more recent versions of Ren'Py it's become possible to anchor them using the baseline of the font involved, leading to a near imperceptible difference in appearance. We take advantage of that here by splitting the button text into three constituent parts: pre-dont, dont and post-dont; tweaking the style applied to the middle displayable which lets us pull off this trick.

The rest is just normal style code. The one thing to watch out for is that using the renpy.BASELINE constant means that when positioning your text you're actually positioning the left-hand side of the baseline of the text - not the top-left corner as is usual, so any positioning is likely to need a bump to the ypos or yoffset value to compensate.

Code: Select all

screen test():
    button:
        action Return("continue")
        style "colorfulbutton"
        style_prefix 'colorfulbutton'
        has hbox
        text "Please, "
        text "DON'T" style_suffix 'emtext'
        text " choose me"

style colorfulbutton is button
style colorfulbutton:
    align (.5, .5)

style colorfulbutton_text:
    color "#1e6dff"
    hover_color "#78008a"
    size 12
    yanchor renpy.BASELINE
    ypos .85 # compensate for the fact we're positioning the baseline

style colorfulbutton_emtext is colorfulbutton_text
style colorfulbutton_emtext:
    idle_color "#ff5a7d"
    size 20 # just to show how the baselines will still line up if using different sizes
Hopefully you found this at least interesting, even though it's probably not very practical in your case (or many others!) :)

P.S. My original thought was that a style tag ({=colorfulbutton_emtext}DON'T{/=}) could perhaps be used, however it turns out that the hover_ style prefix is not carried down to it, however it not working is what inspired the approach above.
I did not know that we could put the text like this on a button, thanks for sharing it!

Post Reply

Who is online

Users browsing this forum: Google [Bot]