本文共 5095 字,大约阅读时间需要 16 分钟。
前面做了开始动画,今天利用闲散时间做一下场景管理。场景主要包括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); }); },
场景切换需要界面来点击互动吧,高级点搞一个角色供玩家控制然后接触传送口来触发场景转换。毕竟剧情是时空管理局,就把时空跳跃实验室作为地图中转站。让主角在这里选择不同的章节开干。
新建的操作都是在层级管理器:Canvas——右击创建节点——…
其中: mapNode-空节点;UI-空节点;joystick/bg-sprite精灵;bt1~5-button按键;itemsScrollView-scrollview;equipmet-空节点,子对象head等为Sprite精灵节点; 后面做小地图或者更多功能会相应添加和删除node,可以右击复制mainMap场景文件,然后粘贴下来,作为后面其他场景使用(省点时间)任选一个node,在属性检查器窗口找到GROUP-点击编辑按键
添加分组和允许碰撞设置如下: 保存后退回到node界面,设置UI的group为UI,这样就不会跟其他碰撞也能单独UIcamera查看(1)点击Main Camera,在属性检查窗口设置如下(不显示UI组)
(2)添加多一个camera命名“UICamera”,设置如下,后面给角色添加镜头跟随,UI组件就不会由于摄像头移动产生位移离开摄像头范围了
这里说说原理:Main Camera不显示UI,故负责显示UI之外的内容;UICamera只显示UI,因为它本身不移动,故它显示的UI组的物体都是固定不动的,加上UICamera在main camera渲染后,所以UI都是在固定在屏幕中变成手柄按键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); },
用于控制player的移动,按照角度运算来控制角色的移动。后面章节配代码详谈
(1)动作类button:可以定义一个带参数的函数,后面跟player角色动作制作一起介绍
(2)界面交互类button:控制显示/隐藏NODEonShowHide:function(e,customerData){ var uiobj = cc.find('Canvas').getChildByName('UI');//只能在UI生效 var obj = uiobj.getChildByName(customerData); if(obj){ obj.active = obj.active ? false:true; } },
一般使用scrollview作为物品栏。后面制作游戏物品写代码时候介绍
Sprite节点是用的最多的节点,一般使用来绑定icon等,然后添加碰撞、js脚本组件,使用起来不难。
今天先完成基本的场景搭建,也顺带简单介绍下botton、sprite、scrollview等我们游戏用的组件,后面继续制作UI、地图、关卡文本等。cocos项目文件和代码上传到我的博客下载资源中,欢迎下载
转载地址:http://qpcii.baihongyu.com/