[Solved] On hover animation

[Adrian_DVL]

Hi!

I have a section of my game which is like a point and click, for which I'm implementing items that are on the screen waiting for the player to click on them.
My problem is with the transform that goes with the items, which are buttons. I implemented a kind of "shaking" effect, which works well, but I've been trying to make it so that the item stops shaking and goes slightly bigger when the player hovers the mouse over it, but I can't seem to make it work.

Here's my test button:

Code: Select all

imagebutton:
        idle "items/acguinv.png"
        hover "items/acguinvh.png"
        pos (500, 300)
        action [If (len(inventory.items) < 4, true = [SetVariable("item", acgu5), SetField(acgu5, "act", False), Hide("picktt"), item_add], false = NullAction())]
        hovered Show("picktt", item=acgu5, ittt=acgu5.tt, itxpos=500, itypos=300, itxmax=560, itymax=360, itxcen=530, itycen=330)
        unhovered Hide("picktt")
        at itshake(500, 300, 60, 60)

And here's the transform without any test on the stop shaking thing:

Code: Select all

transform itshake(xp, yp, xs, ys):
    on show:
        alpha 0
        linear 0.2 alpha 1.0
        block:
            pos (xp, yp)
            size (xs, ys)
            linear 2.5 pos (xp, yp) size (xs, ys)
            easeout 0.1 pos (xp-5, yp-5) size (xs+10, ys+10)
            easein 0.05 pos (xp, yp) size (xs, ys)
            repeat

As it is now, the button appears with the linear effect and shakes every 2.5 seconds, but, obviously, doesn't stop when the mouse is over it.
I've been trying many things without success. As you can see, the hover image of my button is not the same as the idle one and that's because the last thing I tried was adding an "on replace" block in the transform, without success whatsoever: the button is still shaking when I hover the mouse over it. Can anyone help me? I want the button to stop shaking when the player hovers the mouse over it and start shaking again when the mouse isn't over it anymore.

[Alex]

Try to set 'on idle' event for your transform instead of 'on show'.
Then set 'on hover' event as well.
https://www.renpy.org/doc/html/atl.html#on-statement

[Adrian_DVL]

Try to set 'on idle' event for your transform instead of 'on show'.
Then set 'on hover' event as well.
https://www.renpy.org/doc/html/atl.html#on-statement

'on idle' doesn't work at all, no matter the indentation or the order I put it on, and I'm thinking that's because the transform does not act over the button itself, but it acts over the condition of the button being showed or hidden. I've tried with 'on appear', 'on replace' and 'on replaced' too, as well as using several 'parallel' blocks, with the same outcome.

[_ticlock_]

Hi, Adrian_DVL,

Here is an example with 2 imagebuttons. I used the variable on_hover, that controls which transform is used(itshake or z_zoom). The value of the variable on_hover is used to figure out which imagebutton is hovered (on_hover=1 for first button, on_hover=2 for 2nd button)

Code: Select all

transform itshake(xp, yp, xs, ys):
    zoom 1.2
    alpha 0
    linear 0.2 alpha 1.0 pos (xp, yp) size (xs, ys)
    block:
        pos (xp, yp)
        size (xs, ys)
        linear 2.5 pos (xp, yp) size (xs, ys)
        easeout 0.1 pos (xp-5, yp-5) size (xs+10, ys+10)
        easein 0.05 pos (xp, yp) size (xs, ys)
        repeat
        
transform z_zoom(xp, yp, xs, ys):
    pos (xp, yp)
    size (xs, ys)
    linear 0.5 pos (xp-10, yp-10) size (xs+20, ys+20)


screen test():
    default on_hover = None
    imagebutton:
        idle Solid("#fff")
        hovered SetScreenVariable("on_hover", 1)
        unhovered SetScreenVariable("on_hover", None)
        action Return()
        if on_hover != 1:
            at itshake(500, 300, 60, 60)
        else:
            at z_zoom(500, 300, 60, 60)
    imagebutton:
        idle Solid("#f0f")
        hovered SetScreenVariable("on_hover", 2)
        unhovered SetScreenVariable("on_hover", None)
        action Return()
        if on_hover != 2:
            at itshake(800, 300, 60, 60)
        else:
            at z_zoom(800, 300, 60, 60)
            
label start:
    call screen test

[Adrian_DVL]

Hi, Adrian_DVL,

Here is an example with 2 imagebuttons. I used the variable on_hover, that controls which transform is used(itshake or z_zoom). The value of the variable on_hover is used to figure out which imagebutton is hovered (on_hover=1 for first button, on_hover=2 for 2nd button)

Works as a charm, so thank you very much! For some reason I hadn't thought about using variables to condition one transform or another. I tweaked your system a little bit, for instance making a third transform so I can get rid of the alpha part of itshake when the player unhovers the button, or making more variables (on_hover1, on_hover2), since it's going to be several buttons in the same screen, so I'm happy with the outcome. Thank you!