Unity 实现框选游戏战斗单位的思路详解

? Preface

本文简单介绍如何实现即时战略游戏中框选战斗单位的功能，如图所示：

? 实现思路：

本文将该功能的实现拆分为以下部分：

• 在屏幕坐标系中绘制框选范围；
• 根据框选范围定位其在世界坐标系中对应的区域；
• 在该区域内进行物理检测。

✨ 如何在屏幕坐标系内绘制框选框

使用Line Renderer光线渲染器组件来进行范围绘制，当鼠标按下时，可以获得框选范围的起始点，鼠标持续按下时，鼠标位置则是框选范围的结束点，根据这两个点的坐标可以求得另外两个顶点的坐标，如图所示：

首先设置Line Renderer光线渲染器的属性：

• Enable：默认设为false，当鼠标按下时将其设为true；
• Loop：设为true，为了让第三个顶点与起始点相连形成闭环；
• Size：设为4，框选范围有4个顶点；
• Width：设为0.001即可，线框不需要很粗，可适当调整；

代码部分：

using UnityEngine;
using SK.Framework;
using System.Collections.Generic;

public class Example : MonoBehaviour
{
 //光线渲染器组件
 private LineRenderer lineRenderer;
 //屏幕坐标系起始点
 private Vector3 screenStartPoint;
 //屏幕坐标系结束点
 private Vector3 screenEndPoint;
 
 private void Start()
 {
 //获取光线渲染器组件
 lineRenderer = GetComponent<LineRenderer>();
 }

 private void Update()
 {
 //鼠标按下
 if (Input.GetMouseButtonDown(0))
 {
 //激活光线渲染器
 lineRenderer.enabled = true;
 //屏幕坐标系起始点
 screenStartPoint = Input.mousePosition;
 screenStartPoint.z = 1;
 }
 //鼠标持续按下
 if (Input.GetMouseButton(0))
 {
 //屏幕坐标系结束点
 screenEndPoint = Input.mousePosition;
 screenEndPoint.z = 1;
 //求得框选框的另外两个顶点的位置
 Vector3 point1 = new Vector3(screenEndPoint.x, screenStartPoint.y, 1);
 Vector3 point2 = new Vector3(screenStartPoint.x, screenEndPoint.y, 1);
 
 //接下来使用光线渲染器画出框选范围
 lineRenderer.SetPosition(0, Camera.main.ScreenToWorldPoint(screenStartPoint));
 lineRenderer.SetPosition(1, Camera.main.ScreenToWorldPoint(point1));
 lineRenderer.SetPosition(2, Camera.main.ScreenToWorldPoint(screenEndPoint));
 lineRenderer.SetPosition(3, Camera.main.ScreenToWorldPoint(point2));
 }
 //鼠标抬起
 if (Input.GetMouseButtonUp(0))
 {
 //取消光线渲染器
 lineRenderer.enabled = false;
 }
 }
}

如图所示，已经实现框选范围的绘制：

? 根据框选范围定位其在世界坐标系中对应的区域

该部分的实现主要依靠物理射线检测，在鼠标位置发出射线，检测与地面的碰撞点，首先为Plane地面设置Layer层级：

在鼠标按下时根据射线检测信息确定世界坐标系中的起始点：

//鼠标按下
if (Input.GetMouseButtonDown(0))
{
 //激活光线渲染器
 lineRenderer.enabled = true;
 //屏幕坐标系起始点
 screenStartPoint = Input.mousePosition;
 screenStartPoint.z = 1;
 //射线检测
 if (Physics.Raycast(mainCamera.ScreenPointToRay(Input.mousePosition), out hit, 1 << LayerMask.NameToLayer("Ground")))
 {
 //世界坐标系起始点
 worldStartPoint = hit.point;
 }
}

在鼠标抬起时根据射线检测信息确定世界坐标系中的结束点：

//鼠标抬起
if (Input.GetMouseButtonUp(0))
{
 //取消光线渲染器
 lineRenderer.enabled = false;

 //射线检测
 if (Physics.Raycast(mainCamera.ScreenPointToRay(Input.mousePosition), out hit, 1 << LayerMask.NameToLayer("Ground")))
 {
 //世界坐标系结束点
 worldEndPoint = hit.point;
 }
}

? 在该区域内进行物理检测

该部分用的的核心API：

可以理解为创建一个碰撞盒来检测该范围内的碰撞体，首先计算出该API需要传入的参数：

• center：该盒子的中心点；
• halfExtents：该盒子长宽高的一半。

//盒子中心点
Vector3 center = new Vector3((worldEndPoint.x + worldStartPoint.x) * .5f, 1f, (worldEndPoint.z + worldStartPoint.z) * .5f);
//盒子长宽高的一半
Vector3 halfExtents = new Vector3(Mathf.Abs(worldEndPoint.x - worldStartPoint.x) * .5f, 1f, Mathf.Abs(worldEndPoint.z - worldStartPoint.z) * .5f);

