Cocos Creator 触摸事件

触摸事件(Touch Event) 在游戏中是经常使用到的。比如常用移动人物,滑动页面等等。下面就为新手们作讲解

介绍

  • 设置触摸区域
    也就是设置需要触摸所在node的长宽区域即node属性中的size,如图1所示

     

    TIM截图20181006152616.png

  • 触摸事件注册监听
    通过cc.Node类中的on注册事件来使用的,比如注册Touch Start 事件
在继承Component的脚本中
//添加一个Touch Start 事件
this.node.on('touchstart',this.onEventStart,this);
  • 触摸事件取消监听
    如注册监听类似,不过不使用on事件,而是使用off事件。
this.node.off('touchstart',this.onEventStart,this);

回调事件

  • Start事件 (当手指触点落在目标节点区域内时回调)
    如果你想在触摸开始时做点事件,就可以监听此事件。
  • Move事件(当手指在屏幕上目标节点区域内移动时)
    如果当你想知道移动信息做一些操作时,可监听此事件。
  • End事件(当手指在目标节点区域内离开屏幕时)
    如果你是在触摸区域内松开时,会回调此事件。
  • Cancel事件(当手指在目标节点区域外离开屏幕时)
    如果你是触摸区域内松开时,是不会回调End事件,而回调Cancel事件。

例子

cc.Class({
    extends: cc.Component,

    properties: {

    },

    onLoad() {
        this.registerEvent();
    },

    registerEvent() {
        //touchstart 可以换成cc.Node.EventType.TOUCH_START
        this.node.on('touchstart', this.onEventStart, this);
        //touchmove 可以换成cc.Node.EventType.TOUCH_MOVE
        this.node.on('touchmove', this.onEventMove, this);
        //touchcancel 可以换成cc.Node.EventType.TOUCH_CANCEL
        this.node.on('touchcancel', this.onEventCancel, this);
        //touchend 可以换成cc.Node.EventType.TOUCH_END
        this.node.on('touchend', this.onEventEnd, this);
    },

    init(data) {

    },

    /**
     * 触摸开始
     * @param {*} event 
     */
    onEventStart(event) {
        //世界坐标
        let worldPoint = event.getLocation();
        console.log('start Event \n worldPoint=', worldPoint);

    },

    /**
     * 触摸移动
     * @param {*} event 
     */
    onEventMove(event) {
        //世界坐标
        let worldPoint = event.getLocation();
        console.log('move Move \n worldPoint=', worldPoint);
    },

    /**
     * 触摸
     * 当手指在目标节点区域外离开屏幕时
     * 比如说,触摸node的size是200x200。
     * 当超过这个区域时,就是触发这个事件
     * @param {*} event 
     */
    onEventCancel(event) {
        //世界坐标
        let worldPoint = event.getLocation();
        console.log('cancel Event \n worldPoint=', worldPoint);
    },

    /**
     * 当手指在目标节点区域内离开屏幕时
     * @param {*} event 
     */
    onEventEnd(event) {
        //世界坐标
        let worldPoint = event.getLocation();
        console.log('end Event \n worldPoint=', worldPoint);
    },

    update(dt) {

    },

    onDestroy() {
    }
});

最后

希望通过讲解,对新手们有所帮助。这是完整Demo。最后还是那句话,喜欢就动动手指点喜欢,关注我吧。我会不定时更新Cocos Creator教程哦~



作者:Leo501
链接:https://www.jianshu.com/p/21f7b2fc3468
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(Cocos2d-JS)