Unity 2D拼图游戏开发：从零实现拖拽交互与射线检测（附完整代码）-CSDN博客

Unity 2D拼图游戏开发：从零实现拖拽交互与射线检测（附完整代码）

如果你在Unity里做过UI拖拽，大概率遇到过这样的尴尬：手指拖着一个图片满屏跑，底下的按钮却怎么都点不到。这背后其实是射线检测在作祟——被拖拽的UI元素像一块“玻璃”，挡住了所有后续的交互。在拼图游戏里，这个问题会被放大：你不仅需要拖得动碎片，还得让碎片底下的“坑位”能感知到它的到来，从而完成精准的匹配。

今天，我们不只解决这个问题，还要把它拆解得明明白白。我会带你从零搭建一个2D拼图游戏，核心聚焦在如何优雅地处理拖拽与射线检测的冲突，并深入探讨几个容易被忽略的实战细节：CanvasGroup的blocksRaycasts属性为何是救星、WebGL平台下多点触控的“坑”与“填坑”策略，以及如何构建一个清晰、可扩展的状态管理机制。文末会提供完整的、可直接运行的代码模块。

1. 核心冲突：当拖拽挡住了射线

在Unity的EventSystem事件系统中，UI的交互（如点击、拖拽）依赖于Graphic Raycaster组件发出的射线。当射线击中一个带有Image、RawImage等图形组件的UI元素时，相应的事件（如OnPointerClick）才会被触发。

想象一下这个场景：你创建了一个拼图碎片（一个Image），并为它挂载了IBeginDragHandler, IDragHandler, IEndDragHandler接口来实现拖拽。当你开始拖拽时，这个碎片会跟随鼠标或手指移动。问题来了：这个正在被拖拽的碎片本身，仍然会“拦截”射线。这意味着，射线无法穿透它去检测它下方可能存在的目标区域（比如一个拼图槽位）。结果就是，你的OnDrop事件永远无法在目标槽位上被触发。

提示：你可以简单测试一下。创建一个可拖拽的Image，在它下面放一个Button。拖拽Image时尝试点击Button，你会发现Button毫无反应。

这种设计在直觉上似乎不合理——我明明在拖着一个东西，为什么它还能挡住其他交互？但从EventSystem的角度看，它只是忠实地执行了射线检测的物理规则：先碰到的UI元素，先处理事件。那么，解决方案的核心思路就变成了：如何在拖拽期间，让射线“忽略”当前被拖拽的对象，直接检测它后面的东西？

2. 破局关键：CanvasGroup.blocksRaycasts

Unity的CanvasGroup组件是一个管理一组UI子元素属性的便捷工具。我们通常用它来做整体透明度渐变或控制子元素交互。其中有一个属性叫blocksRaycasts。默认情况下，它是true，意味着这个CanvasGroup所附属的GameObject及其所有子UI元素都会参与射线检测，并可能阻挡射线。

而我们的魔法就藏在这里：在拖拽开始的一瞬间，将被拖拽对象的CanvasGroup.blocksRaycasts设置为false；在拖拽结束的一瞬间，再将其恢复为true。

这个操作产生了什么效果呢？当blocksRaycasts为false时，该UI元素在射线检测中会变成“透明”的。射线会直接穿过它，去检测它后面的UI元素。这样，位于下方的拼图槽位就能正常接收到OnPointerEnter、OnPointerExit甚至OnDrop事件了。拖拽结束后，我们恢复其阻挡射线的能力，确保它再次成为一个正常的、可交互的UI元素。

下面是一个最精简的实现示例：

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class DraggablePuzzlePiece : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private CanvasGroup canvasGroup;
    private Vector3 originalPosition;

    void Awake()
    {
        canvasGroup = GetComponent<CanvasGroup>();
        if (canvasGroup == null)
        {
            canvasGroup = gameObject.AddComponent<CanvasGroup>();
        }
        originalPosition = transform.position;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        // 关键一步：让射线穿透我
        canvasGroup.blocksRaycasts = false;
        // 将自己置于UI层级最前，避免被其他UI遮挡视觉
        transform.SetAsLastSibling();
    }

    public void OnDrag(PointerEventData eventData)
    {
        // 跟随指针移动
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        // 拖拽结束，恢复射线阻挡
        canvasGroup.blocksRaycasts = true;

        // 这里可以进行位置判定。如果eventData.pointerEnter是目标槽位，则吸附过去；否则回到原位。
        PuzzleSlot targetSlot = eventData.pointerEnter?.GetComponent<PuzzleSlot>();
        if (targetSlot != null && targetSlo