[SOLVED] Trouble with hovered animation for choice buttons

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.
Message
Author
User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

[SOLVED] Trouble with hovered animation for choice buttons

#1 Post by Kinmoku » Wed Sep 11, 2019 6:34 am

Hi all,

I'm trying to add some animation to my choice buttons. When hovered, a marker pen strikes through the hovered choice. That is what I want to achieve, but I'm stuck at even the basics.

I thought I would start with a simple dissolve, but even this doesn't work. I have seen on various other posts, people use code similar to this:

Code: Select all

## in script.rpy

image menuchoice = "gui/menuchoice.png"
image blank = "#0000"

image menubutton:
    "menuchoice"
    
    on idle:
        "blank" with Dissolve(0.75, alpha=True)
    on hover:
        "menuchoice" with Dissolve(0.75, alpha=True)
    on selected_idle:
        "menuchoice" with Dissolve(0.75, alpha=True)
    on selected_hover:
        "menuchoice" with Dissolve(0.75, alpha=True)

## in screens.rpy
                button:
                    xysize (575, 80)
                    add "menubutton"
                    action i.action
                    text i.caption
                    background None
This seems to ignore all the "on idle" "on hover" text I've added to the image. If I remove "menuchoice" from the top, then it shows nothing. If I remove "background None" from the button itself, the default GUI button shows up.

Why won't this work?

Also, I have my desired effect ready, but not sure how to implement it/ replace Dissolve.

Code: Select all

transform choicehover:
    crop_relative True
    alpha 0 crop (0,0, 0.0, 1.0)
    linear 0.15 crop (0,0, 0.3, 1.0)
    linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
Any help would be much appreciated!
Last edited by Kinmoku on Tue Oct 08, 2019 4:07 am, edited 2 times in total.

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with ATL images for hovered buttons

#2 Post by hell_oh_world » Wed Sep 11, 2019 6:37 am

Kinmoku wrote:
Wed Sep 11, 2019 6:34 am
Hi all,

I'm trying to add some animation to my choice buttons. When hovered, a marker pen strikes through the hovered choice. That is what I want to achieve, but I'm stuck at even the basics.

I thought I would start with a simple dissolve, but even this doesn't work. I have seen on various other posts, people use code similar to this:

Code: Select all

## in script.rpy

image menuchoice = "gui/menuchoice.png"
image blank = "#0000"

image menubutton:
    "menuchoice"
    
    on idle:
        "blank" with Dissolve(0.75, alpha=True)
    on hover:
        "menuchoice" with Dissolve(0.75, alpha=True)
    on selected_idle:
        "menuchoice" with Dissolve(0.75, alpha=True)
    on selected_hover:
        "menuchoice" with Dissolve(0.75, alpha=True)

## in screens.rpy
                button:
                    xysize (575, 80)
                    add "menubutton"
                    action i.action
                    text i.caption
                    background None
This seems to ignore all the "on idle" "on hover" text I've added to the image. If I remove "menuchoice" from the top, then it shows nothing. If I remove "background None" from the button itself, the default GUI button shows up.

Why won't this work?

Also, I have my desired effect ready, but not sure how to implement it/ replace Dissolve.

Code: Select all

transform choicehover:
    crop_relative True
    alpha 0 crop (0,0, 0.0, 1.0)
    linear 0.15 crop (0,0, 0.3, 1.0)
    linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
Any help would be much appreciated!
Maybe try the image as the background of the button instead of making it a child of the button?

Code: Select all

## in screens.rpy
                button:
                    xysize (575, 80)
                    background "menubutton" ## Use as the background instead
                    action i.action
                    text i.caption

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with ATL images for hovered buttons

#3 Post by Kinmoku » Wed Sep 11, 2019 8:59 am

