Inconsistent and Flashing Hover Images/Animations

[filthsama]

I've been trying to program a circle button, but the animation and positioning has been wonky thus far and it's driving me crazy. Essentially, it is comprised of two images: one larger white circle and one smaller brown circle. It should theoretically look like this:

theoretical circle button.png (3.51 KiB) Viewed 1266 times

They are separated because of the animation I wanted. When you hover over it, the smaller circle becomes a different color (also a separate image) and becomes bigger. However, I haven't been ideally successful. Whenever I get one part right, something else always goes awry. Here is the code I have been using for now that doesn't have any positioning issues:

Code: Select all

screen circlebuttons:
    zorder 100
    fixed:
        image "circle_back":
            xalign 0.5 yalign 0.5
        button:
            xalign 0.5 yalign 0.5
            add "circle_small"
            action NullAction()
            
image circle_small:
    on idle:
        "gui/circlesmall_idle.png"
        xanchor 0.0 yanchor 0.0
        zoom 1.0
    on hover:
        "gui/circlesmall_hover.png"
        xanchor 0.0 yanchor 0.0
        linear 0.5 zoom 1.1

image circle_back:
    "gui/circle_back.png"
    xalign 0.5 yalign 0.5

The only issue with this code is that the hover animation is inconsistent. For some odd reason, it only works whenever you first hover over the button, and then it just flashes back and forth from the hover and idle images without zooming (and then eventually doesn't sense hovering anymore). If I remove linear 0.5, it's perfectly fine though. However, I'd ideally like to have linear 0.5 be there since the animation I have in mind needs to have a smooth transition. If there's anyway to have this work, that'd be wonderful!

[midgethetree]

I'd try something like

Code: Select all

screen circlebuttons:
    zorder 100
    fixed:
        image "circle_back":
            xalign 0.5 yalign 0.5
        imagebutton at circle_button:
            xalign 0.5 yalign 0.5
            auto "gui/circlesmall_%s.png"
            action NullAction()

image circle_back:
    "gui/circle_back.png"
    xalign 0.5 yalign 0.5

transform circle_button:
    on idle:
        zoom 1.0
    on hover:
        linear 0.5 zoom 1.1

Might need to refiddle with the positioning depending on what your images look like, but the point is applying the on idle/hover events to the button instead of the image should work.

[Captain Monocle]

Try defining each "state" as its own image like this:

Code: Select all

image circle_hovered:
    "gui/circlesmall_hover.png"
    linear 0.5 zoom 1.1

image circle_unhovered:
    zoom 1.1
    "gui/circlesmall_idle.png"
    linear 0.5 zoom 1.0
 
image circle_small:
    on idle:
        "circle_unhovered"
    on hover:
        "circle_hovered"

I've also removed the xanchor 0.0 yanchor 0.0 parts because it doesn't seem to serve any purpose (the default anchor is already (0, 0)).

[filthsama]

I'd try something like

Code: Select all

screen circlebuttons:
    zorder 100
    fixed:
        image "circle_back":
            xalign 0.5 yalign 0.5
        imagebutton at circle_button:
            xalign 0.5 yalign 0.5
            auto "gui/circlesmall_%s.png"
            action NullAction()

image circle_back:
    "gui/circle_back.png"
    xalign 0.5 yalign 0.5

transform circle_button:
    on idle:
        zoom 1.0
    on hover:
        linear 0.5 zoom 1.1

Might need to refiddle with the positioning depending on what your images look like, but the point is applying the on idle/hover events to the button instead of the image should work.

This worked perfectly, thank you so much!

[filthsama]

Well, I thought my living hell was over, but I have discovered a new error.
Whenever the button first shows up, the hover animation works perfectly: it linearly zooms up. However, once the button is hidden and then shows up again, the zoom animation does not work. But, for some odd reason, it still changes images. This happens with both midgethetree's and Captain Monocle's code. Why doesn't it zoom up anymore?

[Captain Monocle]

What do you mean when you say "once the button is hidden"?
How is it hidden/shown in your code?

[filthsama]

What do you mean when you say "once the button is hidden"?
How is it hidden/shown in your code?

Apologies in advance for this long reply. It's a bit of a doozy but I feel like I should explain everything properly.

So after some closer observation, it isn't the fact that they are hidden. It's that once they are selected, they don't perform the zoom animation anymore. Currently how selecting the button works is like this: instead of having a separate selected animation, when the circle buttons are clicked on they show another screen. This is because I want the buttons to be clicked again in order to confirm the player's selection. Also because I want a separate animation to play when they are selected. Here's the code (slightly simplified since there's a few more screens that are shown through these):

Code: Select all

init python:
    def hide_mapscreen():
        renpy.hide_screen ('circlebuttons_select')
        renpy.hide_screen ('circlebuttons')

screen circlebuttons:
    zorder 100
    fixed:
        xpos -114 ypos 20
        image "circle_back":
            xalign 0.5 yalign 0.5
        imagebutton at circlebutton_transform:
            xalign 0.5 yalign 0.5
            auto "gui/map/circlesmall_%s.png"
            action [SetVariable("location","home"), Show('selectlocation')]
    fixed:
        xpos -450 ypos 340
        image "circle_back":
            xalign 0.5 yalign 0.5
        imagebutton at circlebutton_transform:
            xalign 0.5 yalign 0.5
            auto "gui/map/circlesmall_%s.png"
            action [SetVariable("location","city"), Show('selectlocation')]

screen circlebuttons_select:
    zorder 105
    fixed:
        image "circle_back":
            xalign 0.5 yalign 0.5
        if location == "home":
            xpos -114 ypos 20
            imagebutton at selectlocation_transform:
                idle "gui/map/circlesmall_hover.png"
                xalign 0.5 yalign 0.5
                action [hide_mapscreen, Jump("".join([location]))]
        if location == "city":
            xpos -450 ypos 340
            imagebutton at selectlocation_transform:
                idle "gui/map/circlesmall_hover.png"
                xalign 0.5 yalign 0.5
                action [hide_mapscreen, Jump("".join([location]))]

Once the circlebuttons are selected, the zoom button stops working. Even if I hide and show them again.
Here's a gif of exactly what's happening in-game:
download/file.php?mode=view&id=60090
(Sorry for jankiness, I have a slow computer on top of a janky gif, but the problem is still illustrated here.)

[Captain Monocle]

Try adding selected_hover and selected_idle to your ATL events, maybe?

For example:

Code: Select all

transform circle_button:
    on idle, selected_idle:
        # Your idle ATL
    on hover, selected_hover:
        # Your hover ATL

[filthsama]

Try adding selected_hover and selected_idle to your ATL events, maybe?

For example:

Code: Select all

transform circle_button:
    on idle, selected_idle:
        # Your idle ATL
    on hover, selected_hover:
        # Your hover ATL

It works!!! Thank you very much!