This was a fun little personal project where the point was to have all effects in the material so that the card’s content could be created like a normal widget blueprint.
The cool method of faking perspective comes from Ghislain Girardot! Basically it creates a pivot position from the screen position and pixel size of the widget, and derives a coordinate system from the normalized mouse position. These are then used to do lots of fancy maths that creates the illusion.
The card is a single widget where the OnMouseMove function is used to pass the normalized mouse position to the material, while also letting us know when the widget is hovered. Very cheap and quite effective!
The flip is a simple X-scale widget animation playing forward/backward to show/hide the card back texture when the scale is 0. In this simple version of the widget the user can select flip speed, texture, color and texts:
I also added some small visual effects in the material like animated glow on hover and a scale+shine click effect.
Another fun thing with this method is that it’s possible to add depth to the effect by adding the UpVector.XY to the UV’s through a mask:
As you can see in this .gif it’s not optimal when using a widget though, since we’re getting the parameter from an entire widget and can’t mask parts of it we don’t want to use for the effect. We can however work around that problem by passing the desired texture to a Texture Parameter in the material and composite it there instead. This allows for a depth effect on any part of the card you would like to have in a texture, with the downside of making it more time consuming to change the layout compared to a pure widget. See additional image for how I ended up doing it.
