给宝宝做一个cocos免费游戏

第一章背景和开发框架介绍

第二章 Node树和场景制作

第三章 UI、地图和关卡文本制作（一）

第三章 UI、地图和关卡文本制作（二）

第四章摇杆、按键和角色动画制作

第五章敌人和AI制作

第六章角色和敌人行为互动脚本制作

第七章游戏打包、发布和调试

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

一、地图

主流的小游戏可以使用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"}   ]