Cocos2d-js引擎使用微指南

全程使用Cocos Creator作为游戏编辑器进行开发，在此总结使用过程中遇到的一些问题与解决方案，不对具体的功能与API进行阐述。属于个人使用总结，有使用不当的地方望见谅。

版本管理

---

Cocos Creator并未集成git、SVN等代码版本控制系统，在分工开发中，最好根据业务场景分配游戏场景*(scene)到开发者手中，将动画（animation），脚本（Script），静态资源（resources）*按照场景分别创建文件夹进行存储。
若使用git作为版本控制系统，建议操作如下：

• 首先建议在本地创建一个根目录文件夹，用于存放不同版本的游戏代码，其中每一个文件夹代表一个游戏的整体代码，可在git clone/git pull后修改文件夹名称达到区分版本效果。
• 多个开发者在同一版本的基础上进行开发，当开发完成时，需按顺序进行版本git push，即确认当前版本为最新版本后，将本地更新过的文件以及.meta文件在不开启Creator的情况下复制到最新版本的文件夹中，并覆盖旧的文件。完成后再次开启Cocos Creator自测后进行代码上传。

Sublime注意事项

---

使用Sublime作为Cocos Creator脚本编辑器，在移动已经通过Sublime打开的JS脚本文件时，Sublime上正在编辑的文件已经不是被移动过后的脚本文件，若此时ctrl+s对文件进行修改和保存，会在被移动前的位置创建一个新的同名的JS脚本文件。

游戏界面控制相关

---

• 节点优先级：在同一个Canvas目录下，在层级管理器中的位置越靠下，Node节点的优先级越高，即背景图片应该位于Canvas子节点的最上部

• 使用更大的背景图片防止游戏穿帮：在iPhoneX 19.5：9，三星S918.5:9，iPhoe4 4:3等特殊机型中，传统6:9的设计分辨率比例往往会在屏幕两端出现黑边，要在不拉伸页面的情况下填满屏幕，就需要一个大于设计分辨率的背景图片，当屏幕比例大于设计比例时，继续显示设计分辨率之外的图片。

• Canvas同级节点能够自动适应屏幕：在场景编辑器中粉色框代表设计分辨率，使用同级并位于Canvas下方额节点，在实际效果呈现时，该节点不以Canvas作为坐标系对照，而是以整个屏幕作为坐标系载体（position.x,position.y值不变），能够达到一种伪“自适应”的效果。使用场景类似于通用按钮根据屏幕比例进行移动

• 图片分辨率限制：微信小游戏端限制图片分辨率最大为2000*2000，在Cocos Creator与微信开发者工具中，并不会进行报错提示信息，但是在扫描二维码进入的测试版本会提示错误

• 区别设计分辨率与图片分辨率：配合勾选的适配策略，会在不同分辨率的设备上对Canvas进行缩放，分辨率与文件实际大小与清晰度有关，与图片在Canvas中的长宽大小无关

节点相关

---

在Cocos Creator的层级关系类似于一个DOM树，可以从属性检查器看到每一个Node节点的信息。cocos2d-js提供了node.getChildByName(),node.children,node.parent

• 通过切换Node节点是否显示实现：

  使用场景：点击Node1，Node1消失显示Node2，位置可以选择，对切图要求小，能够很好的对齐位置

  properties: {
      active_node:{
          default:null,
          type:cc.Node
      }
  },
  onLoad(){
  	this.node.on(cc.Node.EventType,this.convert,this);        
  }
  convert:function(){
      this.node.active = false;
      this.active_node.active = true;
  }
  

• 通过更替节点的SpriteFrame实现：

  使用场景：适合多图切换场景，在Canvas中只有一个Node，仅修改SpriteFrame无法保证图片对齐，在切图无法统一分辨率的前提下需要再修改position

  properties: {
      state:1,//记录事件进行的状态
      first:{
          default:null,
          type:cc.SpriteFrame
      },//可以有多个SpriteFrame图片资源
      first_x:0,
      first_y:0,
  	...
  },
  onLoad(){
  	this.node.on(cc.Node.EventType,function(){
          this.switch(this.state);
      },this);        
  },
  switch:function(state){
  	var stateNum = parseInt(state);
          switvh(stateNum){
              case 1:this.node.getComponent(cc.Sprite).spriteFrame = this.first;
              	   this.node.setPosition(this.first_x, this.first_y);
                     state++;break;
              ...
          }
      
  }
  

• 通过动画实现：

  使用场景：节点点击后需要执行动画效果，其中在场景状态保持的部分，可以通过一个隐藏的Node节点进行保存，即不在再次进入场景时执行动画过程，而是直接隐藏涉及动画的几张图片，将最后效果图片的active属性设置为TRUE

  onLoad(){
  	this.node.on(cc.Node.EventType,this.click,this);        
  },
  click:function () {
          this.node.getComponent(cc.Animation).play('animation');
  },
  

