使用cocos2d-js制作游戏新的引导 (四)-应用篇
|
sz.Guide引导库已经可以简单地工作了，但离真实的游戏项目、使用场景时还需要自己做一些事情。 进度读取与保存sz.Guide默认对进度的读取和保存，是记录在localStorage中的，请看如下代码： /** * 读取进度 */
loadProgress: function() {
//获取localStorage对象，同时兼容jsb
var localStorage = localStorage || cc.sys.localStorage;
//sz.GuideIndexName为一字符串常量做为key,读取进度,不存在时进度为0
this._index = parseInt(localStorage.getItem(sz.GuideIndexName)) || 0;
},/** * 保存进度 * @param isForward 进度是否前进 * @param cb 保存完的回调 */
saveProgress: function(isForward,cb) {
var localStorage = localStorage || cc.sys.localStorage;
localStorage.setItem(sz.GuideIndexName,isForward ? ++this._index : this._index + 1);
if (cb) {
cb();
}
}
_index即是进度的记录器，又是任务队列的索引下标，因此进度保存有两种情况： 有人可能会问saveProgress函数的cb回调参数是什么用了？请看下面的使用场景。 自定义进度的读取与保存因为sz.Guide只简单实现了本地保存，对于现在大多数网络游戏来说并不适合，所以你需要根据自己的项目情况来扩展sz.Guide，这里简单说明几种方法：
以下是我在项目中具体使用方法： xl.MyGuideLayer = sz.GuideLayer.extend({
//保存进度到服务器上
saveProgress: function(isForward,cb) {
//生成当前进度
var index = isForward ? ++this._index : this._index + 1;
//通过网络服务器NetClient发送进度，服务器做保存
NetClient.send(ActionCode.SAVE_NEW_PLAYER_GUIDE_STEP,index,function(isSucc) {
//当接收到保存成功的服务器响应后，执行cb回调函数
if (isSucc && cb) {
cb()
}
})
},loadProgress: function() {
//缓存对象上获取玩家对象，并读取新手引导步骤id
this._index = CacheManager.getPlayer().newPlayerGuideStep || 0;
},});
这时应该能明白saveProgress函数的cb函数的意义了吧！因为将进度保存到网络时，绝大多数是异步操作，当服务器真实保存成功能，才能继续。因此cb函数就是在通知引导框架，进度保存完毕了，可以进行下一个任务或步骤了。 步骤对象上的事件函数为了使用引导配置适应更多的需求，在步骤对象上目前可以配置三个事件函数，分别为：
肯定有很多人看到我的演示程序，发现下面这个BUG： 这确实是一个bug，在不修改sz.Guide源码的情况下，我们使用步骤配置来解决这个问题 onLocateNode1: [
{
log: "关闭第一盏灯",command: sz.GuideCommand.GC_FINGER_HINT,locator:"_fire1",//onLocateNode，当定位到_fire1节点时响应些函数
onLocateNode: function(node) {
//node为'_fire1'节点对象
var pt = node.getPosition();
pt = node.getParent().convertToWorldSpace(pt);
pt.x += node.width / 2;
pt.y += node.height / 2;
//this为sz.GuideLayer对象实例，调用_fingerToPoint函数指向新的位置
this._fingerToPoint(pt,true);
}
},...
重新运行代码，效果如下： 步骤中事件函数的this上下文为sz.GuideLayer对象实例，你可以在这里方便调用sz.GuideLayer上的方法，做一些事情。这里就使用了sz.Guide._fingerToPoint方法修正手指的位置。 但是这里也有问题，可以从遮罩区看出，定位矩形并没有把灯火全部包裹住，在体验上很差。 我们重新再改进一次配置onLocateNode函数： onLocateNode: function(node) {
//修改_touchRect触摸矩形的起点
this._touchRect.x -= node.width / 2;
this._touchRect.y -= node.height / 2;
//计算矩形中心位置
var point = cc.p(this._touchRect.x + node.width / 2,this._touchRect.y + node.height / 2);
//刷新遮罩显示
this.showMask(true);
//指向新的位置
this._fingerToPoint(point,true);
}
再次运行，效果如下： onEnter&onExitonEnter与onExit从名字上就应该很好理解，是由步骤处理开始前和处理完成后触发。 //步骤开始
_processTasks: function() {
...
//一个step
var stepHandle = function(step,callback) {
self._curStepConfig = step;
async.series({
//步骤开始
stepBegin: function(cb) {
self._guideLayer._setLocateNode(null);
if (step.onEnter) {
//执行步骤对象上的onEnert函数，注意cb函数参数
step.onEnter.call(self._guideLayer,cb);
} else {
cb();
}
},//步骤处理
stepProcess: function(cb) {
if (step.delayTime) {
self._guideLayer.scheduleOnce(function() {
self._processStep(step,cb);
},step.delayTime);
} else {
self._processStep(step,cb);
}
},//步骤完毕
stepEnd: function() {
if (step.onExit) {
//步骤完毕，退出时执行onExit方法，注意第二个callback参数
step.onExit.call(self._guideLayer,callback);
} else {
callback();
}
}
});
};
...
}
onEnter、onExit事件函数都有一个cb回调函数的参数，表示事件完成后的通知。 1:[
{
...
//在步骤开始时，播放一个动画
onEnter: function(cb) {
var label = new cc.LabelTTF("关闭第一盏灯","宋体",48);
var pt = cc.p(this.width / 2,this.height / 2);
label.setPosition(pt);
this.addChild(label);
var faceOut = cc.fadeOut(3);
var call = cc.callFunc(function() {
label.removeFromParent();
cb(); //当执行cb函数时才进入指令处理
},this);
label.runAction(cc.sequence(faceOut,call))
}
...
}
引导配置中的参数功能var guideConfig = {
//编写具体引导任务
tasks: {
...
}
//定位器搜索节点的间隔时间
locateNodeDurationTime: 0.1,//手型提示图片资源路径
fingerImage: 'res/finger.png',//常规事件响应的事件类型：0=touchBegan,1=touchMoved,2=touchEnded
eventType: 2,//表示在touchEnded中检查事件是否完成
//是否显示遮罩
isShowMask: true
};
这里解释下这些参数的功能可能的使用场景： locateNodeDurationTime
有时在引导步骤中定位一个节点时，这个节点并未创建在当前场景的渲染树中，在第一次定位节点时并没有找到节点对象。因此需要一个持续的节点定位的操作，操作的间隔时间由此参数控制。 fingerImage
fingerImage非常简单，就不做过多解释了。 eventType
前面几篇文章中介绍了，如何检查定位节点的事件函数已经被执行。之前的讲解中说到一般都是在Widget控件的touchEnded中来处理事件函数。这样的设定不够灵活，万一有时需要在touchBegan时呢？ ...
//一个任务步骤对象
{
log:'点击home',locator:"_btnHome",eventType:0 //"_btnHome"控件的事件函数为touchBegan
}
...
eventType: 2
在演示代码中你可以发现 _onBtnHomeTouchBegan: function(){…}函数，所以这里上步骤中的事件检测需要在eventType:0 isShowMask
{
log: "点亮第二盏灯",locator:"_fire2",showMask: true //强制打开当前步骤的遮罩显示
},
上面总结了sz.Guide引导库的基本功能的使用，可以通过配置、事件函数灵活实现特殊的引导需求。 补充delayTime步骤对象上还有一个隐藏的属性为delayTime，值为一个Number，它是间于步骤的onEnter事件与步骤处理操作之间的延时。 async.series({
//步骤开始
stepBegin: function(cb) {
...
},//步骤处理
stepProcess: function(cb) {
//如果配置有delayTime属性，使用scheduleOnce推迟步骤处理
if (step.delayTime) {
self._guideLayer.scheduleOnce(function() {
self._processStep(step,cb);
},step.delayTime);
} else {
self._processStep(step,cb);
}
},//步骤完毕
stepEnd: function() {
...
}
我主要的使用场景是这样的情况：
指令扩展计划sz.Guide内部定义了四个指令，其中实现了三个： sz.GuideCommand = {
GC_NULL: undefined,//空指令
GC_SET_PROPERTY: 1,//设置属性
GC_FINGER_HINT: 2,//手型提示
GC_SAVE_PROGRESS: 3 //保存进度
};
对于一个上线的游戏项目来说，估计这三个指令是远远不够的。我们也能通过步骤对象上的onEnter和onExite事件来丰富一些操作，但需要编写较多的代码，且代码是为一个特定的操作而做的，不能够很好的复用。比如在步骤处理开始前，先滚动TableView。 目前sz.Guide的指令是简单的用switch后分别调用不同的函数实现的。 switch (step.command) {
case sz.GuideCommand.GC_SET_PROPERTY:
...;break;
case sz.GuideCommand.GC_FINGER_HINT:
...;break;
case sz.GuideCommand.GC_SAVE_PROGRESS:
...;break;
default:
cc.log("guide command is not define");
}
本人计划将指令的实现独立于引导框架，可以灵活的向引导框架注册指令，你可以编写自己的指令操作。 源码地址：https://github.com/ShawnZhang2015/Guide.git 本篇代码演示：git checkout step1 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |