• News

• Industries

• Learning & Support

• Community

• Marketplace # The Mathematic Principle Of Curved HUD

I initially wanted to make a HUD which is similar to the initial interface of Tomorrow’s Ark, and then I found out the way to implement the curved HUD. Although the UV offset method will make the button rendering position not equal to the actual input detection position, which reduces its usefulness, I still hope to understand its principle so that I can change it according to my preferences.
After working on it for a long time, starting from understanding the meaning of TexCoord, I finally understood the principle of curve HUD explained in UMG parabolic distortion effect - UE4 AnswerHub. Seeing that there is no explanation about this principle on the Internet, I thought about posting an article hhh

First of all, we know that changing the UV coordinates changes the coordinates of the entities rendered from the texture to the game. In HUD, texcoord is the UV coordinate of the texture. To make a curve HUD effect, it is necessary to change the UV coordinates of the HUD.
Observing this curve HUD, it is difficult to say whether it has changed in the U direction, but you can be sure that it has moved a certain distance in the V direction. If you want to disassemble its principle, you must at least know the principle of its movement in the V direction.

1.看到 Append 节点后面连着输入参数的 UV，说明我们要将改变后的 U 坐标矩阵和 V 坐标矩阵输入Append 节点

2.看到 Append 节点的第一个输入是 TexCoord 的 R 通道，说明 U 坐标没变，可以专心看 V 坐标了

3.看到 Append 节点的第二个输入是 Add 了一个 TexCoord 的 G 通道，说明这里通过锚点加偏移量算出改变后的 V 坐标，那么 DistortionAmount 前面那部分就是偏移量了

4.看到偏移量用一个 Multiply 得出，那就只能先看乘子，实际算一下他这个是个什么效果
（当然。你可以打开节点预览，但是小于等于0的值会被显示成黑色，所以这不可靠）
（当然如果你真的想看负数的话也可以加一个小的正数再看，这方法挺巧hhh）

As shown in the picture, I have added a comment to the structure of this material.
In some video tutorials on the youtube, nodes are connected from back to front, which is easy to get confused, however it can also be deduced from back to front:

1. See the UV of the input parameter behind the Append node, indicating that we need to input the changed U coordinate matrix and V coordinate matrix into the Append node

2. See that the first input of the Append node is the R channel of TexCoord, indicating that the U coordinate has not changed, so you can focus on the V coordinate

3. See that the second input of the Append node is Add a G channel of TexCoord, which means that the changed V coordinate is calculated by adding the offset to the anchor point, then the part behind the DistortionAmount is the offset

4. See that the offset is obtained with a Multiply, then you can only look at the multiplier first, and actually calculate what effect it is
(of course. You can open the node preview, but the value less than or equal to 0 will be displayed as black , So this is unreliable)
(Of course, if you really want to see negative numbers, you can also add a small positive number and then look at it. This method is quite coincidental hhh)
The first multiplier A, doubles [0,1] and then moves 1/2 length of the length, from [0,1] to [-1,1]
The second multiplier B, [0,1]*[-1,0], is equivalent to x(x-1), and got a parabola (maybe at this time you will find that he is using this parabola)
Simply calculate these two multiplier matrices, and you will find that you have a matrix with smaller absolute values ​​on the left and right elements, larger absolute values ​​on the upper and lower sides, and 0 in the middle.

``````>> [1 1 1;0 0 0;-1 -1 -1]*[0 -0.25 0;0 -0.25 0;0 -0.25 0]

ans =

0   -0.7500         0
0         0         0
0    0.7500         0

>> [1 1 1 1 1;0.5 0.5 0.5 0.5 0.5;0 0 0 0 0;-0.5 -0.5 -0.5 -0.5 -0.5;-1 -1 -1 -1 -1]*[0 -0.125 -0.25 -0.125 0;0 -0.125 -0.25 -0.125 0;0 -0.125 -0.25 -0.125 0;0 -0.125 -0.25 -0.125 0;0 -0.125 -0.25 -0.125 0]

ans =

0   -0.6250   -1.2500   -0.6250         0
0   -0.3125   -0.6250   -0.3125         0
0         0         0         0         0
0    0.3125    0.6250    0.3125         0
0    0.6250    1.2500    0.6250         0
``````

This matrix is to be used as the offset, then you will understand. He uses the value of this parabola as a row vector, tiling the entire plane column by column, and the resulting matrix is used as the offset in the V direction.
According to the rules of multiplication, in this matrix, for the same column, the closer to the upper and lower sides, the value is multiplied by the row vector closer to the upper and lower sides of the multiplier A, that is, multiplied by the number with the larger absolute value, so the absolute value of the elements close to the upper and lower sides is larger. Its performance on UV is the higher the degree of curvature.
According to the nature of the parabola, in this matrix, for the same row, the closer to the middle, the value is multiplied by the more middle column vector in the multiplier B, that is, multiplied by the number with the larger absolute value, so the closer to the middle sides, the absolute value of the value of the element is larger. Its performance on UV is closer to the vertex of the parabola.

I used Matlab to verify my conjecture, and the result is very beautiful

``````%使用矩阵作为演示
%矩阵大小
Num=100;
%扭曲程度
DistortionAmount=0.2;
%R的规律
fun = @(x) x.*(x-1);
%构造R向量
x=linspace(0,1,Num);
R=fun(x);
%构造R矩阵
R1=R;
for i=2:1:Num
R1=[R1;R];
end
%G的规律
%构造G向量
G=-linspace(-1,1,Num);
%构造G矩阵
G1=G;
for i=2:1:Num
G1=[G1;G];
end
G1=G1';
%矩阵相乘
Ans=G1*R1;
%绘图
subplot(2,1,1);
imagesc(Ans);
%应用扭曲程度
Ans=Ans*DistortionAmount;
%普通的G的规律
%构造G向量
G=linspace(0,1,Num);
%构造G矩阵
G2=G;
for i=2:1:Num
G2=[G2;G];
end
Ans=Ans+G2;
%绘图
subplot(2,1,2);
imagesc(Ans);
``````

In theory, if you write the Shader by hand, this operation is very simple, but in case some people just want to implement it in pure blueprint hhh

Knowing these principles, what modifications can we make?
You can make some modifications to the calculation of the offset in the V direction to achieve other effects. For example, if I don’t want a curve, I want a diagonal line, then you know that you need an offset in the form of an absolute value function, which is easy to implement.

This is the first time I post, if there is any non-compliance, please point out, thank you

2 Likes

It may be that the health bars in the example result are just too small, but they seem perfectly straight to me.

I would expect them to look curved, just like your Mathlab gradient sample.

1 Like

I love your background image 