UGUI做一个类似Windows的框选功能：
效果：
主要用到的知识点，就是2D世界的碰撞检测（BoxCollider2D和Rigidbody2D两位大兄弟很必要）
当然也包括设置Ui物体的大小和位置。并且运用UGUI的鼠标事件（EventTrigger）
功能的主要部分：
1、框选的Image需要加上BoxCollider2D和Rigidbody2D两个组件。被选择的物体要有BoxCollider2D组件
并设置好对应的BoxCollider2D的大小，使用（OnTriggerEnter2D，OnTriggerStay2D，OnTriggerExit2D）碰撞检测方法。
详细的比如：选中物体的效果，选中后的事件
2、拖拽改变框选图片的大小和位置(在这里我将框选的图片的中心点设置为Vector2(0.5f, 0.5f)，这样就可以避免要频繁设置其碰撞的偏移值(偷懒的做法，哈哈))
改变大小和计算位置的方法：（StartPosition为鼠标按下时的位置坐标，EndPosition为鼠标拖拽中的位置坐标）
float x = Mathf.Abs(StartPosition.x - EndPosition.x);
float y = Mathf.Abs(StartPosition.y - EndPosition.y);
Vector2 size = new Vector2(x, y);
Vector3 resultPosition = Vector3.zero;
resultPosition.x = (StartPosition.x + EndPosition.x) / 2;
resultPosition.y = (StartPosition.y + EndPosition.y) / 2;
主要是在鼠标拖拽时改变框选的图片的大小和其碰撞的大小，和图片的位置。(拓展了一些别的方法，例如修改框选图片的sprite和颜色color)
详细代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
/// <summary>
/// 将脚本挂在需要框选的界面上
/// </summary>
public class DragSelectView : MonoBehaviour
{
public SelectImageView SelectImageView;
Vector3 StartPosition = Vector3.zero;
Vector3 EndPosition = Vector3.zero;
// Start is called before the first frame update
void Start()
{
InitSelectImage();
UIEventListener uIEventListener = UIEventListener.GetEventListener(gameObject);
uIEventListener.PointerDownEvent += OnPointerDownEvent;
uIEventListener.PointerUpEvent += OnPointerUpEvent;
uIEventListener.OnDragEvent += OnDragEvent;
}
/// <summary>
/// 鼠标按下
/// </summary>
private void OnPointerDownEvent(PointerEventData eventData)
{
StartPosition = eventData.position;
SelectImageView.PointerDownEvent();
}
/// <summary>
/// 鼠标抬起
/// </summary>
private void OnPointerUpEvent(PointerEventData eventData)
{
SelectImageView.ResetPositionAndSize();
}
private void OnDragEvent(PointerEventData eventData)
{
if (eventData.button == PointerEventData.InputButton.Left)
{
EndPosition = eventData.position;
float x = Mathf.Abs(StartPosition.x - EndPosition.x);
float y = Mathf.Abs(StartPosition.y - EndPosition.y);
Vector2 size = new Vector2(x, y);//计算拖拽的大小
Vector3 resultPosition = Vector3.zero;
resultPosition.x = (StartPosition.x + EndPosition.x) / 2;
resultPosition.y = (StartPosition.y + EndPosition.y) / 2;//计算此时图片的位置，图片中心点为（0.5，05）
SelectImageView.OnDrag(size, resultPosition);
}
}
/// <summary>
/// 生成框选的图片
/// </summary>
private void InitSelectImage()
{
if (SelectImageView == null)
{
var selectImageItem = new GameObject("SelectImage");
selectImageItem.SetActive(false);
SelectImageView = selectImageItem.AddComponent<SelectImageView>();
selectImageItem.AddComponent<RectTransform>();
selectImageItem.AddComponent<Image>();
selectImageItem.transform.SetParent(transform);
}
if (SelectImageView)
{
SelectImageView.InitViewData();
}
}
}
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class SelectImageView : MonoBehaviour
{
public Sprite SelectImageSprite;
public Color SelectImageColor = Color.white;
public RectTransform SelectImageRectTransform;
private BoxCollider2D SelectImageCollider;
private Image SelectImage;
/// <summary>
/// 所选择的物体
/// </summary>
public List<GameObject> SelectItems = new List<GameObject>();
/// <summary>
/// 删除事件，可以在按Delete触发事件
/// </summary>
public Action DelectEvent;
GameObject SelectItemEffect;
Image SelectItemEffectImage;
private bool IsDraging = false;
/// <summary>
/// 设置颜色或者图片
/// </summary>
/// <param name="selectImageSprite"></param>
/// <param name="color"></param>
public void SetColorOrImage(Sprite selectImageSprite, Color color)
{
SelectImageSprite = selectImageSprite;
SelectImageColor = color;
SelectImage.sprite = SelectImageSprite;
SelectImage.color = SelectImageColor;
SelectItemEffectImage.sprite = SelectImageSprite;
SelectItemEffectImage.color = SelectImageColor;
}
/// <summary>
/// 初始化界面数据
/// </summary>
public void InitViewData()
{
SelectImageRectTransform = gameObject.GetComponent<RectTransform>();
SelectImage = gameObject.GetComponent<Image>();
SelectImage.color = new Color(0, 0, 0, 0.5f);
SelectImage.raycastTarget = false;
gameObject.SetActive(true);
SelectImageRectTransform.pivot = new Vector2(0.5f, 0.5f);
SelectImageRectTransform.localScale = Vector3.one;
SelectImageRectTransform.localEulerAngles = Vector3.zero;
SelectImage = SelectImageRectTransform.GetComponent<Image>();
SetPositionAndSize(Vector2.zero, Vector3.zero);
SelectImageRectTransform.gameObject.SetActive(true);
//主要加2d的碰撞和Rigibody2D
SelectImageCollider = SelectImageRectTransform.GetComponent<BoxCollider2D>();
if (SelectImageCollider == null)
{
SelectImageCollider = SelectImageRectTransform.gameObject.AddComponent<BoxCollider2D>();
}
if (SelectImageCollider)
{
SelectImageCollider.isTrigger = true;
}
var rigiBody = SelectImageRectTransform.GetComponent<Rigidbody2D>();
if (rigiBody == null)
{
rigiBody = SelectImageRectTransform.gameObject.AddComponent<Rigidbody2D>();
rigiBody.gravityScale = 0;
}
//选中效果
SelectItemEffect = Instantiate(gameObject,transform.parent);
SelectItemEffect.SetActive(false);
SelectItemEffectImage = SelectItemEffect.GetComponent<Image>();
var collider = SelectItemEffect.GetComponent<BoxCollider2D>();
if (collider)
{
Destroy(collider);
}
var rigiBodyEffect = SelectItemEffect.GetComponent<Rigidbody2D>();
if (rigiBodyEffect == null)
{
Destroy(rigiBodyEffect);
}
}
/// <summary>
/// 选中效果
/// </summary>
private void CreateSelectItemEffect(Transform selectItem)
{
if (selectItem)
{
GameObject item = Instantiate(SelectItemEffect, selectItem);
item.name = Select_Effect ;
item.transform.localPosition = Vector3.zero;
item.transform.localEulerAngles = Vector3.zero;
item.transform.localScale = Vector3.one;
var rect = item.GetComponent<RectTransform>();
var selectItemRect = selectItem.GetComponent<RectTransform>();
//rect.sizeDelta = selectItemRect.sizeDelta;//在这里要注意UGUI获取尺寸的属性
rect.sizeDelta = selectItemRect.rect.size;//设置效果的大小
item.SetActive(true);
}
}
string Select_Effect = "Select^Effect";
/// <summary>
/// 选中效果
/// </summary>
private void RemoveSelectItemEffect(Transform selectItem)
{
if (selectItem)
{
var effect = selectItem.transform.Find(Select_Effect);
if (effect)
{
Destroy(effect.gameObject);
}
}
}
public void ResetPositionAndSize()
{
SetPositionAndSize(Vector2.zero, Vector3.zero);
IsDraging = false;
}
public void PointerDownEvent()
{
SetPositionAndSize(Vector2.zero, Vector3.zero);
IsDraging = false;
ClearSelectEffects();
}
public void OnDrag(Vector2 size, Vector3 position)
{
SetPositionAndSize(size, position);
IsDraging = true;
}
/// <summary>
/// 设置坐标和大小
/// </summary>
/// <param name="size"></param>
/// <param name="position"></param>
private void SetPositionAndSize(Vector2 size, Vector3 position)
{
if (SelectImageRectTransform)
{
SelectImageRectTransform.position = position;
SelectImageRectTransform.sizeDelta = size;
if (SelectImageCollider)
{
SelectImageCollider.size = size;
}
SelectImageRectTransform.localScale = Vector3.one;
}
}
private void Update()
{
if (Input.GetKeyDown(KeyCode.Delete))
{
DelectEvent?.Invoke();
ClearSelectItems();
}
}
private void OnTriggerEnter2D(Collider2D collision)
{
if (collision)
{
AddSelectItems(collision.gameObject);
}
}
private void OnTriggerStay2D(Collider2D collision)
{
if (collision)
{
AddSelectItems(collision.gameObject);
}
}
private void OnTriggerExit2D(Collider2D collision)
{
if (collision)
{
RemoveSelectItems(collision.gameObject);
}
}
/// <summary>
/// 添加选中的物体到一个列表
/// </summary>
/// <param name="item"></param>
private void AddSelectItems(GameObject item)
{
if (!SelectItems.Contains(item))
{
SelectItems.Add(item);
CreateSelectItemEffect(item.transform);
}
}
/// <summary>
/// 移出选择的物体
/// </summary>
/// <param name="item"></param>
private void RemoveSelectItems(GameObject item)
{
if (SelectItems.Contains(item))
{
SelectItems.Remove(item);
RemoveSelectItemEffect(item.transform);
}
}
private void ClearSelectItems()
{
for (int i = 0; i < SelectItems.Count; i++)
{
var item = SelectItems[i];
if (item)
{
RemoveSelectItemEffect(item.transform);
Destroy(item);
}
}
}
private void ClearSelectEffects()
{
for (int i = 0; i < SelectItems.Count; i++)
{
var item = SelectItems[i];
if (item)
{
RemoveSelectItemEffect(item.transform);
}
}
SelectItems.Clear();
}
}
只需将DragSelectView脚本挂在需要框选的界面上即可。
网友评论