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

[abeplaga]

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"

[MaydohMaydoh]

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]

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.

[abeplaga]

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!

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!