cocos creator 2.4.9 踩坑记

记录cocos使用过程中碰到的一些坑点，此篇主要记录的是 cocos2.4.9的，部分备注了（2&3）的标识 2+跟3+的版本都存在对应的问题

1. mask遮罩处理不了边缘半透明的类型（2&3）

2. 强制横屏项目，不能自适应，需要修改源码

• cocos导出非md5版本，复制非min版本的cocos js源码文件

• 找到 _initFrameSize 方法

• 修改else 判断里面的，换成一下代码

  locFrameSize.width = w||h;
  locFrameSize.height = h||w;
  

3. assets 资源cdn地址配置，同样需要非min版本的cocos源码，需要修改 18844行

• 找到 “assets/”，并在前面加上cdn地址。

4. json清缓存，同样需要非min版本的cocos源码

• 找到 downloadJson里面的downloadFile，修改url参数，在url地址后面拼接上版本号

5. 对第4点进行补充，因为导出的带MD5码的文件，正式环境会出现跨域问题，报404

6. 需要分段播放的动画，不能放在同个动画文件里面，需要分成多个动画文件（2&3）

7. cdn地址配置需要改源码，2.4.9的版本没有配置渠道，3+的在构建项目的时候可以配置

8. 构建项目（2.4.9的cocos creator）的导出地址不能带中文符号，3+的可以

9. 节点的事件，只有阶段类型的，没有连贯的。例如：移动端只能用touch的三个阶段的事件。PC端如果是点击事件，也只能在down，move，up中选择或者设置配套的。（2&3）

起因：因为做长地图需求，如果地图上有需要点击的节点的话，需要对节点的点击事件做一个处理，不然在拖动过程中很容易误触

• 移动点击事件可用以下方法，设置的时候，给场景最外层的节点设置一个script文件，之后就可以全局使用了
• 代码

/**
* 但进行移动或者是在settimeout没结束之前触摸了别的节点，则去掉当前事件的返回。
* settimeout时间可调
* 距离判断也可调
*/
clickEvent(node, callback) {
  let startCur = null,
      startXY = null,
      st = null;

  node.on(cc.Node.EventType.TOUCH_START, (e) => {
      e.stopPropagation();
      startCur = e.currentTarget;
      startXY = [Math.abs(e.getLocationX()), Math.abs(e.getLocationY())];
      clearTimeout(st);
      st = setTimeout(() => {
          callback && callback();
      }, 100);
  });
  node.on(cc.Node.EventType.TOUCH_MOVE, (e) => {
      let endXYoff = [Math.abs(e.getLocationX() - startXY[0]), Math.abs(e.getLocationY() - startXY[1])];
      if (endXYoff[0] >= 5 || endXYoff[1] >= 5) {
          clearTimeout(st);
      }
  });
  node.on(cc.Node.EventType.TOUCH_END, (e) => {
      let endCur = e.currentTarget;
      if (startCur != endCur) {
          clearTimeout(st);
      }
  });
}

// 在别的script文件中使用
// 在onload或者是start方法中调用即可
this.clickEvent = cc.find('绑定了全局js的节点名').getComponent('全局js的组件名').clickEvent;

10. 帧事件的用法（2&3）

• 写法1：可以写在绑定到对应节点的script文件中，必须跟需要使用帧事件动画的节点绑定到一起。代码如下：【此写法弊端：在帧事件的方法中，用不了this，需要做一个全局变量保存，但如果做全局变量保存，该script文件就不能多节点共用】

cc.Class({
    extends: cc.Component,

    properties: {},

    // LIFE-CYCLE CALLBACKS:

    onLoad() {},
    start() {},
    showTxt(action) {}  // 监听帧事件，方法名、参数名自定义
});

• 写法2：定义一个方法，在此方法中写需要监听的帧事件方法，然后绑定给对应节点的动画组件

cc.Class({
    extends: cc.Component,

    properties: {},
    // LIFE-CYCLE CALLBACKS:
    onLoad() {},
    start() {
        this.aniListener();
    },
    aniListener() {  // 自定义方法
        let self = this;
        const showTxt = (action)=> {}  // 监听帧事件，方法名、参数名自定义

        // 给某个节点的动画绑定帧事件方法，统一写法
        this.xxx.getComponent(cc.Animation).showTxt = showTxt;
    }
});

11. 动画如果需要反向播放的话，两种方式（2&3）

• 设置动画直接反向播放
  cc.find('Canvas/lh_fw').getComponent(cc.Animation).getAnimationState('test').wrapMode = cc.WrapMode.Reverse;
• 如果直接反向无法满足动画情况，可添加反向的动画Clip

12. 节点查找

// 根据路径去查找
var box = cc.find('canvas/page');
// 知道父级节点，查找子级，同样可用路径的方式
var child = box.find('节点名');