给宝宝做一个cocos免费游戏

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

第二章 Node树和场景制作

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

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

第五章敌人和AI制作

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

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

给宝宝做一个cocos免费游戏-Node树和场景制作

前言

前面做了开始动画，今天利用闲散时间做一下场景管理。场景主要包括Node树如何分布和场景切换管理。按照我们构想的世界观，应该是实验室可以执行超时空跳跃作为map类场景，按照不同任务跳跃到相应的场景应该就是冒险和战斗场景，实验室需要建设和推动主剧情就作为建设类场景。下面从通用场景转换方法和场景Node树搭建来介绍。

一、通用场景转换介绍

cocos creator使用cc.director.loadScene方法加载和切换不同场景，参考java类的用法，我们都把重复调用的方法写到canvasjs.js上，后面通过require(‘canvasjs.js’)来实例化和使用里面定义的方法、属性等。

loadAndGotoScene:function(sname){
           cc.director.preloadScene(sname,function(e){
              //load完回调函数           cc.director.loadScene(sname);        });    },

二、场景Node树搭建

1.构想

场景切换需要界面来点击互动吧，高级点搞一个角色供玩家控制然后接触传送口来触发场景转换。毕竟剧情是时空管理局，就把时空跳跃实验室作为地图中转站。让主角在这里选择不同的章节开干。

2.建立Node树

（1）打开上一次建立的cocos项目，新建一个“mainMap”的Scene

在这里插入图片描述

顺便双击login场景文件，也把上一个login场景的点击任意键开始代码写一下，点击后load到我们mainMap场景

（2）双击mainMap场景，在层级管理器窗口建立以下Node树

新建的操作都是在层级管理器：Canvas——右击创建节点——…

其中：

mapNode-空节点；UI-空节点；joystick/bg-sprite精灵;bt1~5-button按键；itemsScrollView-scrollview；equipmet-空节点，子对象head等为Sprite精灵节点；

后面做小地图或者更多功能会相应添加和删除node，可以右击复制mainMap场景文件，然后粘贴下来，作为后面其他场景使用（省点时间）

3.为相应的Node添加代码、碰撞等组件

3.1 设置“组”

任选一个node，在属性检查器窗口找到GROUP-点击编辑按键

添加分组和允许碰撞设置如下：

保存后退回到node界面，设置UI的group为UI，这样就不会跟其他碰撞也能单独UIcamera查看

3.2 摄像头设置

（1）点击Main Camera，在属性检查窗口设置如下（不显示UI组）

（2）添加多一个camera命名“UICamera”，设置如下，后面给角色添加镜头跟随，UI组件就不会由于摄像头移动产生位移离开摄像头范围了

这里说说原理：Main Camera不显示UI，故负责显示UI之外的内容；UICamera只显示UI，因为它本身不移动，故它显示的UI组的物体都是固定不动的，加上UICamera在main camera渲染后，所以UI都是在固定在屏幕中变成手柄按键

3.3 mapNode节点

mapNode的类型是一个空节点，后面制作map时候会详细介绍，作为副本不断添加Sprite作为map的对象，从而形成地图和场景进入口。这里在全局的canvasjs.js添加loadMapObj方法，把mapNode的对象写入json（请见这篇文章的项目文件），进入场景马上加载json以形成地图

在Canvas节点添加canvasjs.js脚本组件，然后拖动prefab预制体到js定义的属性方便预加载和实例化（prefab怎么制作放到下一章）

json：{
   "mapobj" : [{
   "sname":"mainMap","type":"floor", "name":"fl0","posx":"0","posy":"100","rotation":"0"},{
   "sname":"mainMap","type":"wall",  "name":"wl0","posx":"100","posy":"-100","rotation":"0"},{
   "sname":"mainMap","type":"tree",  "name":"tr0","posx":"0","posy":"-100","rotation":"30"},{
   "sname":"mainMap","type":"box",   "name":"bo0","posx":"200","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":"300","rotation":"0"}],}js代码：   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);  },

3.4 joystick/bg节点

用于控制player的移动，按照角度运算来控制角色的移动。后面章节配代码详谈

3.5 botton节点

（1）动作类button:可以定义一个带参数的函数，后面跟player角色动作制作一起介绍

（2）界面交互类button：控制显示/隐藏NODE

onShowHide:function(e,customerData){
       var uiobj = cc.find('Canvas').getChildByName('UI');//只能在UI生效    var obj  = uiobj.getChildByName(customerData);    if(obj){
         obj.active = obj.active ? false:true;    }  },