1.7 卡牌拖动箭头效果———自制卡牌游戏之旅

---

素材来源：影之诗国服大百科

内容简介：本篇主要介绍卡牌拖动箭头的效果实现

---

一、实现效果

当玩家使用指向性的卡牌时，通常会有一个跟随玩家鼠标的拖动箭头效果

二、实现过程

1. 对象创建

target图标和Triangle图标，外加一个LineRenderer

① target和Triangle，创建target的时候要注意，因为实际上拖动的是target这个目标，所以有关拖动的script要放在Target对象上

将拖动相关的脚本放在Target上

② LineRenderer

2. 编写代码

分析：

① 首先，Target是鼠标拖动的目标，而并非是卡牌。

② 从卡牌的中心位置，到Target的位置创建一条直线。

③ 拖动Target的时候，需要关闭所有卡牌的预览功能。

OnDraggingInUpdate()

用Target的位置减去卡牌的位置，即可获得方向，并标准化：

        // 画箭头（Triangle）
        Vector3 notNormalized = transform.position - transform.parent.position; // Target到卡牌的向量
        Vector3 direction = notNormalized.normalized; // 标准化

根据距离判断，是否需要渲染直线：

 float distanceToTarget = (direction*2.3f).magnitude; // 距离
        if (notNormalized.magnitude > distanceToTarget)
        {
            // 在卡牌与target之间画线
            lr.SetPositions(new Vector3[]{ transform.parent.position, transform.position - direction*2.3f });
            lr.enabled = true;

            triangleSR.enabled = true;
            triangleSR.transform.position = transform.position - 1.5f*direction;

            // 旋转箭头
            float rot_z = Mathf.Atan2(notNormalized.y, notNormalized.x) * Mathf.Rad2Deg;
            triangleSR.transform.rotation = Quaternion.Euler(0f, 0f, rot_z - 90);
        }
        else
        {
            // 如果target离卡牌中心不远，不需要显示箭头
            lr.enabled = false;
            triangleSR.enabled = false;
        }

OnEndDrag()

将Target等对象归位

    public override void OnEndDrag()
    {

        // 把箭头和target归位
        transform.localPosition = new Vector3(0f, 0f, 0.4f);
        sr.enabled = false;
        lr.enabled = false;
        triangleSR.enabled = false;

    }

拖动箭头时，需要关闭预览效果

在DraggableTestWithActions.cs中需要新增两行


表示，在拖动的时候关闭全局预览功能；在不拖动的时候打开全局预览功能。

可以看到，在拖动的时候就不会开启预览效果了。

3. LineRenderer

1.The Line Renderer component takes an array of two or more points in 3D space, and draws a straight line between each one. You can use a Line Renderer to draw anything from a simple straight line to a complex spiral.

1.线渲染器 (Line Renderer) 组件采用 3D 空间中两个或多个点的数组，在每个点之间绘制一条直线。因此，单个线渲染器组件可用于绘制从简单直线到复杂螺旋线的任何线条。

2.The line is always continuous.if you need to draw two or more completely separate lines, you should use multiple GameObjects, each with its own Line Renderer.

2.这条线始终是连续的。如果需要绘制两条或更多完全独立的线，则应使用多个游戏对象，每个游戏对象都要有自己的线渲染器。

三、完整代码

DragOnTargetTest.cs

using UnityEngine;
using System.Collections;
using DG.Tweening;

public class DragOnTargetTest : DraggingActionsTest
{
    public TargetingOptions Targets = TargetingOptions.AllCharacters;
    private SpriteRenderer sr;
    private LineRenderer lr;
    private Transform triangle;
    private SpriteRenderer triangleSR;

    void Awake()
    {
        sr = GetComponent<SpriteRenderer>();
        lr = GetComponentInChildren<LineRenderer>();
        lr.sortingLayerName = "AboveEverything";
        triangle = transform.Find("Triangle");
        triangleSR = triangle.GetComponent<SpriteRenderer>();
    }

    public override void OnStartDrag()
    {
        sr.enabled = true;
        lr.enabled = true;
    }

    public override void OnDraggingInUpdate()
    {
        // 画箭头（Triangle）
        Vector3 notNormalized = transform.position - transform.parent.position; // Target到卡牌的向量
        Vector3 direction = notNormalized.normalized; // 标准化
        float distanceToTarget = (direction*2.3f).magnitude; // 距离
        if (notNormalized.magnitude > distanceToTarget)
        {
            // 在卡牌与target之间画线
            lr.SetPositions(new Vector3[]{ transform.parent.position, transform.position - direction*2.3f });
            lr.enabled = true;

            triangleSR.enabled = true;
            triangleSR.transform.position = transform.position - 1.5f*direction;

            // 旋转箭头
            float rot_z = Mathf.Atan2(notNormalized.y, notNormalized.x) * Mathf.Rad2Deg;
            triangleSR.transform.rotation = Quaternion.Euler(0f, 0f, rot_z - 90);
        }
        else
        {
            // 如果target离卡牌中心不远，不需要显示箭头
            lr.enabled = false;
            triangleSR.enabled = false;
        }

    }

    public override void OnEndDrag()
    {

        // 把箭头和target归位
        transform.localPosition = new Vector3(0f, 0f, 0.4f);
        sr.enabled = false;
        lr.enabled = false;
        triangleSR.enabled = false;

    }
    
    protected override bool DragSuccessful()
    {
        return true;
    }
}

四、参考资料

---

1. LineRenderer 线渲染器

2. Unity User Manual—Line Renderer