CocosCreator学习笔记-官方教学-05-scripting-03-event（事件）

此章节有4个演示案例，分别是：

EventInMask（事件遮罩）1 三个图片相互覆盖，可触摸滑动最上面的图片；2 更改图片的层级；3 消失一个图片

MousePropagation（鼠标传播）

SimpleEvent（简单事件）

TouchPropagation（触摸传播）

1/EventInMask（事件遮罩）

首先建立一个遮罩组（遮罩层+图片），步骤如下（并按此步骤重复制做三次，如图）：

步骤1：新建工程，canvas下添加空节点取名"container"(容器)

步骤2：container下添加空节点mask，mask添加渲染组件Mask，调整mask的node的size参数值到合适值

注意：mask的node的size参数最初为00，所以什么都看不到

步骤3：节点mask添加图片子节点（）

然后将脚本TouchDragger挂到每个遮罩组的图片上，就可以拖动图片移动了

var TouchDragger = cc.Class({
    extends: cc.Component,
    properties: {
        propagate: {
            default: false
        },
    },
    // use this for initialization
    onLoad: function () {
        this.node.opacity = 160;//透明度最高255 这里降低
//下面是 几个监听事件：触摸开始，触摸移动，触摸结束
        this.node.on(cc.Node.EventType.TOUCH_START, function () {
            cc.log('Drag stated ...');
            this.opacity = 255;
        }, this.node);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 255;
            var delta = event.touch.getDelta();//触摸移动增加值 vec2
            this.x += delta.x;
            this.y += delta.y;
            if (this.getComponent(TouchDragger).propagate)
                event.stopPropagation();//停止消息事件
               
        }, this.node);
        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            this.opacity = 160;
        }, this.node);
    },
});

canvas上挂一个脚本  OrderSwitcher

cc.Class({
    extends: cc.Component,
    properties: {
        container: cc.Node
    },
    // use this for initialization
    switch: function () {
        var children = this.container.children;
        var length = children.length;
        if (length > 1) {
            var src = Math.floor( Math.random() * length );
            var node = children[src];
            var dst = src === length-1 ? 0 : src+1;
            node.setSiblingIndex(dst); //node编号 src 和 dst互换
        }
    },
});

2/MousePropagation（鼠标事件冒泡 传递）

add -> attention -> restart  三个组件递次挂接组件，每个组件 挂脚本 MouseDragger（鼠标事件）

var TouchDragger = cc.Class({
    extends: cc.Component,
    properties: {
        propagate: {
            default: false
        },
    },
    // use this for initialization
    onLoad: function () {
        this._down = false;
        this.node.opacity = 160;
        this.node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
            cc.log('Drag stated ...');
            this.node.opacity = 255;
            this._down = true;
            if (!this.propagate)
                event.stopPropagation();
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_MOVE, function (event) {
            if (!this._down) {
                event.stopPropagation();
                return
            }
            this.node.opacity = 255;
            var delta = event.getDelta();
            this.node.x += delta.x;
            this.node.y += delta.y;
            if (!this.propagate)
                event.stopPropagation();
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_LEAVE, function (event) {
            if (!this._down) {
                event.stopPropagation();
                return
            }
            this.node.opacity = 160;
            cc.log('Drag leave ...');
            this._down = false;
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_UP, function (event) {
            if (!this._down) {
                event.stopPropagation();
                return
            }
            cc.log('Drag done ...');
            this.node.opacity = 160;
            this._down = false;
        }, this);
    },
});

3/SimpleEvent（简单事件）

add  加脚本 TouchEvent（触摸事件）   ActionCallback(动画)

cancel 加脚本 MouseEvent （鼠标事件）   ActionCallback(动画)

restart 加脚本 TouchEvent （触摸事件）  CustomEvent

//TouchEvent
cc.Class({
    extends: cc.Component,
    properties: {
    },
    _callback: null,
    // use this for initialization
    onLoad: function () {
        this.node.opacity = 100;
        this.node.on(cc.Node.EventType.TOUCH_START, function () {
            this.node.opacity = 255;
        }, this);
        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            this.node.opacity = 100;
            if (this._callback) {
                this._callback();
            }
        }, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function () {
            this.node.opacity = 100;
        }, this);
    },
});

