Unity 画虚线

昨天公司老大提出要将寻路的路点用虚线的形式显示出来,刚听到这个问题时,感觉有难度,想了好久没有好的解决方案
于是寻求度娘帮助,网上大部分是用shader 画虚线,但是好像都是显示在屏幕上的,并不是在3D空间中显示的。
偶尔发现一个帖子,只是粗略的说了用LineRenderer,再用贴图即可,说的比较笼统。当时也试了但是
效果不理想,主要原因是自己没有仔细看LineRender的属性,导致没有达到想要的效果,后来仔细想了想,
应该是UV问题导致的。于是就有了下面的解决方案。

首先看效果:
这里写图片描述
解决这个问题需要以下几点
1. 画曲线 画曲线可以使用Itween, 将曲线点计算出来
2. 添加LineRender组件
3. 新建材质line ,材质的纹理是虚线png图片
4. 写脚本将线绘制出来 收工
怎么利用Itween画线?
1.首先下载Itween 插件,ItweenPath
官网地址:http://www.pixelplacement.com/itween/index.php
2. 将Itween类改写在该类里添加这个函数即可

 /// <summary>
    /// 获取曲线
    /// </summary>
    /// <param name="path"></param>
    /// <returns></returns>
    public static List<Vector3> GetCrvePaths(Vector3[] path)
    {
        List<Vector3> paths = new List<Vector3>();
        try
        {

            Vector3[] vector3s = PathControlPointGenerator(path);
            Vector3 prevPt = Interp(vector3s, 0);
            paths.Add(prevPt);
            int SmoothAmount = path.Length * 20;
            for (int i = 1; i <= SmoothAmount; i++)
            {
                float pm = (float)i / SmoothAmount;
                Vector3 currPt = Interp(vector3s, pm);
                prevPt = currPt;
                paths.Add(prevPt);
            }
        }
        catch (System.Exception ex)
        {

        }

        return paths;
    }

3.利用ItweenPath 摆放路点,拿到路点后

 List<Vector3> listPath = new List<Vector3>();
  listPath=   iTween.GetCrvePaths(iTweenPath.GetPath("1")) ;

路点曲线已经解决完毕
这里写图片描述

怎么画曲线?
1. 新建空的GameObject ,添加LineRender组件
2. 新建材质命名line,将虚线png图片做为line的纹理
3. line的shader改为GUI/TextShader
4. line的tiling x y 缩放根据自己情况我这里设置为0.1f,0.1f
5. line 的TextColor 设置为自己想要的颜色
如图:
这里写图片描述
6.LineRender 设置材质为line
7.LineRender TextureMode 设置为Repate Per Segment
这里写图片描述
到此基本上就OK了

另外需要写一些代码

public class TestLine : MonoBehaviour {
    LineRenderer line;
    List<Vector3> listPath = new List<Vector3>();
    // Use this for initialization
    void Start () {
        line = GetComponent<LineRenderer>();
       listPath=   iTween.GetCrvePaths(iTweenPath.GetPath("1")) ;
        line.SetVertexCount(listPath.Count);
        line.SetWidth(0.1f, 0.1f);    
        line.receiveShadows = false;
    }

    // Update is called once per frame
    void Update () {
        for(int i=0;i<listPath.Count;i++)
        {
            line.SetPosition(i, listPath[i]);
        }
    }
}

最后贴出虚线图片
这里写图片描述

Unity实现 UI 虚线效果,通常涉及 UI 系统(如 UGUI 或 TextMeshPro)与图形渲染的结合。由于 Unity 的 UI 系统基于 2D 渲染,实现虚线的方式与 3D 空间中使用 `LineRenderer` 的方法不同。以下是几种常见的实现方式: ### 1. 使用 Unity UI 的 LineRenderer 模拟虚线 虽然 UGUI 的 `Image` 或 `RawImage` 不支持直接绘制虚线,但可以通过创建多个小线段拼接成虚线的形式。例如,通过脚本动态创建多个 `Image` 对象,并设置它们的位置和宽度来模拟虚线。 ```csharp using UnityEngine; using UnityEngine.UI; public class DashedLineUI : MonoBehaviour { public RectTransform lineContainer; // 容器用于放置虚线段 public float segmentLength = 10f; // 虚线段长度 public float gapLength = 5f; // 虚线段之间的间隙 public float lineWidth = 2f; // 线宽 public Color lineColor = Color.black; public void DrawDashedLine(Vector2 startPoint, Vector2 endPoint) { float distance = Vector2.Distance(startPoint, endPoint); Vector2 direction = (endPoint - startPoint).normalized; float angle = Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg; float currentDistance = 0f; while (currentDistance + segmentLength <= distance) { GameObject lineSegment = new GameObject("LineSegment"); lineSegment.transform.SetParent(lineContainer, false); Image image = lineSegment.AddComponent<Image>(); image.color = lineColor; RectTransform rectTransform = lineSegment.GetComponent<RectTransform>(); rectTransform.sizeDelta = new Vector2(segmentLength, lineWidth); rectTransform.anchoredPosition = startPoint + direction * (currentDistance + segmentLength / 2); rectTransform.localEulerAngles = new Vector3(0, 0, angle); currentDistance += segmentLength + gapLength; } } } ``` ### 2. 使用自定义 Shader 实现虚线效果 如果使用 TextMeshPro 或者需要更高效的渲染方式,可以结合自定义 Shader 来实现虚线效果。通过在 Shader 中控制 UV 坐标的变化,可以实现动态的虚线图案。 以下是一个简单的 Shader 示例,适用于 UI 元素: ```c Shader "Custom/DashedLineShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _DashLength ("Dash Length", Float) = 0.1 _GapLength ("Gap Length", Float) = 0.05 } SubShader { Tags { "Queue"="Transparent" "RenderType"="Transparent" } LOD 200 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag struct appdata_t { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float _DashLength; float _GapLength; v2f vert (appdata_t v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { float dashPattern = fmod(i.uv.x, _DashLength + _GapLength); if (dashPattern < _DashLength) { return tex2D(_MainTex, i.uv); } else { return fixed4(0,0,0,0); // 透明 } } ENDCG } } } ``` ### 3. 使用插件或第三方库 Unity Asset Store 提供了一些现成的插件,例如 **Doodle Studio 95** 或 **TextMeshPro Extensions**,这些插件通常已经集成了虚线、动等高级 UI 功能,适合快速开发和迭代。 ### 4. 使用 Unity 的 Gizmos 绘制虚线(仅用于编辑器) 如果你的需求是用于调试或编辑器辅助线,可以使用 `Gizmos` 来绘制虚线。例如: ```csharp using UnityEngine; public class GizmosDashedLine : MonoBehaviour { public Transform start; public Transform end; private void OnDrawGizmos() { if (start == null || end == null) return; Gizmos.color = Color.red; Vector3 direction = end.position - start.position; float distance = Vector3.Distance(start.position, end.position); int segments = 20; // 虚线段数 for (int i = 0; i < segments; i += 2) { Vector3 from = start.position + direction * (i / (float)segments); Vector3 to = start.position + direction * ((i + 1) / (float)segments); Gizmos.DrawLine(from, to); } } } ``` ### 5. 使用 Unity 的 Canvas 和 Sprite 模拟虚线 可以通过创建一个虚线图案的 Sprite(如黑白相间的纹理),然后将其作为 `Image` 组件的纹理。通过调整 `Image` 的 `type` 为 `Sliced` 或 `Tiled`,可以实现拉伸或平铺的效果。 --- ###
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tianyongheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值