[Unity3D] 使用LineRenderer实现尾迹与虚线效果

Unity3D 使用LineRenderer绘制尾迹与虚线

1.添加LineRenderer组件

先创建一个3D对象,然后点击Add Component选项
搜索并添加LineRenderer组件

img

添加完成之后我们就能看到一个突兀的紫色方块出现在了球体旁边,这个就是初始状态(还没孵化出来)的LineRenderder

稍后我们需要使用脚本来控制它的行为

img


2.添加控制脚本

为了控制LineRenderer的行为,我们需要新建一个脚本,就叫MoveTrack好了


完整轨迹脚本

在实现尾迹之前,不妨先了解一下如何使用LineRenderer绘制完整的运动路径

public class MoveTrack : MonoBehaviour
{
    // LineRenderer组件
    LineRenderer lineRenderer;

    void Start()
    {
        // 获取组件
        lineRenderer = GetComponent<LineRenderer>();
        // 重置坐标点数量
        lineRenderer.positionCount = 0;
    }

    void Update()
    {
        // 将当前位置添加到LineRenderer
        lineRenderer.SetPosition(lineRenderer.positionCount++, transform.position);
    }
}

实现的效果

img


尾迹效果脚本

尾迹的实现其实并没有和上面相差太多,上面是记录所有的走过的路径点,而尾迹则只需要记录走过的前几个路径点,让路径点像队列一样先进先出,每次把最早的记录去掉,然后再加入当前的位置坐标,这样就能绘制出固定范围的路径了。

既然思路有了,那么这就写一个脚本试试

// 挂载脚本后可以自动添加LineRenderer
[RequireComponent(typeof(LineRenderer))]

public class MoveTrack : MonoBehaviour
{
    // LineRenderer组件
    LineRenderer lineRenderer;
    // 使用List储存前几个位置的坐标点
    // 由于绘制过程中需要遍历坐标,所以不能直接使用队列
    // 而是用List进行模拟
    List<Vector3> pointList = new List<Vector3>();
    // 需要记录的坐标点的数量
    [SerializeField] int pointSize = 20;

    void Start()
    {
        // 初始化坐标点列表
        InitPointList();
        // 获取LineRenderer组件
        lineRenderer = GetComponent<LineRenderer>();
        // 初始化LineRenderer的坐标点数量
        lineRenderer.positionCount = pointSize;
    }

    void FixedUpdate()
    {
        // 更新坐标点列表
        UpdatePointList();
        // 根据记录的坐标点绘制尾迹
        DrawLine();
    }

    // 初始化坐标点列表
    void InitPointList()
    {
        // 用起始坐标填满列表进行初始化
        for (int i = 0; i < pointSize; i++)
            pointList.Add(transform.position);
    }

    // 更新坐标点列表 (模拟队列方式)
    void UpdatePointList()
    {
        // 移除最后一个坐标点
        pointList.RemoveAt(pointSize - 1);
        // 添加当前坐标点到表头
        pointList.Insert(0, transform.position);
    }

    // 绘制尾迹
    void DrawLine()
    {
        // 遍历坐标点并添加到LineRenderer中
        for (int i = 0; i < pointSize; i++)
            lineRenderer.SetPosition(i, pointList[i]);
    }
}

这样,我们就得到了一个基本的尾迹效果

img


3.修改LineRenderer组件样式

虽然尾迹效果是有了,但目前的样子显然是有点不堪入目不尽人意

不过没关系,因为在组件面板中有非常多的选项可供我们调整
虽然我基本都不会用(逃

所以我们继续来看看如何修改LineRenderer的样式


宽度控制

说到尾迹,那肯定是少不了结尾由粗变细的效果

右键宽度调节窗口上的红线,之后就会出现Add Key选项
(注意,要右键红线位置,不然不会有反应)

img

添加完关键点后,就可以拉曲线来实现不同位置粗细调节的效果了

img

img


颜色调节

在做前几步的时候可能就有小伙伴发现了,为什么在设置里调的颜色不会生效呢?

在设置里稍微往下看看,就能找到一个默认被折叠的选项卡Materials,它就是罪魁祸首。

img

在没有材质的情况下LineRenderer是无法正常渲染的,所以现在我们需要创建一个Material来给他挂上

img

把Material设置上方的Shader设为Sprites/Default
(其实设置成GUI/Text Shader或其他应该也可以,但默认的Standard似乎不行)

img

这样之前设置的颜色就能成功显示出来了

img

此外,Material设置里面也有个Tint选项可以调节颜色,而线条最终的颜色受二者共同影响,而且Tint选项是可以额外调节透明度的

你不觉得这很酷吗?(逃

img


纹理Texture(虚线)

既然都做到这一步了,还局限在调节颜色上怎么能行
我们当然是要搞一个大新闻

所以我们就来试试为它添加Texture

首先依旧是在熟悉的Material,这次把Shader设为GUI/Text Shader
主要是因为我不知道如何给Sprites/Default挂上纹理

修改完后,右边就出现了选择Texture的方框

img

把虚线素材拖进去

虚线素材在这里

注意,要用png格式才能有透明效果

img

最后把LineRenderer的TextureMode修改为Tile,就大功告成了

img

最终效果

img

其实这里可以看出虚线显示在了球体的前面,这是因为GUI/Text Shader无法正确处理遮挡关系。

因此我们可以在GUI/Text Shader下设置完Texture后,再把Shader设置为Sprites/Default

切换后虽然设置界面没有显示纹理,但实际效果是保留下来了,不过具体原理我也不是很了解


关于纹理的补充

如果按照上面的方法,最后却无法正常显示的话可以试着右键你的素材,选择Properties
看看TextureType是否为Default

img

img


本文编辑于2022年10月29日

最后修改于2022年10月30日

posted @ 2022-10-29 16:05  千松  阅读(2884)  评论(0编辑  收藏  举报