有了这两个参数，调用该API可以获得该区域内的所有碰撞体，遍历判断碰撞体身上如果包含指定的组件，则将其选中，这里使用Outline高亮组件来表示：

//盒子中心点
Vector3 center = new Vector3((worldEndPoint.x + worldStartPoint.x) * .5f, 1f, (worldEndPoint.z + worldStartPoint.z) * .5f);
//盒子长宽高的一半
Vector3 halfExtents = new Vector3(Mathf.Abs(worldEndPoint.x - worldStartPoint.x) * .5f, 1f, Mathf.Abs(worldEndPoint.z - worldStartPoint.z) * .5f);
//检测到盒子内的碰撞器
Collider[] colliders = Physics.OverlapBox(center, halfExtents);

for (int i = 0; i < colliders.Length; i++)
{
 var collider = colliders[i];
 var outline = collider.GetComponent<Outline>();
 if (outline != null)
 {
 outline.enabled = true;
 }
}

如图所示，我们已经实现了基本的框选功能：

在框选时，还需要清除上一次框选的内容，因此我们使用一个List列表来记录当前框选的战斗单位，框选前遍历该列表来清除框选记录，完整代码如下：

public class Example : MonoBehaviour
{
 //光线渲染器组件
 private LineRenderer lineRenderer;
 //屏幕坐标系起始点
 private Vector3 screenStartPoint;
 //屏幕坐标系结束点
 private Vector3 screenEndPoint;
 //主相机
 private Camera mainCamera;
 //碰撞信息
 private RaycastHit hit;
 //世界坐标系起始点
 private Vector3 worldStartPoint;
 //世界坐标系结束点
 private Vector3 worldEndPoint;
 //框选记录列表
 private List<Outline> list = new List<Outline>();

 private void Start()
 {
 //获取光线渲染器组件
 lineRenderer = GetComponent<LineRenderer>();
 //获取主相机
 mainCamera = Camera.main != null ? Camera.main : FindObjectOfType<Camera>();
 }

 private void Update()
 {
 //鼠标按下
 if (Input.GetMouseButtonDown(0))
 {
 //激活光线渲染器
 lineRenderer.enabled = true;
 //屏幕坐标系起始点
 screenStartPoint = Input.mousePosition;
 screenStartPoint.z = 1;
 //射线检测
 if (Physics.Raycast(mainCamera.ScreenPointToRay(Input.mousePosition), out hit, 1 << LayerMask.NameToLayer("Ground")))
 {
 //世界坐标系起始点
 worldStartPoint = hit.point;
 }
 }
 //鼠标持续按下
 if (Input.GetMouseButton(0))
 {
 //屏幕坐标系结束点
 screenEndPoint = Input.mousePosition;
 screenEndPoint.z = 1;
 //求得框选框的另外两个顶点的位置
 Vector3 point1 = new Vector3(screenEndPoint.x, screenStartPoint.y, 1);
 Vector3 point2 = new Vector3(screenStartPoint.x, screenEndPoint.y, 1);
 
 //接下来使用光线渲染器画出框选范围
 lineRenderer.SetPosition(0, Camera.main.ScreenToWorldPoint(screenStartPoint));
 lineRenderer.SetPosition(1, Camera.main.ScreenToWorldPoint(point1));
 lineRenderer.SetPosition(2, Camera.main.ScreenToWorldPoint(screenEndPoint));
 lineRenderer.SetPosition(3, Camera.main.ScreenToWorldPoint(point2));
 }
 //鼠标抬起
 if (Input.GetMouseButtonUp(0))
 {
 //取消光线渲染器
 lineRenderer.enabled = false;

 //首先清除上一次的框选记录
 for (int i = 0; i < list.Count; i++)
 {
 list[i].enabled = false;
 }
 list.Clear();

 //射线检测
 if (Physics.Raycast(mainCamera.ScreenPointToRay(Input.mousePosition), out hit, 1 << LayerMask.NameToLayer("Ground")))
 {
 //世界坐标系结束点
 worldEndPoint = hit.point;
 //盒子中心点
 Vector3 center = new Vector3((worldEndPoint.x + worldStartPoint.x) * .5f, 1f, (worldEndPoint.z + worldStartPoint.z) * .5f);
 //盒子长宽高的一半
 Vector3 halfExtents = new Vector3(Mathf.Abs(worldEndPoint.x - worldStartPoint.x) * .5f, 1f, Mathf.Abs(worldEndPoint.z - worldStartPoint.z) * .5f);
 //检测到盒子内的碰撞器
 Collider[] colliders = Physics.OverlapBox(center, halfExtents);

 for (int i = 0; i < colliders.Length; i++)
 {
 var collider = colliders[i];
 var outline = collider.GetComponent<Outline>();
 if (outline != null)
 {
 list.Add(outline);
 outline.enabled = true;
 }
 }
 }
 }
 }
}