cocos UI、地图和关卡文本制作（二）

给宝宝做一个cocos免费游戏

第一章 背景和开发框架介绍
第二章 Node树和场景制作
第三章 UI、地图和关卡文本制作（一）
第三章 UI、地图和关卡文本制作（二）
第四章 摇杆、按键和角色动画制作

第五章 敌人和AI制作
第六章 角色和敌人行为互动脚本制作
第七章 游戏打包、发布和调试

---

一、地图

主流的小游戏可以使用tipmap工具进行地图编辑，由于考虑要实现动态的地图，后面有野心+时间就要做个地图编辑器，所以我还是选用json+复制node的方法（性能未比较）

1.地图数据

沿用JSON,js和json方法都会了肯定有好处学多点嘛

{
"mapobj" : [
    {"sname":"mainMap","type":"floor", "name":"fl","posx":"-500","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f2","posx":"-480","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f3","posx":"-450","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f4","posx":"-420","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f5","posx":"-390","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f6","posx":"-360","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f7","posx":"-320","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f8","posx":"-290","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"f9","posx":"-100","posy":"-100","rotation":"0"},
    {"sname":"mainMap","type":"floor", "name":"fl0","posx":"0","posy":"-100","rotation":"0"},
{"sname":"mainMap","type":"floor", "name":"fl1","posx":"400","posy":"-100","rotation":"0"},
{"sname":"mainMap","type":"wall",  "name":"wl0","posx":"100","posy":"-100","rotation":"0"},
{"sname":"mainMap","type":"wall",  "name":"wl0","posx":"100","posy":"-40","rotation":"0"},
{"sname":"mainMap","type":"tree",  "name":"tr0","posx":"-450","posy":"-33","rotation":"0"},
{"sname":"mainMap","type":"box",   "name":"bo0","posx":"100","posy":"0","rotation":"0"},
{"sname":"mainMap","type":"enemis","name":"en1","posx":"300","posy":"100","rotation":"0"},
{"sname":"mainMap","type":"water", "name":"wt0","posx":"300","posy":"-200","rotation":"0"}
]
}

2.制作预制体

dool预制体（由于之前了解到读取json是异步的然后读取spriteframe会出现时间不同步而导致读完只能显示在最后的记录，这里使用固定sprite方法来做，也算是第二种代替方案，麻烦点）

（1）textpacker打包地图图片（wall、floor等最小单位）

把打包后的png和plist文件丢进去项目的"resources\texttrue\map"

（2）添加floor预制体

mapNode节点右击创建一个sprite节点命名floor，拖动png到spriteframe

然后添加碰撞组件（方便后面主角和敌人接触时候产生动作）

选定组为map，这样能够跟player等碰撞

最后拖动到prefab文件夹，完成prefab制作

同理做好其他地图对象的prefab后，添加到Cavas节点，进入马上加载方便实例化复制

3.根据数据散布map、obj

//map controller
  loadMapObj: function (e) {
    var scenename = cc.director.getScene().name;
    var url = 'json/main';//resources/json/..
    cc.loader.loadRes(url, cc.RawAsset, function (err, res) {
      if (!err) {
        var rs = res.json.mapobj;//loop
        for (var i = 0; i < rs.length; i++) {
          if (rs[i].sname == scenename && rs[i].type) {
            //    cc.log(rs[i].name);
            var obj;
            switch (rs[i].type) {
              case 'floor':
                obj = cc.instantiate(this.floor);//prefab预制体
                break;
              case 'tree':
                obj = cc.instantiate(this.tree);
                break;
              case 'stone':
                obj = cc.instantiate(this.stone);
                break;
              case 'box':
                obj = cc.instantiate(this.box);
                break;
              case 'water':
                obj = cc.instantiate(this.water);
                break;
              case 'wall':
                obj = cc.instantiate(this.wall);
                break;
              case 'enemis':
                obj = cc.instantiate(this.enemis);
                break;
              case 'trigger':
                obj = cc.instantiate(this.trigger);
                break;
            }
            if (obj) {
              //  obj.getComponent(cc.spriteFrame).spriteFrame = '';  
              obj.name = rs[i].name;
              obj.angle = - rs[i].rotation;//方向
              obj.parent = this.mainmap;
              obj.setPosition(cc.v3(rs[i].posx, rs[i].posy, 0));//位置 注意是否需要转换世界坐标 []字符串位数，不准
            }
          }
        }
        //
      } else { cc.log(err); }            //异步 往往会执行后面之后再回调函数
    });
    // cc.log(rs);
  },

最终的效果：

二、关卡预制体和文本

1.预制体与碰撞

产生交互的主要有box这类-接触弹出物品，门-接触后打开或者关闭、转入别的场景、人物聊天，特殊点触发剧情等等。可以在这些预制体加上js检测碰撞来实现

（1）章节预载体

在mapNode节点添加一个sprite节点命名guider，组设置为maps,新建一个aijs.js脚本，然后在这个节点添加aijs.js，添加碰撞组件（后面ai脚本也准备写在这里，毕竟都是碰撞反应类代码）

这样的话，考虑在canvas节点的canvasjs.js组件添加一个trigger（触发）作为map兑现，后面可以在json维护进去，这样在map指定位置就能触发了

（2）JSON写入

在json的mapobj中写入：

{"sname":"mainMap","type":"trigger", "name":"tr01","posx":"-300","posy":"-50","rotation":"0"}

在guider的aijs.js脚本写入

    properties: {
       reacttype:'guid', //guid-guid文本  dialog-对话 player-用户ai enemy-en的ai story-剧情（文本、动画）
       lv:10001,//章节最大9999个对话 不同的章节用20001 30001...
        },
   onLoad() {
        //开启碰撞检测
        var collider = cc.director.getCollisionManager();
        collider.enabled = true;
  }  
  //持续碰撞检测
    onCollisionStay:function(other,self){
          if(other.node.group == 'players'){
              switch(this.reacttype){
                  case 'guid' : break;
                     self.node.getChildByName('RichText').getComponent(cc.RichText).string = '您好开发者，欢迎来到新手村';
                     self.node.getChildByName('RichText').active = true;
              }
          }
    },

2.剧情文本存储

专业的gamer会有专业的文本框架或者工具，我们菜鸟，手把手做吧。还是使用JSON吧，应该不会出现在异步里面调用异步的情形。

"txt":[
{"id":"s1","desc":"Hello,dear fresh,请选择您的职业","source":"","callback":""},
{"id":"s2","desc":"1.剑人","source":"s1","callback":"1"}   , 
{"id":"s3","desc":"2.法克","source":"s1","callback":"2"}   , 
{"id":"s2","desc":"3.箭人","source":"s1","callback":"3"}   
]

2.读入数据

还是使用cc.loader.loadRes()读取，不详细说明了。后面找时间做一个角色对话专题吧。连主角还没做呢，重头戏啊

总结

这一章终于完成了，后面制作角色控制方面的内容，搞了这么久终于到角色和ai的重点环节了