Foreground button image transformation refresh [SOLVED]

[tim640]

Good evening!
Yet again i have a question. So i use the "hover_foreground" button line to show a picture near a button which acts like a pointer. But the trouble is that it has an animation as it shows up, and it's not a loop - it supposed to just do it once. And it does - but since the screen isn't updating if you only hovering/unhovering a button, it never does it again (logically), only the first time you hover over a button, and then it just shows the end result of the animation any next time you hover over a button.

Is there a runaround for this so it'd refresh the transform as you unhover the button? The structure i have is a simple one:

a button with a "hover_foreground" named "pointer"

then "image" that shows up above the button and stretches to full lenght:

Code: Select all

image pointer:
    ypos -20
    block:
        "gui/menu/cursor1.png"
        xalign 0.5
        easein_cubic 0.6 xzoom 3.0
    

Since foreground and background don't use Show or Hide statements to display their images, i can't tie the transformation to these events so it'd reset the xzoom on Hide. Also, since what i need is a picture being show above a button when hovered, it doesn't have to be a foreground, actually - it may be just a displayable using renpy.show on "hovered" (then i can use the "hide" event in image transform and use renpy.hide on "unhovered"), but the problem with that is it doesn't tie it's position with the button and uses the image coordinats, and i need it to tie the position to the buttons automatically somehow.

I will be really grateful for the ideas, thank you all for your time and help in advance!

[gas]

I'm not sure, as I'll use another approach (after all, if the arrow don't touch the content, why not simply animate the button itself?), but probably you don't need to set a foreground. A button (not the imagebutton, but 'button') can contain whatever, so more than one reactive image, and one can be your arrow. Use an hbox to have the "background" on the left and the arrow on the right.
I'm not sure if that solve the thing, as I left the idea of reactive interfaces in renpy long ago (and testing make me depressed).

[tim640]

Thank you for the answer!!
Yeah, i tried the button as well, but the problem still stays - because on each other hover after the first one it doesn't start the image transformation block over. I feel like something must be done within the transformation block, so after finishing the transform (but not before the mouse hovers over the button again) every next interaction would start the transform anew rather then showing the end result of the first one, but how?

[Alex]

... Also, since what i need is a picture being show above a button when hovered, it doesn't have to be a foreground, actually - it may be just a displayable using renpy.show on "hovered" (then i can use the "hide" event in image transform and use renpy.hide on "unhovered"), ...

You could try such workaround

Code: Select all

image test_img:
    contains test_img_tr
    
transform test_img_tr:
    
    Solid("#fff")
    size(100, 100)
    0.25
    Solid("#c00")
    size(100, 100)
    0.25
    Null()

screen test_scr():
    default flag = False
    
    fixed:
        align(0.05, 0.05)
        xysize(150,150)
        button:
            align(0.5, 0.5)
            text "TEST !!!11"
            action NullAction()
            hovered SetScreenVariable("flag", True)
            # use unhovered action to interrupt animation when button loses focus
            #unhovered SetScreenVariable("flag", False)
        if flag:
                add "test_img" align(0.5, 0.5)
                # use timer if you need to show animation till the end
                timer 0.5 action SetScreenVariable("flag", False) repeat False

[tim640]

Thank you for your response!
That is definitely a chunky runaround, considering all of my buttons would require a custom piece like that, that's gonna be heavy. I'm going to try one more approach and i think i'll settle down with the idea that it either going to loop just once, or it's going to be bigger.

I think the end approach i'll settle down for now, for anyone reading, is this - for each button i'm gonna use

Code: Select all

hovered Function(renpy.show, "pointernumber1")
unhovered Function(renpy.hide, "poinernumber1")

and just put in the coordinates by hand for each pointer for each button, using "on hide" and "on show" to fix the transform loop issue. Definitely also not the most elegant way, but i guess that's gonna be it for now

Thank you all for the help!

[tim640]

UPD: oh my GOD i can't believe how freaking easy the solution was.

So the problem was that to start over the animation, a screen refresh was needed, right? But forcing a screen refresh would restart the interaction as well, which is not needed. But, for example, after showing a confirm screen, and then closing it, it counts as a screen refresh, but is seemless.

So i added a foreground with the pointer, and after that i also added an empty transient screen:

Code: Select all

hovered ShowTransient("pointers")
unhovered Hide("pointers")

So it seemingly refreshes all the transforms after buttons are unhovered, and with the next interaction the animation of "hover_foreground" image starts anew. I can't believe it took me 2 days to reinvent a wheel, while all was needed is this. Works like a charm. Lol

UPD2: my bad, for some reason this works only if the button action is set to "Confirm"?.. I don't understand this at all.

UPD3: so i understand a bit more, it doesn't depend on "Confirm" action, but somehow it reacts to a transition i have on some buttons

Code: Select all

With(AlphaDissolve(DynamicDisplayable(round_zoomin), reverse=True))

Concretely - to the DynamicDisplayable. So weird.