CocosCreator触摸事件的使用

本文详细介绍了CocosCreator中触摸事件的类型、监听及关闭方法,并提供了实战代码示例,包括触摸开始、移动、结束等事件的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

语法

触摸事件类型

类型语法作用
STARTTOUCH_START触摸开始
MOVETOUCH_MOVE触摸移动
ENDEDTOUCH_ENDED触摸结束(在作用域内抬起)
CANCELTOUCH_CANCEL触摸结束(在作用域外抬起)

监听触摸事件

on
在节点上注册指定类型的回调函数,也可以设置 target 用于绑定响应函数的 this 对象。

语法

this.node.on(Type,callback,target);

实例

this.node.on(cc.node.EventType.TOUCH_START,this.on_touch_start,this);

解析

  1. Node.EventType.Type 表示要监听的事件类型
  2. callback 事件发生时要执行的回调函数(要做什么)
  3. target 用于绑定响应函数的 this 对象。

关闭触摸事件

单独关闭

off
删除之前与同类型,回调,目标或 useCapture 注册的回调。
语法

this.node.off(cc.Node.EventType.Type,callback,target);

实例

this.node.off(cc.Node.EventType.TOUCH_START,on_touch_start,this);

解析
关闭事件类型为TOUCH_START,回调函数为on_touch_start,target为this的回调
如果你要关闭某个事件那么三个属性都要一样才行

整体关闭

targetOff
移除目标上的所有注册事件。

语法

node.targetOff(target);

实例

this.Node.targetOff(this);

回调函数参数设置

function(t) t => (cc.Touch)
callback处的回调函数有个参数t
参数方法

方法作用
getLocation获取当前触摸点的位置
getLocationX获取当前触摸点的x坐标(同理还有个Y)
getPreviousLocation获取上一次触摸点的位置,对象包含 x 和 y 属性
getStartLocation获取第一次落下的位置,对象包含 x 和 y 属性
getDelta获取距离上一次事件的移动距离,对象包含 x 和 y 属性
getID触点的标识 ID,可以用来在多点触摸中跟踪触点。
setTouchInfo设置触摸相关的信息。用于监控触摸事件。参数id,x,y

还有获取在游戏窗口的位置坐标,在窗口位置的坐标方法在以上方法上加InView,例getStartLocationInView

实例

on_touch_start(t){
	//输出当前触摸点的位置
	console.log(t.getLocation());
}

实战

这里做了一个简单的按住移动效果,来展示上面的各种方法使用。其他方法可以照葫芦画瓢。

cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    onLoad () {
    	//监听触摸开始事件
    	this.node.on(cc.Node.EventType.TOUCH_START,function(t){
    		//函数体内写事件发生时的事情
    		//当触摸开始是打印以下字样
    		console.log("触摸开始");
    	},this);
    	//监听触摸移动事件
    	//使用自定义回调函数
    	this.node.on(cc.Node.EventType.TOUCH_MOVE,this.on_touch_move,this);
    	//结束触摸移动事件
    	//this.node.off(cc.Node.EventType.TOUCH_MOVE,this.on_touch_move,this);
    	
    	//监听作用域内触摸抬起事件
    	this.node.on(cc.Node.EventType.TOUCH_ENDED,function(t){
    		console.log("触摸内结束");
    	},this);
    	//监听作用域外触摸抬起事件
    	this.node.on(cc.Node.EventType.TOUCH_CANCEL,function(t){
    		console.log("触摸外开始");
    	},this);

    },
    //自定义回调函数,参数t
    on_touch_move(t){
    	//定义一个n_pos变量存储当前触摸点的位置
    	var n_pos = t.getLocation();
    	//打印触摸点的坐标,x坐标,y坐标
    	console.log(n_pos,n_pos.x,n_pos.y);

    	//定义变量delta存储变化距离
    	var delta = t.getDelta();
    	//变化当前节点位置使其跟随触摸点,实现按住移动效果
    	this.node.x += delta.x;
    	this.node.y += delta.y;
    },

    //start () {},

    // update (dt) {},
});

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值