Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

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:

Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#1 Post by henvu50 »

This code adds an outline effect to the text of the textbutton, but it causes the text to move a few pixels. The expected behavior is that the outline effect gets added without the text moving. When you hover over the imagebutton, it causes the style of textbutton to change.

Anyway to prevent the textbutton from moving when outlines are added through dynamic style change? There's probably a text_style that does it, I just don't know what it is.

Code: Select all

default styleHover = "default05"

screen test50():

    textbutton "hello":
        text_style styleHover
        action NullAction()
 
    # when mouse is over this imagebutton, it will cause the style of the above textbutton to change
    # when mouse unhovers it changes style of the above textbutton back to default
    imagebutton:
        xpos 500
        ypos 500
        idle "a1_idle.png"
        hover "a1_hover.png"
        hovered SetVariable("styleHover", "styleOutlinedText")
        unhovered SetVariable("styleHover", "default05")
        action Jump("offCliff")

style styleOutlinedText:
    size 50
    outlines [ (3, "#000", 0, 0) ]

style default05:
    size 50

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2384
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#2 Post by Ocelot »

Did you try to add same outline to the default style, but drawn with 100% transparency?
< < insert Rick Cook quote here > >

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#3 Post by Imperf3kt »

An alternative would be to add padding/margins to the non-outlined text.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

henvu50
Veteran
Posts: 337
Joined: Wed Aug 22, 2018 1:22 am
Contact:

Re: Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#4 Post by henvu50 »

Ocelot wrote: Wed Jun 16, 2021 4:56 pm Did you try to add same outline to the default style, but drawn with 100% transparency?
No. I'm not sure how to make the outlines transparent? That sounds clever though.

This is my temporary solution in the mean time, but, doing it with transparency seems the more proper way.

This way is more of a hack, using xoffset and yoffset, but it gets it to stay perfectly still.

Code: Select all

style style_nOut:
    size 36
    # outlines [ (2, "#000", 0, 0) ]
    outlines [ (absolute(3), "#000", absolute(0), absolute(0)) ]
    xoffset -2  # move the text back into its original position
    yoffset -1  # move the text back into its original position

style style_nDef:
    size 36
    # outlines [ (0, "#000", 0, 0) ]
    outlines [ (absolute(1), "#000", absolute(0), absolute(0)) ]
Imperf3kt wrote: Wed Jun 16, 2021 6:33 pm An alternative would be to add padding/margins to the non-outlined text.
aah yes! I was gonna try that next just to experiment, to learn styles and stuff.

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2384
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#5 Post by Ocelot »

henvu50 wrote: Wed Jun 16, 2021 6:34 pm No. I'm not sure how to make the outlines transparent? That sounds clever though.
https://www.renpy.org/doc/html/displayables.html
> A color. A color may either be given as a hexadecimal color string in "#rgb", "#rgba", "#rrggbb", or "#rrggbbaa" form, a Color, or an (r, g, b, a) tuple, where each component is an integer between 0 and 255.

You want than a/aa part, which stands for 'alpha' channel, or transpacrency. You can define completely transparent color as "#000F", for example.
< < insert Rick Cook quote here > >

laure44
Regular
Posts: 84
Joined: Mon Mar 08, 2021 10:55 pm
Projects: Arkan'sTower, Gemshine Lorelei!
Location: France
Contact:

Re: Adding outline to a textbutton, as a hover effect, causes the text to shift by a few pixels. Anyway to prevent that?

#6 Post by laure44 »

Setting xanchor and yanchor to 0.5 did the job for me, but I'm not sure if it's the best way to do this.

Code: Select all

    textbutton "hello":
        anchor (0.5, 0.5)
        text_style styleHover
        action NullAction()
The textbutton might not be placed exactly where it's supposed to be but I'm sure that could easily be fixed.

Post Reply

Who is online

Users browsing this forum: Google [Bot]