分享

【100个 Unity实用技能】 | Unity不规则图片按钮的事件屏蔽

 敲代码的小Y 2024-01-29 发布于上海

请添加图片描述


Unity 小知识 大智慧

  • 🎬 博客主页:https://xiaoy.blog.csdn.net

  • 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉

  • 🎄 学习专栏推荐:Unity系统学习专栏

  • 🌲 游戏制作专栏推荐:游戏制作

  • 🌲Unity实战100例专栏推荐:Unity 实战100例 教程

  • 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

  • 📆 未来很长,值得我们全力奔赴更美好的生活✨

  • ------------------❤️分割线❤️-------------------------

请添加图片描述


Unity 实用技能学习

Unity不规则图片按钮的事件屏蔽

前面写过一篇文章介绍了怎样过滤UI中透明区域的点击事件:
【100个 Unity实用技能】☀️ | Unity中 过滤透明区域的点击事件

里面提到了两种方法,都是通过像素检测来实现的,方法简单好用。但是有个条件是需要打开图片的Read/Write Enabled,这会导致一张图片占用了两份内存。
一般这种透明区域的出现的不多情况下,使用起来也没什么太大的问题,但如果使用了很多这种图片,且都想实现过滤的效果,那可能造成比较多的消耗内存,所以就要考虑下别的方案。

下面介绍一种使用 PolygonCollider2D 多边形碰撞组件 来实现不规则图片的事件屏蔽方法,也是简单易用,下面一起看下:

具体事例:

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(PolygonCollider2D))]
public class PolygonImageClick : MonoBehaviour, ICanvasRaycastFilter
{
    /// <summary>
    /// 2D多边形碰撞器
    /// </summary>
    protected PolygonCollider2D m_polygonCollider2D;
    protected Image _image;

    void Start()
    {
        _image = GetComponent<Image>();
        m_polygonCollider2D = GetComponent<PolygonCollider2D>();
    }

    public bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        Vector3 worldPos;
        //将屏幕上的点转换为世界坐标中的点,考虑到了矩形(RectTransform)的本地坐标系
        RectTransformUtility.ScreenPointToWorldPointInRectangle(_image.rectTransform, screenPoint, eventCamera, out worldPos);
        return m_polygonCollider2D.OverlapPoint(worldPos);
    }
}

通过继承一个ICanvasRaycastFilter接口,实现 IsRaycastLocationValid() 方法,在方法中判断某点是否在多边形碰撞器区域内即可实现不规则区域的点击。

将上述代码挂载到有Image的组件上,然后调整多边形不规则形状用来适配我们的不规则图片。
在这里插入图片描述

调整好多边形后运行游戏,即可实现只在多边形区域内可以实现点击事件,其他区域就被过滤掉了。

效果如下:
请添加图片描述


资料白嫖,技术互助

学习路线指引(点击解锁)知识定位人群定位
🧡 Unity系统学习专栏 入门级本专栏从Unity入门开始学习,快速达到Unity的入门水平
💛 Unity实战类项目 进阶级计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。
❤️ 游戏制作专栏 难度偏高分享学习一些Unity成品的游戏Demo和其他语言的小游戏!
💚 游戏爱好者万人社区 互助/吹水数万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Unity100个实用技能 Unity查漏补缺针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺

在这里插入图片描述

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多