Imagebutton - transition on interaction

[paych3ck]

Hello! I have the following idea. I would like to make it so that when hovering (and unhovering) over my imagebutton (changing from idle to hover state), the idle image is replaced with the hover image, with the option to add a transition effect (such as dissolve). As far as I understand, this feature is not available by default in the engine. Perhaps someone can guide me on the path to solving my question? In my implementation, I would prefer not to use solutions such as duplicating screens.

[m_from_space]

In my implementation, I would prefer not to use solutions such as duplicating screens.

I suggest using a normal (invisible) button and then just show an image underneath that uses showif statements and therefore can transform itself on hiding and showing.

Code: Select all

transform mytrans:
    alpha 0.0
    on appear:
        linear 0.2 alpha 1.0
    on show:
        linear 0.2 alpha 1.0
    on hide:
        linear 0.2 alpha 0.0
        
screen myscreen():
    default button_hovered = False
    button:
        action NullAction()
        hovered SetScreenVariable("button_hovered", True)
        unhovered SetScreenVariable("button_hovered", False)
        xysize (200, 50) # has to be the same size as the images
        showif button_hovered:
            add "hover_button_image" at mytrans
        else:
            add "idle_button_image" at mytrans