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 :
Here is a gif of my problem : https://giphy.com/gifs/NdmNZtpy6eQeU4kjog/fullscreen
Thanks for your help !
The easiest fix would probably be to create ‘invisible’ buttons that are in the position where the distorted buttons are displayed, and send events on mouse over to the UI elements so they can react and change accordingly. A more involved, but probably better solution would be to read the pixel value of your distortion texture in and use some math to ‘correct’ the mouse location on click - but I wouldn’t have a clue where to start with this.
Yeah the second solution is what I’m looking for, but I don’t even know how to ‘correct’ the mouse location. Cause as you seen, I’m not looking only for on click, I want hover events too (and the goal is to get the inventory ui in this curve… So the mouse have to be really handled on this curve in order to click/hover/drag).
But thank you for your reply!
Is the map section the only part of your UI that needs mouse interaction? If so you could render out the map UI images with the distortion already applied and ‘fake it’. Let me know if you want me to clarify.
I found a solution to have at least the elemts at the correct position, however if you’ve a very strong distortion it’s not working 100%.
I added some params to offset the widget on y and x and also to scale it on y and x.
I recommend to use a material instance for the retainer because then you can adjust the values easily while playing.
To find good values I copied the content of the retainer and pasted it in a overlay and set the render opacity to something like 0.2, so it’s just overlaying but without the effect of the retainer. Then I can see both the curved widget and the widget without the effect to know where the buttons or other interactable elements are actually hitable. It also helps to have elements everywhere so at top bottom and center, left and right to align it perfectly.
If it’s stretched on one axis more as on the other axis it’s no problem because if you’re done you can scale the retainer box directly in the designer under render transform.
And another small tip. If your Blend mode is set to Translucent change it to AlphaComposite for a better quality.
1 Like
Okay, I tryed this solution, and, it do the trick, but as the UI is moving, the correction is not working. It works only for a sticky UI… As for example, inventory is a moveable window, it does not work…
