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教程哦~