unity Line 渲染在使用画布的游戏中不起作用

Question

你好，我需要帮助，我试图在我的游戏中创建一个关卡，使用线条渲染来绘制从一个用户到另一个用户的箭头，但我在制作它时遇到了问题，我观看了所有可用于此主题的 YouTube 视频，但没有任何效果关卡的想法是这样的我想创建一个画布这个画布有多个单词我点击一个世界并将一条线从它拖到另一个世界这张图片是我的想法的一个例子：

就像这张图片一样，这个想法看起来很简单，但没有显示线条，YouTube 上的任何内容都没有帮助，如果有人可以指导我如何做到这一点，那将非常有帮助

我尝试了所有 YouTube 视频，但没有任何效果，我需要有人在这个级别上为我提供帮助

Answer 1

统一线渲染器旨在在 3D 空间中工作。对于画布元素行，您需要一个 ui 元素。

用户界面元素

首先创建一个用于线条的图像。线上要更改的重要参数是枢轴。将轴 x 设置为 0，以便图像从侧面延伸。不用担心图像的大小，这将从脚本中设置。

线路行为

接下来让我们创建控制线条行为的脚本。该线需要起点和目标点。我们还将公开一个厚度变量。可以在运行时直接更改图像上的颜色，也可以使用 SetColor 通过脚本进行更改。

using UnityEngine;
using UnityEngine.UI;

public class SimpleLineUI : MonoBehaviour
{
    [SerializeField] private Image lineImage;
    [SerializeField] private float thickness = 5;
    [SerializeField] private Color color = Color.black;

    public float Length => length;

    private Vector2 startPoint;
    private Vector2 targetPoint;
    private float length;

    private void Awake()
    {
        lineImage.color = color;

        ResetLine();
    }

    public void SetStartPoint(Vector2 position, bool update = true)
    {
        startPoint = position;

        if (update)
            UpdateLine();
    }
    public void SetTargetPoint(Vector2 position, bool update = true)
    {
        targetPoint = position;

        if (update)
            UpdateLine();
    }
    public void SetThickness(float thickness)
    {
        if (this.thickness != thickness)
        {
            this.thickness = thickness;
            lineImage.rectTransform.sizeDelta = new Vector2(length, thickness);
        }
    }
    public void SetColor(Color color)
    {
        if (this.color != color)
        {
            this.color = color;
            lineImage.color = color;
        }
    }
    public void ResetLine()
    {
        length = 0;
        SetStartPoint(Vector2.zero, false);
        SetTargetPoint(Vector2.zero, false);
        lineImage.rectTransform.sizeDelta = Vector2.zero;
    }

    private void UpdateLine()
    {
        var direction = targetPoint - startPoint;
        var rotationAngle = Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg;

        length = direction.magnitude;

        lineImage.rectTransform.anchoredPosition = startPoint;

        lineImage.rectTransform.sizeDelta = new Vector2(length, thickness);

        lineImage.rectTransform.rotation = Quaternion.Euler(0, 0, rotationAngle);
    }
}

配置

将此组件添加到线条图像中。
指定图像组件，设置线条粗细，并设置颜色。

如何使用

要开始线条，请使用

SetStartPoint

设置起点。如果尚未设置目标点，请传入

false

以避免出现不稳定行为。使用

SetTargetPoint

设置目标点来完成线条。

测试

这是我用来测试线路的组件。指定线条图像和画布。

该组件的作用：
当您第一次单击鼠标左键时，将设置起点。设置该点后，脚本将在每次更新鼠标位置时设置目标点。设置起点后右键单击鼠标将重置直线。

using UnityEngine;

public class SimpleLineUITest : MonoBehaviour
{
    [SerializeField] private SimpleLineUI simpleLineUI;
    [SerializeField] private Canvas canvas;

    private bool startPointSet;

    private void Update()
    {
        if (startPointSet)
        {
            simpleLineUI.SetTargetPoint(GetCanvasMousePosition());

            if (Input.GetMouseButtonDown(1))
            {
                startPointSet = false;
                simpleLineUI.ResetLine();
            }
        }
        else
        {
            if (Input.GetMouseButtonDown(0))
            {
                simpleLineUI.SetStartPoint(GetCanvasMousePosition(), false);
                startPointSet = true;
            }
        }
    }

    private Vector2 GetCanvasMousePosition()
    {
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.GetComponent<RectTransform>(), Input.mousePosition, null, out var position);
        return position;
    }
}

最后的想法
所有的部分都是为了使其能够与多个点一起工作，使其类似于线渲染器。最大的区别是每个线段都有单一的厚度。