首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >UE4流动的箭头曲线实现原理

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

原创
作者头像
xosg
发布2021-10-27 15:40:24
发布2021-10-27 15:40:24
3.9K0
举报
文章被收录于专栏:Web行业观察Web行业观察

作者:旺仔好喝

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

为什么要做这个箭头

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

解决思路

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

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/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如何能制作出流动的箭头曲线
    • 为什么要做这个箭头
    • 一、可以动态调整路径的曲线
      • 1.创建曲线平面
      • 2.根据样条线创建曲线平面
      • 根据样条线生成曲线平面
    • 二、流动的箭头材质
      • 3.1网格被压缩
      • 3.2.纹理被压缩
      • 4.线段间首尾不连贯
    • 用途
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档