如果用一个不规则图形做Button

Creator 3.x
#1

请问大佬们
我想用一个不规则图形做button，希望鼠标仅滑到图片范围内会出现

cursor: pointer 的样子。

搜索了一下似乎需要添加一个碰撞组件如下。
然后怎么办嘞？怎么样可以让鼠标只滑到梯子上说的时候变成cursor: pointer的样子？

301DD754-5A74-411D-B0B6-BC1AF4B1C25E
301DD754-5A74-411D-B0B6-BC1AF4B1C25E856×785 311 KB

1赞
#2

你把mouseWorldPosition和polygonWorldPoints代入进来。

        let mouseWorldPosition = v2();
        let polygonWorldPoints = new PolygonCollider2D().worldPoints;
        let isHit = Intersection2D.pointInPolygon(mouseWorldPosition, polygonWorldPoints);
        if (isHit) {
            console.log("进入区域");
        } else {
            console.log("未进入区域");
        }
3赞
#3

实现的时候发现我好像不太会把
event.getLocation()的坐标转换成 世界坐标。

请问如何把这个转换成世界坐标呢？

#4

渲染你触摸节点的Camera有API，screenToWorld

        let mousePosition = event.getLocation();
        let mouseWorldPosition = this.camera.screenToWorld(v3(mousePosition.x, mousePosition.y));
        let polygonWorldPoints = new PolygonCollider2D().worldPoints;
        let isHit = Intersection2D.pointInPolygon(mouseWorldPosition, polygonWorldPoints);
        if (isHit) {
            console.log("进入区域");
        } else {
            console.log("未进入区域");
        }
#5

谢谢你呀，太感谢啦

#6

解决的话，麻烦选我为解决方案~

#7

不好意思啊 还得请教你一下这个问题。
点击图片的任意一点，得到的世界坐标变化不大，所以isHit的结果一直是true…
是不是我的节点结构有问题？

节点结构如下：
ADCFB28B-CE8F-4B0E-8636-415DDC2E4391

Log：

2CD4D18A-0AA2-46B0-B7D1-5955C4DEC827
2CD4D18A-0AA2-46B0-B7D1-5955C4DEC8271089×808 810 KB

代码：

const polygonWorldPoints = this._polygonCollider2D.worldPoints;

const mousePosition = evt.getLocation();
const pos = new Vec3();
const mouseScreenPosition = new Vec3(mousePosition.x, mousePosition.y, 0);

const canvasNode = find("Canvas");
const canvas = canvasNode.getComponent(Canvas);
const uiCamera = canvas.cameraComponent.camera;

const mouseWorldPosition = uiCamera.screenToWorld(pos, mouseScreenPosition);
const isHit = Intersection2D.pointInPolygon(
  mouseWorldPosition,
  polygonWorldPoints,
);
console.log("mouseWorldPosition:", mouseWorldPosition, polygonWorldPoints);

if (isHit) {
  console.log("进入区域");
} else {
  console.log("未进入区域");
}
#8

这行代码有问题，第一个参数是要转换的坐标，你写成out，第二个参数是out你写成了要转换的坐标。
需要改一下

uiCamera.screenToWorld(mouseScreenPosition, pos)
#9

亲测， 题主代码没有问题。你别误导了

#10

为何不弄一个 长方体， 然后改一下角度，斜过来， 然后贴合上去。 哈哈