Hi there, I’m relatively new to Unreal Engine, newer still to UMG, so I decided I’d try to replicate the design of a HUD to familizarize myself with the tools.
However, I found that some of the elements that needed shearing ended up with horribly jagged edges. I saw there were a few people on the answers hub with the same issue, and the problem is that UMG widgets are not subject to post-processing.
Here you can see the very jagged edges on the health and armor bar, all contained within a shear-transformed Canvas object, with horizontal boxes acting as the containers for each individual bar.
I found that several people either suggested projecting my widget into 3D space to subject it to post-processing, or to apply a gradient border to each and every one of my textures. The 3D widget solution did not solve the problem (actually it looked worse), and while the gradient border did slightly solve the issue, I thought “surely there’s a better solution than doing this to every material”
Here is the result with gradient borders applied to the top+bottom of each material
[spoiler]
Do note that any gradient on alpha channel will work to give AA effect, I just did that on shader to demonstrate it there. Also, your material needs to be using translucent blend mode for this to work.
Yes, this was the solution I found, and have been using it above, but I just find it somewhat hard to believe that every UI material needs to go through this process. If every edge is given a gradient border, then your texture never fills the full size of the container it’s in. Specifically, the icon next to my progress bars, I imagine adding the vertical gradient would add a small gap between the icon and the bar, given the gradient.
I hat to resurrect this but I feel like there needs to be more to this. I am sure this is not performant for a large game and surely cannot be how it is handled in Fortnite. I would be interested in getting an engine engineer to chime in here.
