UE4流动的箭头曲线实现原理

作者：旺仔好喝

如何能制作出流动的箭头曲线

为什么要做这个箭头

当我们需要表达一个路径的时候，使用路径箭头的方式可以进行一个很好的表达。我们制作一个静态的路径箭头是很容易的，但是我们怎么能做一个流动的箭头路径呢？这里面需要解决的问题：怎么制作出可以动态调整路径的曲线？怎么解决路径上的箭头会受到拉伸、平面中断影响导致箭头不连续的问题？

解决思路

一、可以动态调整路径的曲线

1.创建曲线平面

一般情况下一个平面只有一个四边面如下图：

利用UE4中的SplineMeshActor可以把模型进行弯曲处理，如右图：一个普通平面是不能绘制成曲线的平面。

原因是一个面只有1一个四边面不能做出弯曲的效果。

我们需要对此进行改进。改进的方法是将平面的面数进行提升。如下图：

同上方法使用SplineMeshActor对模型进行弯曲，可以看到很好的利用一个矩形绘制出了一个曲线的效果。而且该组件还能支持Runtime下对Actor的点位进行编辑而达到修改弯曲程度的功能。

2.根据样条线创建曲线平面

首先我们来认识一下样条线，蓝图样条组件只是用于定义和使用位置数据的一个路径。可使用它在世界场景中移动 Actors（或其他 组件），或沿样条放置一系列的 Actors（或其他 组件）。它们可在蓝图视口和关卡编辑器中进行完整编辑，并能添加/移除/复制样条点，变更其切线类型、甚至按 tick 对其设置动画。此外，使用 蓝图构造脚本 也可对它们进行编辑，接受蓝图视口或关卡编辑器中进行的编辑并对它们进行进一步修改。

样条线是一个两点一线的组件，并且可以根据需要增加多个点。如下图：

根据样条线生成曲线平面

一个样条线假设有N条线段，根据N条线段创建N个SplineMeshActor。每个SplineMeshActor的起点都放在这根线段的起点、终点放在这根线段的终点，而且配置对应的旋转。从而达到如下效果：

二、流动的箭头材质

1. 制作一个静态箭头，中间为箭头、边缘为透明，准备PNG格式的图片、将箭头外部的Alpha通道给予到透明层
2. 默认的纹理UV分布是[0,0]~[1,1]，使用Panner节点给予纹理UV时刻向右移动达到箭头流动效果
3. 纹理分布不均的解决，如图可以看到在短的线段上纹理被压缩了，在长的线段上纹理被拉伸了。需要在SplineMeshActor中进行解决。

3.1网格被压缩

假设SplineMeshActor两端的切线为长度为200，SplineMeshActor分别在100、200、600长度下的面片分布情况，如下图：

由上图可知，当SplineMeshActor的长度比起点和终点的切线短时，模型网格中间比两端压缩严重；当SplineMeshActor的长度与起点和终点的切线相当时，模型网格比较一致不压缩；当SplineMeshActor的长度比起点和终点的切线长时，模型网格两端比中间压缩严重。

距离端点越远的地方，面片被缩放的程度越严重。

修改SplineMeshActor起点和终点的切线与线段长度保持一致，保证纹理头尾不被压缩

3.2.纹理被压缩

修改切线后，面片分布均匀，但是纹理还是进行了压缩，是因为纹理还是按照0~1进行分布，对UV进行缩放处理后即可解决。

假设设定箭头的长度为100为单位，当SplineMeshActor长度为50时，UV缩放为2倍；当SplineMeshActor长度为100时，UV设定为1倍；当SplineMeshActor长度为200时，UV缩放为0.5倍，得到如下结果：网格与纹理均匀分布

4.线段间首尾不连贯

将纹理均匀的材质赋予SplineActorMesh后，会发现线段间箭头首尾不连贯。

出现这个问题的原因：每一段样条线的起点都是以为自己的起点开始计算，导致每一段箭头起点处都是蓝色或者浅蓝色。既然已经知道了问题，下一步就是解决问题，我们需要对每一段箭头的起点UV进行偏移，偏移距离是当前线段的起点在整段线段的位置，假设第2段箭头的起点（也就是第2个点）距离起点216单位，再假设我们要做到视觉上箭头长度以100为单位，可以算出第2个点的UV需要向反方向偏移16单位。同理后面的每一段箭头UV都进行偏移达到以下效果。

用途

流动的箭头曲线可根据业务需求表达行动轨迹、维养路线、救援车路径、迁徙路径、逃生路线展示等。

参考：https://docs.unrealengine.com/4.27/zh-CN/BuildingWorlds/BlueprintSplines/Overview/