//MouseEvent
cc.Class({
    extends: cc.Component,
    properties: {
    },
    move: function (event) {
        this.node.x += event.getDeltaX();
        this.node.y += event.getDeltaY();
    },
    // use this for initialization
    onLoad: function () {
        this.scroll = 0;
        this.node.opacity = 50;
        this.node.on(cc.Node.EventType.MOUSE_DOWN, function () {
            this.node.opacity = 255;
            this.node.on(cc.Node.EventType.MOUSE_MOVE, this.move, this);
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_ENTER, function () {
            this.node.opacity = 160;
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_LEAVE, function () {
            this.node.opacity = 50;
            this.node.off(cc.Node.EventType.MOUSE_MOVE, this.move, this);
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_UP, function () {
            this.node.opacity = 50;
            this.node.off(cc.Node.EventType.MOUSE_MOVE, this.move, this);
            if (this._callback) {
                this._callback();
            }
        }, this);
        this.node.on(cc.Node.EventType.MOUSE_WHEEL, function (event) {
            this.scroll += event.getScrollY();
            var h = this.node.height;
            this.scroll = cc.clampf(this.scroll, -2 * h, 0.7 * h);
            this.node.scale = 1 - this.scroll/h;
        }, this);
    },
});

//ActionCallback
cc.Class({
    extends: cc.Component,
    // use this for initialization
    onLoad: function () {
        var touchEvent = this.getComponent('TouchEvent');
        var mouseEvent = this.getComponent('MouseEvent');
        var event = touchEvent || mouseEvent;
        event._callback = function () {
            this.node.runAction(cc.sequence(
                cc.scaleTo(0.5, 2, 2),
                cc.scaleTo(0.25, 1, 1)
            ));
        }
    },
});

 

//CustomEvent
cc.Class({
    extends: cc.Component,
    properties: {
    },
    // use this for initialization
    onLoad: function () {
        var touchEvent = this.getComponent('TouchEvent');
        // Emit CUSTOM_EVENT to its listeners while touch end
        touchEvent._callback = (function () {
            this.node.emit('CUSTOM_EVENT');
        }).bind(this);
        var addButton = cc.find('Canvas/add');
        var cancelButton = cc.find('Canvas/cancel');
        function onCustomEvent (event) {
            this.runAction(cc.sequence(
                cc.scaleTo(0.5, 2, 1),
                cc.scaleTo(0.25, 1, 1)
            ));
        }
        this.node.on('CUSTOM_EVENT', onCustomEvent, addButton);
        this.node.on('CUSTOM_EVENT', onCustomEvent, cancelButton);
    },
});

知识点：

消息传递

this.node.emit("事件类型")

 

脚本动画播放脚本动画

this.runAction(cc.sequence(cc.scaleTo(0.5,2,1),cc.scaleTo(0.25,1,1)))

4/TouchPropagation（触摸事件 传递）

//TouchDragger
var TouchDragger = cc.Class({
    extends: cc.Component,

    properties: {
        propagate: {
            default: false
        },
        // ...
    },
    // use this for initialization
    onLoad: function () {
        this.node.opacity = 160;
        this.node.on(cc.Node.EventType.TOUCH_START, function () {
            cc.log('Drag stated ...');
            this.opacity = 255;
        }, this.node);
        
        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 255;
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
            if (this.getComponent(TouchDragger).propagate)
                event.stopPropagation();
        }, this.node);
        
     
        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            this.opacity = 160;
        }, this.node);
    },
});

知识点：

1 图层遮罩： 

1遮罩层不能和其它渲染组件同存，一般用空节点在添加组件里的渲染组件里找

2刚添加mask要调整下node的参数，要不然没效果

3mask三种分类，矩形，椭圆（切割形，n边型），图形遮罩

https://docs.cocos.com/creator/manual/zh/components/mask.html?h=mask

2 消息事件

this.node.on(消息类型，回调函数，this) 绑定消息

event.touch.getDelta() 返回Vec2 获取触点距离上一次事件移动的距离对象，对象包含 x 和 y 属性。

监听和发射事件           https://docs.cocos.com/creator/manual/zh/scripting/events.html

节点系统事件               https://docs.cocos.com/creator/manual/zh/scripting/internal-events.html?h=getdelta

event.stopPropagation() 停止消息传递

3   children数组 的 第1个元素 和 第2个元素 互换层级

  var node = children[0];

node.setSiblingIndex(1);