Maybe try the image as the background of the button instead of making it a child of the button?
I had this originally but it just does the same thing :( No animation.

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with ATL images for hovered buttons

#4 Post by hell_oh_world » Wed Sep 11, 2019 2:12 pm

Kinmoku wrote:
Wed Sep 11, 2019 8:59 am
Maybe try the image as the background of the button instead of making it a child of the button?
I had this originally but it just does the same thing :( No animation.
This one:

Code: Select all

transform choicehover:
    crop_relative True
    alpha 0 crop (0,0, 0.0, 1.0)
    linear 0.15 crop (0,0, 0.3, 1.0)
    linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
    
screen sample_screen:
	button:
                    at choicehover
                    xysize (575, 80)
                    add "menubutton"
                    action i.action
                    text i.caption
                    background None
                    	

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with ATL images for hovered buttons

#5 Post by Kinmoku » Thu Sep 12, 2019 2:58 am

I tried this. It does the effect...but only when the menu appears, not when the button is hovered, which is what I'm after.

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with ATL images for hovered buttons

#6 Post by Kinmoku » Thu Sep 12, 2019 5:13 am

Update:

I have managed to get the button to animate ONCE. So the first time you hover over a button, it works, but then the rest of the game the button swaps like usual.

I want my default button to be blank, so it's currently a blank png. A box appears behind the buttons when the menu pops up instead. Please see attached screenshot. However, you can see the default button background is still appearing! I cannot figure out where to disable these :( The new GUI stuff seems really difficult to customise (unless simple re-skin job).

Anyway, here is my current screen (please ignore "grey" right now as I'm not yet using this):

Code: Select all

screen choice(items):
    style_prefix "choice"
    
    add "menubox" xalign 0.5 yalign 0.4

    vbox:
        for i in items:
            if " (grey)" in i.caption:
                button:
                    action i.action
                    style "menu_choice_grey_button"
                    text i.caption.replace(" (grey)", "") style "menu_choice_grey_text"

            else:
                button:
                    xysize (575, 80)
                    action i.action
                    text i.caption #style "menu_choice_text"

    if (timeout_label is not None) and persistent.timed_choices:
        bar:
            xalign 0.5
            ypos 400
            xsize 740
            value AnimatedValue(old_value=0.0, value=1.0, range=1.0, delay=timeout)

        timer timeout action Jump(timeout_label)

## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = True

style menu_choice_grey_button:
    background "gui/button/choice_idle_background_grey.png"
    hover_background "gui/button/choice_hover_background_grey.png"
    xalign 0.5
    
style menu_choice_grey_text:
    idle_color "#000"
    hover_color "#FFF"
    properties gui.button_text_properties("choice_grey_button")
    yalign 0.5

style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text

style choice_vbox:
    xalign 0.5
    ypos 405
    yanchor 0.5

    spacing gui.choice_spacing

style choice_button:
    properties gui.button_properties("choice_button")
    background "gui/menuchoice_blank.png" ## I added this
    hover_background "hover_anim" ## I added this
    xalign 0.5
    yalign 0.5

style choice_button_text is default:
    properties gui.button_text_properties("choice_button")
Below are my new images and hover animation:

Code: Select all

image menuchoice = "gui/menuchoice.png"
image menuchoice_blank = "gui/menuchoice_blank.png"

image hover_anim:
    "menuchoice_blank" with Dissolve(1.0)
    1.0
    "menuchoice" with Dissolve(1.0)
    
And GUI.rpy:

Code: Select all

## Choice Buttons ##############################################################
##
## Choice buttons are used in the in-game menus.

define gui.choice_button_width = 575
define gui.choice_button_height = 80
define gui.choice_button_tile = False
#define gui.choice_button_borders = Borders(150, 8, 150, 8) ## I have removed this right now as text was squished
define gui.choice_button_text_font = gui.text_font
define gui.choice_button_text_size = gui.text_size
define gui.choice_button_text_xalign = 0.5
define gui.choice_button_text_yalign = 0.5
define gui.choice_button_text_idle_color = "#51504b"
define gui.choice_button_text_hover_color = "#f7f7f6"

define gui.choice_button_xalign = 0.5
define gui.choice_button_yalign = 0.5
From my screenshot, you can also see text is left aligned, not central/ 0.5 as I have set up. I don't know why this is, but even my say_screen text has been aligned to 0.58 to appear central... Something somewhere is overriding everything, but I don't know what. At least the hovered button background is central as desired!

I can't seem to find much on the forums about customising the new GUI, only re-skinning what is there. I really need help :(
Attachments
Screen Shot 2019-09-12 at 11.02.05.png

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with ATL images for hovered buttons

#7 Post by hell_oh_world » Thu Sep 12, 2019 7:25 am

Kinmoku wrote:
Thu Sep 12, 2019 5:13 am
I want my default button to be blank, so it's currently a blank png. A box appears behind the buttons when the menu pops up instead. Please see attached screenshot. However, you can see the default button background is still appearing! I cannot figure out where to disable these :( The new GUI stuff seems really difficult to customise (unless simple re-skin job).

Code: Select all

button:
                xysize (575, 80)
                action i.action
                text i.caption #style "menu_choice_text"
		background None
From my screenshot, you can also see text is left aligned, not central/ 0.5 as I have set up. I don't know why this is, but even my say_screen text has been aligned to 0.58 to appear central... Something somewhere is overriding everything, but I don't know what. At least the hovered button background is central as desired!

Code: Select all


text i.caption style "menu_choice_text"

style menu_choice_text:
	xalign (0.5)
All in all, you need to set the default button background to None to override the default background for buttons, or better remove the style_prefix in the screen. Regarding the alignment, even though it was set up in you config variable that your choice text is 0.5, it will still be misaligned I guess because you did override the default style for choice text. Lemme know if none of this works. :D

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with hovered animation for choice buttons

#8 Post by Kinmoku » Thu Sep 12, 2019 8:36 am

Hey thanks for your help. I tried "background None" again (in the button) and it removes everything, including the hover animation. Removing the style_prefix removes all the button properties, which ideally, I'd like to keep.
hell_oh_world wrote:
Thu Sep 12, 2019 7:25 am
Regarding the alignment, even though it was set up in you config variable that your choice text is 0.5, it will still be misaligned I guess because you did override the default style for choice text. Lemme know if none of this works.
As for the alignments, thanks! It's looking better now. Still don't know what's going on with the say_screen, but that's an issue for another time.

Still stuck on how to get the hover animation to show more than once...

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with hovered animation for choice buttons

#9 Post by hell_oh_world » Thu Sep 12, 2019 8:39 am

Kinmoku wrote:
Thu Sep 12, 2019 8:36 am
Hey thanks for your help. I tried "background None" again (in the button) and it removes everything, including the hover animation. Removing the style_prefix removes all the button properties, which ideally, I'd like to keep.
hell_oh_world wrote:
Thu Sep 12, 2019 7:25 am
Regarding the alignment, even though it was set up in you config variable that your choice text is 0.5, it will still be misaligned I guess because you did override the default style for choice text. Lemme know if none of this works.
As for the alignments, thanks! It's looking better now. Still don't know what's going on with the say_screen, but that's an issue for another time.

Still stuck on how to get the hover animation to show more than once...
What is actually your issue with the hover animation? you mean the hover animation appear once then it keeps the background forever?

If thats the issue maybe you need to set the property unhover_background so that it will reset to default when unhovered. I'm afraid I can't really understand your situation, maybe its my understanding can't cope enough.

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with hovered animation for choice buttons

#10 Post by Kinmoku » Thu Sep 12, 2019 8:52 am

So, the first time a choice button is hovered over, the animation works as it should. If I go and hover over another button in the same menu (or future menus), the hover animation doesn't play anymore, but the hover image ("menuchoice") appears.

I think the issue is with the animation itself. I added "repeat" to this, and it repeats the dissolve (not how I want the animation to look) but continues to work on other buttons and future menus.

Code: Select all

image hover_anim:
    "menuchoice_blank" with Dissolve(1.0)
    1.0
    "menuchoice" with Dissolve(1.0)
    repeat
So I must need some kind of "restart" command, but I don't know what that is. It appears the problem I'm having is because the animation rests on "menuchoice" image.

Current code/ how I want the animation to look:

Code: Select all

image hover_anim:
    "menuchoice_blank" with Dissolve(1.0)
    1.0
    "menuchoice" with Dissolve(1.0)
I hope that makes more sense!

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with hovered animation for choice buttons

#11 Post by hell_oh_world » Thu Sep 12, 2019 8:56 am

Kinmoku wrote:
Thu Sep 12, 2019 8:52 am
So, the first time a choice button is hovered over, the animation works as it should. If I go and hover over another button in the same menu (or future menus), the hover animation doesn't play anymore, but the hover image (gui/menuchoice.png) appears.

I think the issue is with the animation itself. I added "repeat" to this, and it repeats the dissolve (not how I want the animation to look) but continues to work on other buttons and future menus.

Code: Select all

image hover_anim:
    "menuchoice_blank" with Dissolve(1.0)
    1.0
    "menuchoice" with Dissolve(1.0)
    repeat
So I must need some kind of "restart" command, but I don't know what that is. It appears the problem I'm having is because the animation rests on "menuchoice" image.

Current code/ how I want the animation to look:

Code: Select all

image hover_anim:
    "menuchoice_blank" with Dissolve(1.0)
    1.0
    "menuchoice" with Dissolve(1.0)
I hope that makes more sense!
Well for that you need to use events in atl. Event handlers like on hover and on idle...

Code: Select all

image hover_anim:
    on idle:
    	"menuchoice_blank" with Dissolve(1.0)
    on hover:
    	"menuchoice" with Dissolve(1.0)
Heres the doc for that: https://www.renpy.org/doc/html/atl.html#external-events

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with hovered animation for choice buttons

#12 Post by Kinmoku » Thu Sep 12, 2019 10:19 am

hell_oh_world wrote:
Thu Sep 12, 2019 8:56 am
Well for that you need to use events in atl. Event handlers like on hover and on idle...
CODE: SELECT ALL

image hover_anim:
on idle:
"menuchoice_blank" with Dissolve(1.0)
on hover:
"menuchoice" with Dissolve(1.0)
I tried this a while back. It behaves oddly: It shows the default GUI choice button on idle, and nothing on hover.

I saw someone else use this in another thread, so I've no idea why it's not working for me.

Anyway, I've updated the hover_anim to this:

Code: Select all

image hover_anim:
    contains choicehover
    
    
transform choicehover:
    "gui/menuchoice.png"
    
    crop_relative True
    alpha 0 crop (0,0, 0.0, 1.0)
    linear 0.15 crop (0,0, 0.3, 1.0)
    linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
The animation is exactly what I want, but it doesn't solve the "only shows once" issue.

I wonder if this is happening because they're choice buttons and use the same code for all? I'll keep trying to figure it out...

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: Trouble with hovered animation for choice buttons

#13 Post by hell_oh_world » Thu Sep 12, 2019 7:12 pm

Kinmoku wrote:
Thu Sep 12, 2019 10:19 am
hell_oh_world wrote:
Thu Sep 12, 2019 8:56 am
Well for that you need to use events in atl. Event handlers like on hover and on idle...
CODE: SELECT ALL

image hover_anim:
on idle:
"menuchoice_blank" with Dissolve(1.0)
on hover:
"menuchoice" with Dissolve(1.0)
I tried this a while back. It behaves oddly: It shows the default GUI choice button on idle, and nothing on hover.

I saw someone else use this in another thread, so I've no idea why it's not working for me.

Anyway, I've updated the hover_anim to this:

Code: Select all

image hover_anim:
    contains choicehover
    
    
transform choicehover:
    "gui/menuchoice.png"
    
    crop_relative True
    alpha 0 crop (0,0, 0.0, 1.0)
    linear 0.15 crop (0,0, 0.3, 1.0)
    linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
The animation is exactly what I want, but it doesn't solve the "only shows once" issue.

I wonder if this is happening because they're choice buttons and use the same code for all? I'll keep trying to figure it out...
Maybe you can just use the concept of showif statement? I just realized that the atl I modified in your code was an atl inside an image, I thought it was an ordinary transform.

Now back onto the topic, I bet you can use that concept. But if the anim occurs on every button, the fix is you also need to create separate flags for each item, so that it will trigger the hover anim independently.

Code: Select all

transform choicehover:
    on show: ## added an event handler
    	crop_relative True
    	alpha 0 crop (0,0, 0.0, 1.0)
    	linear 0.15 crop (0,0, 0.3, 1.0)
    	linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
    
screen choice(items):
    style_prefix "choice"
    
    add "menubox" xalign 0.5 yalign 0.4
    default is_showable  = False
    vbox:
        for i in items:
            if " (grey)" in i.caption:
                button:
                    action i.action
                    style "menu_choice_grey_button"
                    
                    hovered SetScreenVariable("is_showable", True) ## toggle the flag
                    unhovered SetScreenVariable("is_showable", False)
                    showif is_showable: ## the showif statement that will trigger the event
                    	add "gui/menuchoice.png" at choicehover
                    else:
                    	add "gui/menuchoice_blank.png"
                    	
                    text i.caption.replace(" (grey)", "") style "menu_choice_grey_text"
                    
                    


            else:
                button:
                    xysize (575, 80)
                    action i.action
                    text i.caption #style "menu_choice_text"

User avatar
Kia
Miko-Class Veteran
Posts: 884
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Skype: KiaAzad
Contact:

Re: Trouble with hovered animation for choice buttons

#14 Post by Kia » Sat Sep 14, 2019 1:04 pm

this isn't that complex, just need some fiddling with numbers, give me your marker graphic and I'll see what I can do

User avatar
Kinmoku
Veteran
Posts: 447
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: Trouble with hovered animation for choice buttons

#15 Post by Kinmoku » Mon Oct 07, 2019 11:03 am

hell_oh_world wrote:
Thu Sep 12, 2019 7:12 pm
Maybe you can just use the concept of showif statement? I just realized that the atl I modified in your code was an atl inside an image, I thought it was an ordinary transform.

Now back onto the topic, I bet you can use that concept. But if the anim occurs on every button, the fix is you also need to create separate flags for each item, so that it will trigger the hover anim independently.
Sorry for my slow reply. Life got in the way, but I'm back! So this works but all menu choices hover/ highlight at the same time. Otherwise, it's working just how I want it to.

Here's my current code. It's changed a little to use a frame instead. I'm ignoring the "grey" button right now:

Code: Select all

screen choice(items):
    style_prefix "choice"
    default is_showable  = False
    
    frame:
        xsize None
        ysize None
        xpadding 20
        ypadding 20
        xalign 0.5
        yalign 0.4
        background Frame("gui/menu_frame.png", 44, 44)
            
        vbox:
            yalign 0.41
            
            for i in items:
                if " (grey)" in i.caption:
                    button:
                        action i.action
                        style "menu_choice_grey_button"
                        text i.caption.replace(" (grey)", "") style "menu_choice_grey_text"

                else:
                    button:
                        xysize (575, 80)
                        action i.action                        
                        hovered SetScreenVariable("is_showable", True)
                        unhovered SetScreenVariable("is_showable", False)
                        
                        showif is_showable:
                            add "gui/menuchoice.png" at choicehover
                        else:
                            add "gui/menuchoice_blank.png"
                            
                        text i.caption xalign 0.5 yalign 0.5 style "choice_button_text"

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0)
        linear 0.15 crop (0,0, 0.3, 1.0)
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
        
    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0)
        linear 0.25 crop (0,0, 0.3, 1.0)
        linear 0.15 alpha 0.0 crop(0,0, 0.0, 1.0 )
It seems that the unhovered/ hovered is_showable variable isn't working properly. I tried a few things but couldn't seem to fix it. It's my first time using SetScreenVariable.
Kia wrote:
Sat Sep 14, 2019 1:04 pm
this isn't that complex, just need some fiddling with numbers, give me your marker graphic and I'll see what I can do
If you can help, the more the merrier :)

Post Reply

Who is online

Users browsing this forum: Google [Bot], that_wannabe_cat