Making An Imagebutton's idle image fade to it's hover image?

[Velvetique]

Hey there! So, I'm working on my game and I sort of am hitting a snag in how I want it to look.

So, I have an image button, and as a standard for them they have the idle image and the image for when the mouse hovers on them. It does this switch instantly.

What I'm struggling with is that instead of having it just instantly switch, I'd like if they could fade in and out of eachother, kind of like so (apologies for the ugly gif):



For reference, here's the two images I'm using:
idle

hover


If anyone could help me with this I'd be greatly appreciative!

[dGameBoy101b]

You can use the show button action with the hovered and unhovered attributes of a screen button to switch between two different screens of the idle button and the hovered button to use transitions between the two states. Here is an example.

Code: Select all

screen fadeButtonHover():
    modal false
    tag fadeButton1
    imagebutton:
        idle "button_hover.png"
        unhovered Show("fadeButtonIdle",transition=dissolve)
        action Jump("start")
screen fadeButtonIdle():
    modal false
    tag fadeButton1
    imagebutton:
        idle "button_idle.png"
        hovered Show("fadeButtonHover",transition=dissolve)
        action NullAction()

You can use any transition you want (including custom defined transitions) to switch between the two states or even have different states depending on which direction the button state is switching. This does mean you will have to layer screens for multiple buttons at the same time and ensure that each of those screens have modal set to false with unique tags for each button.

[Velvetique]

Exactly what I was needing, thank you so much! This helps a ton.

[dGameBoy101b]

It might be possible to get this to work using an atl tranform with "on" event handlers, since the transform can be passed "hover" and "idle" events from the button, but I haven't been able to get it to work yet.