实现一个简单的不规则按钮

Creator 3.x
#1

直接贴代码

import { _decorator, Component, Node, Button, PolygonCollider2D, Camera, UITransform, find, Canvas, v3, Vec2, log, Intersection2D, director, Vec3, mat4, Mat4, v2, EventTouch } from 'cc';

const { ccclass, property, executeInEditMode, requireComponent } = _decorator;

@ccclass('PolygonButton')

@executeInEditMode

@requireComponent(PolygonCollider2D)

export class PolygonButton extends Button {

    private _polygonComp: PolygonCollider2D;

    private _uiTransform: UITransform;

    onLoad() {

        this._polygonComp = this.getComponent(PolygonCollider2D);

        this._uiTransform = this.getComponent(UITransform);

    }

   

    start() {

        let _temp_v3_ = v3();

        let _temp_v2_1_ = v2();

        let _temp_v2_2_ = v2();

        let _temp_mat4_1_ = mat4();

        let _temp_mat4_2_ = mat4();

        let _zero_mat4_ = mat4(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

        this._uiTransform.hitTest = (screenPoint: Vec2) => {

            const cameras = director.getScene().renderScene.cameras;

            for (let i = 0; i < cameras.length; i++) {

                const camera = cameras[i];

                if (!(camera.visibility & this.node.layer) || (camera.window && !camera.window.swapchain)) continue;

                Vec3.set(_temp_v3_, screenPoint.x, screenPoint.y, 0)

                camera.screenToWorld(_temp_v3_, _temp_v3_);

                Vec2.set(_temp_v2_1_, _temp_v3_.x, _temp_v3_.y);

               

                this.node.getWorldMatrix(_temp_mat4_1_);

                Mat4.invert(_temp_mat4_2_, _temp_mat4_1_);

                if (Mat4.strictEquals(_temp_mat4_2_, _zero_mat4_)) {

                    continue;

                }

                Vec2.transformMat4(_temp_v2_2_, _temp_v2_1_, _temp_mat4_2_);

                _temp_v2_2_.x += this._uiTransform.anchorX * this._uiTransform.width;

                _temp_v2_2_.y += this._uiTransform.anchorY * this._uiTransform.height;

                let hit = false;

                if (_temp_v2_2_.x >= 0 && _temp_v2_2_.y >= 0 && _temp_v2_2_.x <= this._uiTransform.width && _temp_v2_2_.y <= this._uiTransform.height) {

                    // log(this.node.name + " " + _temp_v2_2_);

                    _temp_v2_2_.x -= this._uiTransform.anchorX * this._uiTransform.width;

                    _temp_v2_2_.y -= this._uiTransform.anchorY * this._uiTransform.height;

                    // log("pointInPolygon: " + _temp_v2_2_);

                    hit = Intersection2D.pointInPolygon(_temp_v2_2_, this._polygonComp.points);

                }

                if (hit) {

                    log(this.node.name + " hit " + _temp_v2_2_);

                    return true;

                }

            }

            return false;

        };

    }

    onTest(event: Event, customEventData: string) {

        log(customEventData + " clicked !!!");

    }

}
#3

感谢分享！！