I’d like to know how can I make a smooth transition between two images that I put in a button style (one for the normal state, and one for the highlighted state), so when I hover over with the mouse the image of the button to change over short amount of time.
Create a new animation and use the keyframe buttons to start the creation of the fade.
Follow this documentation to know more Animation | Unreal Engine Documentation
I’ve looked into this, and the only way I can think of is, creating two buttons one on top of the other, so when I hover over one button it should gradually disappear and the other button would appear.
I’m sure there is another more convenient way of going about it.
Yes, but it’s not as easy as it probably should be, unless UMG still has some tricks up its sleeve I haven’t found yet (which is entirely possible).
You’ll need to make the buttons a new widget class so that you can utilize the ‘on mouse enter’ event. Then, I would create a dynamic material within this button widget so that you can set up a lerp from texture 1 to texture 2 over a short period, which you could drive with an ‘interp to constant’ node. Be sure to set the button’s material instance variable as ‘editable’ and ‘expose on spawn’. Finally, back in your main widget blueprint, you can just place that button widget where you need it and change the material instance’s textures right there.
Of course, then you have to add in what the button should do, when clicked, but this is all entirely doable. It’s not ideal, but doable.