cocos creator3.7版本拖拽事件处理

前言:网上能找到的资料都太落后了,导致哥们用AI去写,全是瞎B写,版本都不对。贴点实际有用的。别老捣鼓你那破convertToNodeSpaceAR或者convertToNodeSpace了。

核心代码

touch.getDeltaX()
touch.getDeltaY()
在这里插入图片描述

在cocoscreator3.7版本中通过这个方法,修改节点坐标就可以了。

import { _decorator, Button, Component, EventTouch, Node, systemEvent, UITransform, Vec2, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LockManager')
export class LockManager extends Component {
    @property(Node)
    public dragNode: Node = null; // 假设这是您想要拖拽的 Sprite 所在的节点

    @property(Node)
    public transformNode: Node = null; // 假设这是您想要移动的node节点

    private _isDragging = false;

    start() {
        if (this.dragNode) {
            this.dragNode.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
            this.dragNode.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
            this.dragNode.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
            this.dragNode.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
        }
    }

    onTouchStart(touch: EventTouch) {
        this._isDragging = true;
    }

    onTouchMove(touch: EventTouch) {
        if (!this._isDragging) return;
        // 更新节点的y坐标
        const originPos = this.transformNode.getPosition()
        originPos.y += touch.getDeltaY();
        this.transformNode.setPosition(originPos)
    }

    onTouchEnd(touch: EventTouch) {
        this._isDragging = false;
        // 可以在这里添加拖拽结束后的逻辑
    }

    onTouchCancel(touch: EventTouch) {
        this._isDragging = false;
        // 可以在这里添加触摸被取消的逻辑
    }

    onDestroy() {
        if (this.dragNode) {
            this.dragNode.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
            this.dragNode.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
            this.dragNode.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
            this.dragNode.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
        }
    }
}



### Cocos 3.7 中实现碰撞检测的方法 在 Cocos Creator 3.7 版本中,可以通过内置的物理引擎来实现高效的碰撞检测机制。以下是具体方法: #### 启用碰撞管理器 为了使游戏中的物体能够相互检测到碰撞事件,需要先启用全局的碰撞管理器 `cc.director.getCollisionManager()` 并设置其属性以控制行为[^2]。 ```javascript // 开启碰撞功能 cc.director.getCollisionManager().enabled = true; // 可选:开启调试模式,在编辑器中可视化显示碰撞区域 cc.director.getCollisionManager().enabledDebugDraw = true; ``` 上述代码片段用于初始化并激活碰撞系统,`enabledDebugDraw` 参数可以帮助开发者直观地查看场景内的碰撞边界形状。 #### 添加碰撞组件至节点 Cocos 提供了几种预定义好的二维碰撞组件,分别是矩形 (`BoxCollider2D`)、圆形 (`CircleCollider2D`) 和多边形 (`PolygonCollider2D`) 形状的碰撞体[^1]。这些组件可以附加到任何需要参与碰撞测试的游戏对象上。 - **BoxCollider2D**: 定义了一个轴对齐的矩形作为碰撞范围。 - **CircleCollider2D**: 使用圆心和半径描述一个圆形区域。 - **PolygonCollider2D**: 支持复杂自定义轮廓线段组成的闭合图形。 通过脚本动态创建或者直接拖拽方式都可以完成绑定操作。 #### 注册监听回调函数处理逻辑响应 当两个具有有效碰撞器的对象发生接触时,框架会自动触发一系列预定名称的生命周期钩子方法,允许用户编写特定业务流程代码来进行交互反应。 常见的是重写以下四个阶段之一或多个: - onBeginContact(contact, selfCollider, otherCollider): 当首次进入触碰状态调用; - onPreSolve(contact, selfCollider, otherCollider): 每帧更新前再次评估是否仍然保持连接关系; - onPostSolve(contact, selfCollider, otherCollider): 如果持续存在则每帧结束之后执行一次额外计算; - onEndContact(selfCollider, otherCollider): 脱离彼此作用域瞬间通知解除关联信号; 下面是一个简单的例子演示如何捕捉开始相交时刻打印日志消息: ```javascript const { _decorator, Component } = cc; const { ccclass, property } = _decorator; @ccclass('Example') export class Example extends Component { start() {} // 碰撞开始时被调用 onBeginContact(contact, selfCollider, otherCollider){ console.log("A collision has started between",selfCollider.node.name,"and",otherCollider.node.name); } } ``` 以上即为基于最新版本文档资料整理出来的基本指南介绍完毕!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值