Cocos Creator之不规则的点击区域
  RlWeLU85QNwT 2023年11月19日 18 0

一,前景

1,点击区域不是一个矩形,如下图所示

Cocos Creator之不规则的点击区域_点击区域

二,新建一个节点(Node)

     1,添加Sprite组件

Cocos Creator之不规则的点击区域_Button_02

    2,继续添加Button组件

Cocos Creator之不规则的点击区域_3.x_03

3, 添加PolygonCollider2D组件

Cocos Creator之不规则的点击区域_Button_04

三,核心代码

import {
    _decorator,
    Component,
    Node,
    isValid,
    PolygonCollider2D,
    Intersection2D,
    UITransform,
    Vec3,
    v2,
    EventTouch,
    math,
    v3,
    Sprite, SpriteFrame, ImageAsset
} from 'cc';
import IBundleResItemType from "../manager/bundle/IBundleResItemType";
import AppUtil from "../utils/AppUtil";
import { ResConfig } from "../manager/bundle/ResConfig";
import BundleResManager from "../manager/bundle/BundleResManager";

const { ccclass, property } = _decorator;

@ccclass('ButtonUI')
export class ButtonUI extends Component {
    @property({ type: Node, tooltip: "按钮" })
    private btnImg: Node = null;

    protected start(): void {
        const item: IBundleResItemType<ImageAsset> = AppUtil.getPreload(ResConfig, "red") as IBundleResItemType<ImageAsset>;
        let imageAsset: ImageAsset = BundleResManager.instance.getAsset(AppUtil.getLoadingABName(ResConfig), item.urls as string);
        this.btnImg.getComponent(Sprite).spriteFrame = SpriteFrame.createWithImage(imageAsset);
    }

    protected onEnable(): void {
        this.listener(true);
    }

    protected onDisable(): void {
        this.listener(false);
    }

    private listener(isAdd: boolean): void {
        if (isAdd) {
            this.btnImg.on(Node.EventType.TOUCH_END, this.onClickHandler, this);
        } else {
            this.btnImg.off(Node.EventType.TOUCH_END, this.onClickHandler, this);
        }
    }

    private onClickHandler(event: EventTouch): void {
        if (!isValid(this.node)) return;
        if (this.isCheckAreaSuccess(this.btnImg, event)) {
            console.log("点击成功");
        } else {
            console.log("点击失败");
        }
    }

    private isCheckAreaSuccess(btnNode: Node, event: EventTouch): boolean {
        if (!isValid(btnNode) || !event) {
            return false;
        }
        let collider: PolygonCollider2D = btnNode.getComponent(PolygonCollider2D);
        let mathV2: math.Vec2 = event.getUILocation();
        let local: Vec3 = btnNode.getComponent(UITransform).convertToNodeSpaceAR(v3(mathV2.x, mathV2.y));
        return Intersection2D.pointInPolygon(v2(local.x, local.y), collider.points);
    }

}

Cocos Creator之不规则的点击区域_点击区域_05


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月19日 0

暂无评论

RlWeLU85QNwT