【UE4】顶部旋转方向轴制作

创建RotaionWidget蓝图

​ 创建一个新的文件夹，里面新建两个Widget蓝图，分别用来显示旋转轴 和 旋转轴细节ui。

​ image-20210529213652665

​ W_RotationWidget : 用来设置旋转轴的具体实现；W_UserHUD：用来顶部显示W_RotationWidget。

​ W_RotationWidget详细设计：

先将UI的尺寸设置为Desired，

image-20210529214043721

image-20210529214142987

​ Overlay：重叠

上边是三角形矢量图，下面是坐标轴，资源链接为：

链接：https://pan.baidu.com/s/11ilqdb_ZmhKX0cTwp6xACg
提取码：nois

W_UserHUD设置详情

image-20210529214619918

工作原理

​ 工作原理其实就是：RotationBar的长度设为1500，但是canvas panel 只设置500。要想要有旋转的效果，就要改变这个Image的translation。根据你要选择的方向朝前面，此时的translation X为0。根据Z（Yaw）的旋转，往左边转90度，这时的translation X改变成相应的translationX，这个应根据设置的不同而改变，我这里的是250。

​ 根据这个来得到一个转换关系。

image-20210529220146659

具体蓝图节点

image-20210530100349436

image-20210530100414391

image-20210530100438029

这里Event Tick 来调用事件，这样的做法其实不好，每帧都执行函数，会消耗很大的内存和cpu计算。

可以进行改进，转化为条件激活函数：当Z值改变的时候调用函数，而不用每帧都调用。