1463人阅读
cocos2d-js（11）
上一篇已经详解了关于定位器的实现细节，本篇主要是讲解实现引导的组成模块及整个引导流程，并给出整个引导的源码及演示代码。
在线演示：
整个引导框架分为以下几个部分：
- 引导配置
- 引导任务处理器
请下看图：
设计UI引导步骤：
关闭第一盏灯
控件名 “_fire1”
关闭第二盏灯
控件名 “_fire2”
点亮第一盏灯
控件名 “_fire1”
点亮第二盏灯
控件名 “_fire2”
点击Home图标
控件名 “_btnHome”
点击Task图标
控件名 “_btnTask”
UI操作的设计已经确定，控件名字对于引导至关重要，我们首先要把这些准备工作做好。
这里引入任务和步骤的概念：引导是由多个任务组成，我们称为tasks，其中一个任务称为task，一个任务中又包含多个引导步骤称为step。(这里与上一篇中所讲的任务组、任务是一至的，只是换了一个说法而以。在编写代码时，我觉得使用任务与步骤来表达，让代码更清楚)
引导细节需求：
我们这里把6个步骤分成两个任务：1~4为任务1，5~6为任务2
当从步骤1~2中断后，重新游戏，需要从步骤1开始。
当任务1步骤2完成，整个任务1就算完成了，此时重新游戏，直接从任务2开始。因此我们需要在步骤2后添加一个步骤为保存进度
对应的引导配置：
var guideConfig = {
log: "关闭第一盏灯",
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_fire1"
log: "关闭第二盏灯",
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_fire2"
log: "保存进度",
command: sz.GuideCommand.GC_SAVE_PROGRESS
log: "点亮第一盏灯",
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_fire1"
log: "点亮第二盏灯",
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_fire2"
log:'点击home',
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_btnHome"
log:'点击task',
command: sz.GuideCommand.GC_FINGER_HINT,
locator:"_btnTask"
locateNodeDurationTime: 0.1,
fingerImage: 'res/finger.png'
sz.GuideCommand = {
GC_SET_PROPERTY: 1,
GC_FINGER_HINT: 2,
GC_SAVE_PROGRESS: 3
目前sz.GuideCommand只内置了三个命令：设置属性、手型提示、保存进度
引导任务处理器
从上面的任务配置来看，任务步骤的处理是一个顺序执行过程，但UI操作却是一个异步过程，只有UI操作完成后才能进行下一个任务。 对于javascript来说，处理异步事件、回调函数是最拿手的，但为了代码可读性、维护性比较好，我们这里使用了大名顶顶的async库来处理任务和步骤，这样可以解决回调函数的深度。
这里只用到async两个函数：
async.eachSeries(tasks, iterator, callback)
我们使用async.eachSeries来遍历我们整个任务数组，iterator为迭代器函数，用于处理每一个任务，callback为任务全部处理完后，我们用来离开引导
async.series({}, [callback])
我们使用async.series处理一个步骤对象的几个主要动作：步骤开始、步骤处理、步骤完毕
这里核心的是步骤处理，步骤开始和结束我们可以用来扩展步骤对象，增加灵活性。
比如说，当一个步骤开始前，需要检查金币、等级这些，不满足的话可以不触发本步骤的进行。下一篇我会给大家做相关代码的演示。
处理所有任务
var tasks = [...]
async.eachSeries(tasks, function(task, cb) {
async.eachSeries(task, stepHandle, function() {
self._guideLayer.save(true, cb);
}, function() {
self._exitGuide();
var stepHandle = function(step, callback) {
async.series({
stepBegin: function(cb) {
self._guideLayer._setLocateNode(null);
if (step.onEnter) {
step.onEnter.call(this._guideLayer, cb);
stepProcess: function(cb) {
if (step.delayTime) {
self._guideLayer.scheduleOnce(function() {
self._processStep(step, cb);
self._processStep(step, cb);
stepEnd: function() {
if (step.onExit) {
step.onExit.call(this._guideLayer, callback);
callback();
任务处理的核心是步骤的处理，步骤的处理最主要是正确执行步骤指令
_processStep: function(step, cb) {
var self = this;
if (step.log) {
cc.log("guide: &" + step.log + ", step begin &");
var finish = function() {
if (step.log) {
cc.log("guide: &" + step.log + ", step finished &");
if (step.delayTime) {
setTimeout(cb, step.delayTime * 1000);
switch (mand) {
case sz.GuideCommand.GC_SET_PROPERTY:
this._guideLayer.locateNode(step.locator, function(node) {
var property = step.args[0];
var args = step.args.slice(1);
node[property].apply(node, args);
case sz.GuideCommand.GC_FINGER_HINT:
this._guideLayer.locateNode(step.locator, function(node) {
self._guideLayer.fingerToNode(node, finish, true);
if (step.onLocateNode) {
step.onLocateNode.call(this._guideLayer, node);
case sz.GuideCommand.GC_SAVE_PROGRESS:
this._guideLayer.save(false, finish);
cc.log("guide command is not define");
关于定位区UI事件的检测
上一篇中讲到关于定位区UI事件的检测是通过观察者模式来实现，我在从原有项目中剥离引导框架时想到过大多数人可能会有自己的观察者的具体实现。而且以观察者来实现UI事件的检测会让代码变的依赖性太强。所以在sz.Guide中没有使用观察者模式来检测事件。
这里UI事件的检测主要使用了javascript语言的动态能力来拦截事件函数来实现，大概思路：
保存原有事件函数变量
使用新函数覆盖原有事件函数
在新函数中先执行原有事件函数
在新函数中执行自己逻辑
sz.Guide在事件管理上使用了sz.UILoader
var widgetEvent = sz.uiloader._onWidgetE
sz.uiloader._onWidgetEvent = function(sender, type) {
if (widgetEvent) {
widgetEvent(sender, type);
self._onWidgetEvent(sender, type);
_onWidgetEvent: function(sender, type) {
var locateNode = this._locateN
if (locateNode && (sender === this._locateNode || sender.getName() === locateNode.getName() )) {
this._setLocateNode(null);
this._setpCallback();
sz.Guide目前实现了一个简单、基本的引导功能，还有很多不全面的地方还需要继续增加功能和改进。但总体思路是清晰的，在编写引导任务也是非常容易，而且不破坏现有代码的逻辑结构。完全可以在你的游戏全部完成后，轻松将引导置入游戏中去。
有兴趣的朋友可以试着修改下，guideConfig.js中的配置，添加更多的引导步骤，试试引导用记依次点击下面的功能按钮
他们的控件名字分别叫做:
_btnHome、_btnTask、_btnPlunder、_btnBag、_btnFriends、_btnSetting
源码地址：
在线演示：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：42683次
排名：千里之外
原创：29篇
评论：27条
(1)(1)(5)(1)(2)(1)(1)(1)(3)(1)(2)(1)(1)(2)(1)(2)(1)(2)(1)(1)cocos2d-js游戏设计常用函数笔记(持续更新)
1、给一个Layer添加触摸事件，前提需要在cocos studio当中吧panel的交互去掉，不然会不能自定义其触摸事件，
cc.eventManager.addListener({
prevTouchId: -1,
cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesEnded:function (touches, event) {
touch = touches[0];
cc.log("onTouchesEnded");
2、获取cocostudio设计UI界面json数据，以及界面中控件的交互：
= ccs.uiReader.widgetFromJsonFile(res.game01Controller_json);
this.addChild(root,1);
this.btn_darts=ccui.helper.seekWidgetByName(root,
"btn_darts");
this.btn_darts
.addTouchEventListener(this.dartsTouchEvent,this);
3、使用create方法创建的Sprite需要更换图片方法：
this.setTextureRect(cc.rect(196,2,52,42));
4、使用plist文件方法：
&&cc.SpriteFrameCache.getInstance().addSpriteFrames(resb01plist);
cc.SpriteFrameCache.getInstance().addSpriteFrames(res.b02plist);
sprite=cc.Sprite.createWithSpriteFrameName("01.png");
&&sprite.initWithSpriteFrameName("01.png");
5、使用ScrollView，需要给控件添加以下参数才能正常使用
this.scoll_level.setDirection(cc.SCROLLVIEW_DIRECTION_BOTH);
this.scoll_level.setTouchEnabled(true);
this.scoll_level.setBounceEnabled(true);
6、监听浏览器大小变化横竖屏：
&当用户拖拽来改变浏览器大小，或者更有用的情况，当他们转动自己手机方向的时候。游戏中任意时刻都可以开启这种行为，只需要调用cc.EGLView的resizeWithBrowserSize函数：
cc.EGLView.getInstance().resizeWithBrowserSize(true);
为了更灵活得应对变化，我们为cc.EGLView提供了一个新的函数，你可以通过setResizeCallback函数注册一个回调函数来监听浏览器窗口大小变化事件：&
&cc.EGLView.getInstance().resizeWithBrowserSize(true);
做任何你所需要的游戏内容层面的适配操作
比如说，你可以针对用户的移动设备方向来决定所要应用的适配模式
// 比如说 获取宽度和高度，如果宽度大于高度就是横屏，
如果宽度小于高度就是竖屏});
7、使用cc.sys.localStrong存入到数据库当中对html5和app的区别：
html5当中若使用var
values=cc.sys.localStrong.getItem("key"),当key不存在的时候values=undefined，而在app当中的时候其values=0.
切记判断有值为0的时候记得考虑清楚。
8、cocos2d-js读取json文件和txt文件的方法：
往往在更多的时候是需要设置游戏关卡地图，而这写数据需要能更好的与文案协同工作最好是保存到txt或者json文件，文案可以把excel文档通过一定的设置导入到txt文件或json文件。以下是使用cocos2d-js读取txt和json文件的方法
cc.loader._loadTxtSync("res/map.txt")；
jsb.fileUtils.getStringFromFile("map.txt");
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。查看: 8710|回复: 2
《Cocos2d-x实战：JS卷——Cocos2d-JS开发》 目录
主题帖子积分
《Cocos2d-x实战：JS卷——Cocos2d-JS开发》 目录第1章& &&&准备开始1.1& &本书学习路线图1.2& &使用实例代码 第2章& &&&JavaScript语言基础2.1& &环境搭建2.1.1& && && &JavaScript编辑工具2.1.2& && && &JavaScript运行测试环境2.1.3& && && &HelloJS实例测试2.2& &标识符和保留字2.2.1& && && &标识符2.2.2& && && &保留字2.3& &常量和变量2.3.1& && && &常量2.3.2& && && &变量2.3.3& && && &命名规范2.4& &注释2.5& &JavaScript数据类型2.5.1& && && &数据类型2.5.2& && && &数据类型字面量2.5.3& && && &数据类型转换2.6& &运算符2.6.1& && && &算术运算符2.6.2& && && &关系运算符2.6.3& && && &逻辑运算符2.6.4& && && &位运算符2.6.5& && && &其它运算符2.7& &控制语句2.7.1& && && &分支语句2.7.2& && && &循环语句2.7.3& && && &跳转语句2.8& &数组2.9& &函数2.9.1& && && &使用函数2.9.2& && && &变量作用域2.9.3& && && &嵌套函数2.9.4& && && &返回函数2.10 JavaScript中的面向对象2.10.1& && & 创建对象2.10.2& && & 常用内置对象2.10.3& && & 原型2.11 Cocos2d-JS中JavaScript继承本章小结第3章& &&&Hello Cocos2d-JS3.1& &移动平台游戏引擎介绍3.2& &Cocos2d游戏引擎3.2.1& && && &Cocos2d游戏引擎家谱3.2.2& && && &Cocos2d-x引擎3.2.3& && && &Cocos2d-JS引擎3.3& &搭建Cocos2d-JS开发环境3.3.1& && && &搭建WebStorm开发环境3.3.2& && && &搭建Cocos CodeIDE开发环境3.3.3& && && &下载和使用Cocos2d-JS官方案例3.3.4& && && &使用API文档3.4& &第一个Cocos2d-JS游戏3.4.1& && && &创建工程3.4.2& && && &CocosCode IDE中运行3.4.3& && && &WebStorm中运行3.4.4& && && &工程文件结构3.4.5& && && &代码解释3.5& &Cocos2d-JS核心概念3.5.1& && && &导演3.5.2& && && &场景3.5.3& && && &层3.5.4& && && &精灵3.5.5& && && &菜单3.6& &Node与Node层级架构3.6.1& && && &Node中重要的操作3.6.2& && && &Node中重要的属性3.6.3& && && &游戏循环与调度3.7& &Cocos2d-JS坐标系3.7.1& && && &UI坐标3.7.2& && && &OpenGL坐标3.7.3& && && &世界坐标和模型坐标本章小结第4章& &&&标签和菜单4.1& &使用标签4.1.1& && && &cc.LabelTTF4.1.2& && && &cc.LabelAtlas4.1.3& && && &cc.LabelBMFont4.2& &使用菜单4.2.1& && && &文本菜单4.2.2& && && &精灵菜单和图片菜单4.2.3& && && &开关菜单本章小结第5章& &&&精灵5.1& &Sprite精灵类5.1.1& && && &创建Sprite精灵对象5.1.2& && && &实例：使用纹理对象创建Sprite对象5.2& &精灵的性能优化5.2.1& && && &使用纹理图集5.2.2& && && &使用精灵帧缓存本章小结第6章& &&&场景与层6.1& &场景与层的关系6.2& &场景切换6.2.1& && && &场景切换相关函数6.2.2& && && &场景过渡动画6.3& &场景的生命周期6.3.1& && && &生命周期函数6.3.2& && && &多场景切换生命周期本章小结第7章& &&&动作、特效和动画7.1& &动作7.1.1& && && &瞬时动作7.1.2& && && &间隔动作7.1.3& && && &组合动作7.1.4& && && &动作速度控制7.1.5& && && &回调函数7.2& &特效7.2.1& && && &网格动作7.2.2& && && &实例：特效演示7.3& &动画7.3.1& && && &帧动画7.3.2& && && &实例：帧动画使用本章小结第8章& &&&Cocos2d-JS用户事件8.1& &事件处理机制8.1.1& && && &事件处理机制中三个角色8.1.2& && && &事件管理器8.2& &触摸事件8.2.1& && && &触摸事件的时间方面8.2.2& && && &触摸事件的空间方面8.2.3& && && &实例：单点触摸事件8.2.4& && && &实例：多点触摸事件8.3& &键盘事件8.4& &鼠标事件8.5& &加速度计与加速度事件8.5.1& && && &加速度计8.5.2& && && &实例：运动的小球本章小结第9章& &&&游戏背景音乐与音效9.1& &Cocos2d-JS中音频文件9.1.1& && && &音频文件介绍9.1.2& && && &Cocos2d-JS跨平台音频支持9.2& &使用CocosDenshion引擎9.2.1& && && &音频文件的预处理9.2.2& && && &播放背景音乐9.2.3& && && &停止播放背景音乐9.3& &实例：设置背景音乐与音效9.3.1& && && &资源文件编写9.3.2& && && &HelloWorld场景实现9.3.3& && && &设置场景实现本章小结第10章& &粒子系统10.1 问题的提出10.2 粒子系统基本概念10.2.1& && & 实例：打火机10.2.2& && & 粒子发射模式10.2.3& && & 粒子系统属性10.3 Cocos2d-JS内置粒子系统10.3.1& && & 内置粒子系统10.3.2& && & 实例：内置粒子系统10.4 自定义粒子系统本章小结第11章& &瓦片地图11.1 地图性能问题11.2 Cocos2d-JS中瓦片地图API11.3 实例：忍者无敌11.3.1& && & 设计地图11.3.2& && & 程序中加载地图11.3.3& && & 移动精灵11.3.4& && & 检测碰撞11.3.5& && & 滚动地图本章小结第12章& &物理引擎12.1 使用物理引擎12.2 Chipmunk引擎12.2.1& && & Chipmunk核心概念12.2.2& && & 使用Chipmunk物理引擎的一般步骤12.2.3& && & 实例：HelloChipmunk12.2.4& && & 实例：碰撞检测12.2.5& && & 实例：使用关节12.3 Box2D引擎12.3.1& && & Box2D核心概念12.3.2& && & 使用Box2D物理引擎的一般步骤12.3.3& && & 实例：HelloBox2D12.3.4& && & 实例：碰撞检测12.3.5& && & 实例：使用关节本章小结第13章& &数据持久化13.1 Cocos2d-JS中的数据持久化13.2 localStorage数据持久化13.2.1& && & cc.sys.localStorageAPI函数13.2.2& && & 实例：MyNotes本章小结第14章& &基于HTTP网络通信14.1 网络结构14.1.1& && & 客户端服务器结构网络14.1.2& && & 点对点结构网络14.2 HTTP与HTTPS协议14.3 使用XMLHttpRequest对象开发客户端14.3.1& && & 使用XMLHttpRequest对象14.3.2& && & 实例：重构MyNotes14.4 数据交换格式14.5 JSON数据交换格式14.5.1& && & 文档结构14.5.2& && & JSON解码与编码14.5.3& && & 实例：完善MyNotes本章小结第15章& &基于Node.js的Socket.IO网络通信15.1 Node.js15.1.1& && & Node.js安装15.1.2& && & Node.js测试15.2 使用Socket.IO15.2.1& && & Socket.IO服务器端开发15.2.2& && & Cocos2d-JS的Socket.IO客户端15.3 实例：Socket.IO重构MyNotes15.3.1& && & Socket.IO服务器端开发15.3.2& && & Node.js访问SQLite数据库15.3.3& && & Cocos2d-JS的Socket.IO客户端开发本章小结第16章& &性能优化16.1 缓存创建和清除缓存16.1.1& && & 场景与资源16.1.2& && & 缓存创建和清除时机16.2 图片与纹理优化16.2.1& && & 选择图片格式16.2.2& && & 拼图16.2.3& && & 纹理像素格式16.2.4& && & 背景图片优化16.2.5& && & 纹理缓存异步加载16.3 JSB内存管理16.4 使用Bake层16.5 使用对象池16.5.1& && & 对象池API16.5.2& && & 实例：发射子弹本章小结第17章& &发布到Web平台17.1 Web服务器与发布17.1.1& && & ApacheHTTP Server安装17.1.2& && & 发布到Web平台17.2 问题汇总17.2.1& && & JS文件的压缩与代码混淆17.2.2& && & 判断平台17.2.3& && & 资源不能加载问题本章小结第18章& &发布到本地iOS平台18.1 iOS开发环境搭建18.1.1& && & Xcode安装和卸载18.1.2& && & Xcode操作界面18.2 创建本地工程18.3 编译与发布18.4 移植问题汇总18.4.1& && & iOS平台声音移植问题18.4.2& && & 使用PVR纹理格式18.4.3& && & 横屏与竖屏设置问题18.5 多分辨率屏幕适配18.5.1& && & 问题的提出18.5.2& && & 分辨率策略本章小结第19章& &发布到本地Android平台19.1 搭建交叉编译和打包环境19.1.1& && & AndroidSDK安装19.1.2& && & 管理Android SDK19.1.3& && & 管理Android开发模拟器19.1.4& && & AndroidNDK安装19.2 交叉编译19.3 打包运行19.4 移植问题汇总19.4.1& && & JS文件编译问题19.4.2& && & 横屏与竖屏设置问题本章小结第20章& &使用Git管理程序代码版本20.1 代码版本管理工具——Git20.1.1& && & 版本控制历史20.1.2& && & 术语和基本概念20.1.3& && & Git环境配置20.1.4& && & Git常用命令20.1 代码托管服务——GitHub20.1.1& && & 创建和配置GitHub账号20.1.2& && & 创建代码库20.1.3& && & 删除代码库20.1.4& && & 派生代码库20.1.5& && & GitHub协同开发20.2 实例：Cocos2d-JS游戏项目协同开发20.2.1& && & 提交到GitHub代码库20.2.2& && & 克隆GitHub代码库20.2.3& && & 重新获得GitHub代码库本章小结第21章& &Cocos2d-JS敏捷开发项目实战——迷失航线手机游戏21.1 迷失航线游戏分析与设计21.1.1& && & 迷失航线故事背景21.1.2& && & 需求分析21.1.3& && & 原型设计21.1.4& && & 游戏脚本21.2 任务1：游戏工程的创建与初始化21.2.1& && & 迭代1.1：创建工程21.2.2& && & 迭代1.2：添加资源文件21.2.3& && & 迭代1.3：添加常量文件SystemConst.js21.2.4& && & 迭代1.4：多分辨率适配21.2.5& && & 迭代1.5：发布到GitHub21.3 任务2：创建Loading场景21.3.1& && & 迭代2.1：修改启动界面21.3.2& && & 迭代2.2：配置文件resource.js21.4 任务3：创建Home场景21.4.1& && & 迭代3.1：添加场景和层21.4.2& && & 迭代3.2：添加菜单21.5 任务4：创建设置场景21.6 任务5：创建帮助场景21.7 任务6：游戏场景实现21.7.1& && & 迭代6.1：创建敌人精灵21.7.2& && & 迭代6.2：创建玩家飞机精灵21.7.3& && & 迭代6.3：创建炮弹精灵21.7.1& && & 迭代6.4：初始化游戏场景21.7.2& && & 迭代6.5：游戏场景菜单实现21.7.3& && & 迭代6.6：玩家飞机发射炮弹21.7.4& && & 迭代6.7：炮弹与敌人的碰撞检测21.7.5& && & 迭代6.8：玩家飞机与敌人的碰撞检测21.7.6& && & 迭代6.9：玩家飞机生命值显示21.7.7& && & 迭代6.10：显示玩家得分情况21.8 任务7：游戏结束场景本章小结第22章& &为迷失航线游戏添加广告22.1 使用谷歌AdMob广告22.1.1& && & 注册AdMob账号22.1.2& && & 管理AdMob广告22.1.3& && & AdMob广告类型22.1.4& && & 下载谷歌AdMob AdsSDK22.2 为迷失航线游戏Android平台添加AdMob广告22.2.1& && & GooglePlay服务下载与配置22.2.2& && & 导入libcocos2dx类库工程到Eclipse22.2.3& && & 导入LostRoutes工程到Eclipse22.2.4& && & 编写AdMob相关代码22.2.5& && & 交叉编译、打包和运行22.3 为迷失航线游戏iOS平台添加AdMob广告22.3.1& && & Cocos2d-x引擎iOS平台下AdMob开发环境搭建22.3.2& && & 编写AdMob相关代码本章小结第23章& &把迷失航线游戏发布放到Googleplay 应用商店23.1 谷歌Android应用商店Googleplay23.2 还有“最后一公里”23.2.1& && & JS文件编译23.2.2& && & 添加图标23.2.3& && & 应用程序打包23.3 发布产品23.3.1& && & 上传APK23.3.2& && & 填写商品详细信息23.3.3& && & 定价和发布范围本章小结第24章& &把迷失航线游戏发布放到苹果AppStore24.1 苹果的App Store24.2 iOS设备测试24.2.1& && & 创建开发者证书24.2.2& && & 设备注册24.2.3& && & 创建App ID24.2.4& && & 创建配置概要文件24.2.5& && & 设备上运行24.3 还有“最后一公里”24.3.1& && & 添加图标24.3.2& && & 添加启动界面24.3.3& && & 修改发布产品属性24.3.4& && & 为发布进行编译24.3.5& && & 应用打包24.4 发布产品24.4.1& && & 创建应用及基本信息24.4.2& && & 应用定价信息24.4.3& && & 基本信息输入24.4.4& && & 上传应用前准备24.4.5& && & 上传应用24.5 常见审核不通过的原因24.5.1& && & 功能问题24.5.2& && & 用户界面问题24.5.3& && & 商业问题24.5.4& && & 不当内容24.5.5& && & 其它问题本章小结
主题帖子积分
新手上路, 积分 9, 距离下一级还需 41 积分
新手上路, 积分 9, 距离下一级还需 41 积分
请问什么时候可以买到呀
主题帖子积分
已经在京东上开始销售了。
Powered by