给宝宝做一个cocos免费游戏-Node树和场景制作
给宝宝做一个cocos免费游戏
第一章 背景和开发框架介绍
第二章 Node树和场景制作
第三章 UI、地图和关卡文本制作
第四章 摇杆、按键和角色动画制作
第五章 敌人和AI制作
第六章 角色和敌人行为互动脚本制作
第七章 游戏打包、发布和调试
给宝宝做一个cocos免费游戏-Node树和场景制作
- 给宝宝做一个cocos免费游戏
- 前言
- 一、通用场景转换介绍
- 二、场景Node树搭建
- 1.构想
- 2.建立Node树
- (1)打开上一次建立的cocos项目,新建一个“mainMap”的Scene
- (2)双击mainMap场景,在层级管理器窗口建立以下Node树
- 3.为相应的Node添加代码、碰撞等组件
- 3.1 设置“组”
- 3.2 摄像头设置
- 3.3 mapNode节点
- 3.4 joystick/bg节点
- 3.5 botton节点
- 3.6 scrollview节点(items)
- 3.7 其他Sprite节点
- 总结
前言
前面做了开始动画,今天利用闲散时间做一下场景管理。场景主要包括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;//loopfor (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;}},
3.6 scrollview节点(items)
一般使用scrollview作为物品栏。后面制作游戏物品写代码时候介绍
3.7 其他Sprite节点
Sprite节点是用的最多的节点,一般使用来绑定icon等,然后添加碰撞、js脚本组件,使用起来不难。
总结
今天先完成基本的场景搭建,也顺带简单介绍下botton、sprite、scrollview等我们游戏用的组件,后面继续制作UI、地图、关卡文本等。cocos项目文件和代码上传到我的博客下载资源中,欢迎下载
给宝宝做一个cocos免费游戏-Node树和场景制作相关推荐
- python大作业数独_python做一个数独小游戏
最近看了下python的一些知识,在这里记载一下. 1.首先是安装,在官网下载最新的版本3.6,安装的时候要注意在下面勾选上ADD TO PATH,安装的时候会自动写入到环境变量里面,如果没有勾选,可 ...
- 《看聊天记录都学不会Python到游戏实战?太菜了吧》(8)我们开始做一个数字小游戏吧
本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课程也将 ...
- 如何做一个跨平台的游戏App?
如何做一个跨平台的游戏App? iOS和安卓系统上的应用程序,根据提供的内容不同,按照开发方式和用户体验不同,可区分为app和游戏: 首先从开发方式不同来说明,app开发一般是用操作系统官方提供的开发 ...
- 用Python做一个猜数游戏(入门)
用Python做一个猜数游戏(入门) 目录: 用Python做一个猜数游戏(入门) 第一阶段: 第二阶段: 前言: 各位大佬大家好,我是夕阳样桑,由于最近时间有点紧,所以先做一个小程序.感谢大家的支持 ...
- 用C语言做一个迷宫小游戏
用C语言做一个迷宫小游戏,以下是代码段 这个迷宫游戏使用了递归回溯算法来寻找通往出口的路径.迷宫中的墙用'#'表示,路径用空格表示,入口和出口分别用'S'和'E'表示,已走过的路径用'*'表示.在生成 ...
- 用python做一个简单的游戏,用python写一个小游戏
大家好,本文将围绕如何用python做一个简单的小游戏展开说明,python编写的入门简单小游戏是一个很多人都想弄明白的事情,想搞清楚用python做一个简单的游戏需要先了解以下几个事情. 1.Pyt ...
- 如何用python编一个扫雷游戏_用 Python 做一个 Windows 扫雷游戏
原标题:用 Python 做一个 Windows 扫雷游戏 本文代码基于 python3.6 和 pygame1.9.4. Windows XP 上的扫雷是无数80/90后的集体回忆,今天我们就用 P ...
- 用C++做一个猜数字游戏
如何用C++做一个猜数字游戏 制作人:zhangfan080816 总体概览 #include<iostream> #include<ctime> #include<cs ...
- CocosCreator学习1:做一个简单的游戏
把计步器写好了,到了写游戏场景.控件什么的时候,傻眼了.想做一个简单的地图,可以在地图上点击选择城市,发现用Cocos2D-X代码码出来好麻烦,尤其是城市位置问题,需要调试去找对像素区域做一个按钮控制 ...
最新文章
- python 搜索插入位置
- wxWidgets:wxIntProperty类用法
- 向三姑六婶解释你在一线城市的工作
- YOLOv4改进版重磅问世!Yolov4原班人马重磅推出Scaled-YOLOv4!业界最佳
- django restframwork 教程之authentication权限
- android 遮罩 进度条,bootstrap创建带遮罩层的进度条
- 【优化预测】基于matlab差分优化灰狼算法优化支持向量机SVM预测【含Matlab源码 1576期】.zip
- M3U8下载,直播源下载,FLASH下载(四)-m3u8直播源下载工具类
- “水晶糖果字体”练习
- 2022-2028年中国冷冻草莓加工行业市场竞争态势及发展趋向分析报告
- Android build sequence
- Pest incidence forecasting based on Internet of Things and Long Short-Term Memory Network 论文精读
- 如何把uniapp的vue小程序项目跑起来
- ESPRIT 2019车铣复合编程基础到五轴 走心机 视频教程
- 零基础入门Jetson Nano——软件篇
- 计算机论文封皮,毕业论文封面及格式规定
- fastdfs上传文件的简易方法
- 第七届青年地学论坛女科学家论坛学习
- 小程序实现扫码识别二维码内容
- 光猫、路由器和交换机区别