• 点击效果优化

  在游戏不穿帮，图层合适的地方可以通过为Node增加Button组件进行点击效果的优化，使用SCALE作为按钮状态过渡类型能够让点击反馈更佳。

日志管理

---

使用Cocos Creator开发的游戏项目有两种打印日志的方式：

cc.log(); //cocos模式
console.log();//控制台模式

建议在开发过程中全程使用cc.log()，以构建发布微信小游戏为例，在构建运行到微信开发者平台上时，默认勾选调试模式，此时不会对cc.log()代码进行任何过滤，微信开发者平台也能够识别出cc.log()并在控制台打印日志，在调试模式下，console.log()与cc.log()效果完全相同。

当开发者不勾选“调试模式“时，Cocos Creator会将代码中所有cc.log()代码删除，编译构建在build目录下的代码就不会存在多余的日志输出。在微信开发者工具中，大量的日志输出会影响游戏的运行流畅性，若需要测试游戏过程的运行速度，请到真机做测试为最准确。

UI组件

---

• Layout

  为节点添加组件Layout，可以让该节点的子节点进行自动布局，通过属性检查器，开发者能设置一系列关于Layout的属性值。

通过合理设计父子节点，Layout组件能够运用在一些功能性按钮的排列与整体移动中，会更加好控制并使得代码更优美。对于收集展示形式的，需要动态修改的布局，有两种常用实现方式：

1. 使用prefab预制资源在初始化时动态生成

   以宝箱与卡片场景为例，在宝箱Layout初始化时发送网络请求获取获得卡片数据，逐个实例化卡片prefab，根据返回数据对prefab中的图片、文字进行填充，完成后将prefab添加到Layout节点中。

   其中问题在于图片动态加载方法loadRes()，方法通过回调函数异步执行获取spriteframe图片资源，当开发者在for循环中使用到了异步方法，需要关注值传递的正确性，loadRes函数有所局限，当前能从异步方法代码块中渠道唯一标识的部分就是spriteFrame中的属性，比如name。结合本地缓存cc.sys.localStorage.getItem()可以获取到指定的文本值。在for循环中的代码如下：

 cc.loader.loadRes(path, cc.SpriteFrame, function (err, spriteFrame) {
     if(err){
         cc.error(err.message || err);
         return;
     }
     var newCard = cc.instantiate(self.cardPrefab);
     var key = spriteFrame.name;
     var text = cc.sys.localStorage.getItem('key');
     newCard.getComponent(cc.Sprite).spriteFrame = spriteFrame;
     newCard.getComponent(cc.Label).string = text;
     self.layout.addChild(newCard);
 }); 	

此方式由于将节点生成与添加操作放在了loadRes()中，在动态资源加载与生成的阶段速度慢，效果欠佳，解决办法在于添加场景过渡动画，延迟或待加载全部完成之后再展示场景，节点展示顺序也无法确定。优势在于通用性强，无论数据如何增加无须改动代码。

2. 直接写死每一个Layout子节点

   如题将每一个图片、文字资源在设计阶段就填充完整，同时隐藏所有Layout子节点，也可在初始化时利用循环去完成隐藏，发送网络请求获取需要显示的节点名称列表，通过方法getChildByName()获取节点并赋值.active = true，注意，Layout布局中变为显示状态的节点依旧会顺序排列。

   这种方法优势在于快速的加载与代码的逻辑简单，但是也需要更多的工作量，并且可扩展性低。

• Toggle

微信小游戏项目转换微信公众号网页项目

---

微信小游戏提审阶段，当主体为企业时需要提交《广电总局版号批文》 、《文化部备案信息》、《计算机软件著作权登记证书》、《游戏自审自查报告》，由于广电总局与文化部的限制，至2018年9月为止版号发行与备案均已停止，主体选择只能为个人。同时，个人主体也存在一系列的问题。

微信小游戏项目转换微信公众号网页项目是一种解决方案。在cocos2d-js引擎下开发的项目可以做到这一点。在构建阶段选择Web Mobile模式，在构建完成后目录如下：

游戏入口文件为index.html，所有的脚本文件被统一压缩在src/project.js中，开发者需要在HTML中插入对微信SDK的引用，，主要是为了继续使用一些微信端API提供的分享、保存等功能。由于微信提供的小游戏SDK与公众号网页SDK存在一定的差异，wx调用的函数部分不同。在cocos中对于使用到微信API的部分进行确认与修改。注意对于openId的获取公众号网页项目主要通过后台获取用户openId，之后在访问前端入口的URI中抓取openId与lastOpenId数据。最后通过微信web开发者工具中的网页调试模式进行测试。