UE4 Curved HUD & Mouse Input

842 Views Asked by At

I made a material that allows me to curve my HUD, so give the effect that it is a helmet HUD. The problem with this method is that unfortunately, if I put anything that can be interactive with the mouse, well there is a shift in the position of the mouse. Basically, the widget itself has this curve, but on the other hand the mouse does not take the curve into account, so a button remains (for the mouse) in the same place, whereas visually it is not in the same place. Does anyone have an idea how to resolve this? I really have no idea what I can do to fix this problem.

Here is my material

And here is a little gif of my problem : https://giphy.com/gifs/NdmNZtpy6eQeU4kjog/fullscreen

Thanks for your help!

1

There are 1 best solutions below

1
Danny Hepple On

As you have probably realised, you are transforming the overlying texture for the widget without actually changing the underlying widget itself.

Unless you can actually add a three dimensional skew to the widget which matches the texture, you're going to have problems with selection and I expect further problems when taking into account different screen resolutions. Also the Transform Render Target nodes for UI Widgets are really meant for one-off transformations and not permanent ones.

Here's is a tutorial for the effect you want to achieve without interaction. As you can see, it's just a shader effect and doesn't alter the underlying buttons so unfortunately you can't press anything with the mouse.

https://zaggoth.wordpress.com/2018/11/08/ue4-tutorial-creating-a-parabolic-curved-2d-widget-hud-like-halo-destiny/

Instead of using flat UI components for this, it might be better to use something like a '3D widget interaction component' and attaching to you player camera. These are actually three dimensional objects by nature and might be a better fit for what you're trying to do.

Here's a link to the documentation: https://docs.unrealengine.com/4.27/en-US/InteractiveExperiences/UMG/HowTo/InWorldWidgetInteraction/

Other than this approach, you're going to have to find a way to manually distort the UI Widget which I'm not sure is possible and may end up being a nightmare to maintain.