CocosCreator 全局Touch事件

本文介绍在Cocos Creator中实现全局触控事件的方法,包括如何创建触控监听器,处理触摸开始、移动、结束及取消事件。此外,还探讨了如何使触控事件穿过透明区域,即使在节点的透明部分也能接收到触控输入。
全局的Touch事件
const{ccclass}=cc._decorator;
@ccclass
export default class GlobalTouchInput extends cc.Component{
	private _eventManager=cc["internal"]["eventManager"];
	private _touchListener:any;
	private start():void{		
		const self=this;
		const EventListener=cc["EventListener"];
		this._touchListener=EventListener.create({
			event:EventListener.TOUCH_ONE_BY_ONE,
			swallowTouches:false,
			owner:self.node,
			mask:null,
			onTouchBegan:self.onTouchStart,
			onTouchMoved:self.onTouchMoved,
			onTouchEnded:self.onTouchEnded,
			onTouchCancelled:self.onTouchCancelled
		});
		this._eventManager.addListener(this._touchListener,this.node);
	}
	
	private onTouchStart(touch:cc.Touch,event:cc.Event.EventTouch):boolean{
		cc.log("touch start");
		//此处必须返回true(表示接触到了节点),否则TOUCH_MOVE,TOUCH_END,TOUCH_CANCEL不触发。
		return true;
	}
	private onTouchMoved(touch:cc.Touch,event:cc.Event.EventTouch):void{
		cc.log("touch move");
	}
	private onTouchEnded(touch:cc.Touch,event:cc.Event.EventTouch):void{
		cc.log("touch end");
	}
	private onTouchCancelled(touch:cc.Touch,event:cc.Event.EventTouch):void{
		cc.log("touch cancel");
	}
	
	private onDestroy():void{
		this._eventManager.removeListener(this._touchListener,this.node);
	}
	
}
touch穿过透明区域(以下代码未验证)
const {ccclass,property}=cc._decorator;

@ccclass
export default class CrossTransparentTouch extends cc.Component{
	private start():void{
		this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd,this)
		this.node["_hitTest"]=this.hitTest.bind(this);
	}
	
	private hitTest(point:cc.Vec2){
		let locationInNode=this.node.convertToNodeSpaceAR(point);
		let size=this.node.getContentSize();
		let sprite=this.node.getComponent(cc.Sprite);
		if(sprite){
			//需要在编辑设置 texture.packable 为 false
			let imgObj=sprite.spriteFrame.getTexture().getHtmlElementObj();
			return this.onLucencyTouch(imgObj, locationInNode.x, size.height-locationInNode.y);
		}
		return false;
	}

	private onLucencyTouch(img:HTMLImageElement,x:number,y:number):boolean{
		let cvs=document.createElement("canvas");
		let ctx=cvs.getContext('2d');
		cvs.width=1;
		cvs.height=1;
		ctx.drawImage(img,x,y,1,1,0,0,1,1);
		let imgdata=ctx.getImageData(0,0,1,1);
		return imgdata.data[3]>0;
	}
	
	private onTouchEnd(eventTouch:cc.Event.EventTouch):void{
		console.log("touch end")
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值