Unity-鼠标悬停改变图像位置

教你如何使用Collider作为鼠标悬停的检测区域

📝 前言

之前的教程使用了默认的鼠标事件检测，但有时候我们需要更精确的交互区域控制。今天就来看看如何使用碰撞体(Collider)作为鼠标交互的检测范围，实现同样的悬停偏移效果。

🎯 最终效果

• 鼠标进入碰撞体区域 → 子物体向左上偏移

• 鼠标离开碰撞体区域 → 子物体恢复原位

• 碰撞体可以是任意形状和大小

💻 最简代码实现

使用2D碰撞体的版本

using UnityEngine;

public class HoverEffect : MonoBehaviour
{
    public Transform child;
    private Vector3 originalPos;
    
    void Start()
    {
        originalPos = child.localPosition;
    }
    
    void OnMouseEnter()
    {
        child.localPosition = originalPos + new Vector3(-0.5f, 0.5f, 0);
    }
    
    void OnMouseExit()
    {
        child.localPosition = originalPos;
    }
}

代码解析：

• OnMouseEnter() - 鼠标进入碰撞体时自动触发

• OnMouseExit() - 鼠标离开碰撞体时自动触发

• 代码会自动检测挂载在同一对象上的Collider组件

🔧 碰撞体设置步骤

1. 添加碰撞体组件

方法一：Box Collider 2D（矩形区域）

• 选中物体 → Add Component → Physics 2D → Box Collider 2D

• 调整Size控制检测区域大小

方法二：Circle Collider 2D（圆形区域）

• Add Component → Physics 2D → Circle Collider 2D

• 调整Radius控制检测范围

方法三：Polygon Collider 2D（自定义形状）

• Add Component → Physics 2D → Polygon Collider 2D

• 自动匹配精灵形状或手动编辑

⚠️ 重要注意事项

1. 必须有碰撞体 ：OnMouseEnter/Exit依赖碰撞体，没有就不会触发

2. 2D vs 3D：

   • 2D项目使用 Collider2D

   • 3D项目使用 Collider

   • 不能混用，否则不会触发事件

3. 相机设置 ：主相机必须要有 Physics Raycaster 或 Physics 2D Raycaster 组件

4. Layer设置：确保物体所在的Layer在射线检测中】

🎮 运行测试

点击运行按钮！

如图所示，鼠标悬停卡牌移动