cocos3——8.实现新手引导
2015-03-19 19:57
351 查看
1.使用ClippingNode裁剪范围
编写裁剪接口:
在引导层创建裁剪节点:
然后在引导层中写裁剪的函数:
2.引导的简单流程
对于简单的引导实现,就是在引导开始的地方开始、引导结束的地方结束。而什么时候开始、什么时候结束,如果量小且开始、结束条件都比较特殊的话,
就可以找到相关的地方开始和结束引导。如果量大且条件比较一般化(比如按钮事件结束、滑动事件结束之类的),可以将条件 抽象话,然后进行配置。
下面就说简单的方式吧,先准备一下引导开始和结束的接口。
先从文件流获取上次引导的步数吧,这里用的local storage:
然后准备开始和结束引导的接口:
以及参考节点的名字(参考节点会挂到guide.start被调用的当前界面node对象下)、以及箭头等(文字、箭头的显示我就不多说了),然后更新裁剪区域、显示文字、箭头等。在引导结束的时候将当前步数增加。
而实际设计各个引导的时候,比如在第i步的时候,去开始的地方调用guide.start(i),在引导完的时候掉guide.end(i)就可以了。这里设计的是简单的单线引导,对于简单的
新手引导已经够用了。
3.结果
各位看官也累了。下面是我游戏《跳房子》里的截图,有兴趣的同学可以下来玩玩吧,多谢啦!
【下载地址】
《跳房子》游戏下载地址
http://zhushou.360.cn/detail/index/soft_id/2766861
编写裁剪接口:
function createClipNode(node, stencil, inverted) { var clip_node = new cc.ClippingNode(); // 设置模板节点(就是要裁剪的区域) clip_node.stencil = stencil; // 添加要被裁剪掉的节点(显示的内容) clip_node.addChild(node); if (inverted != undefined) { // 设置反转(因为我们需要保留模板区域外面的内容,裁剪掉区域里的内容) clip_node.setInverted(inverted); } clip_node._stencil = stencil; return clip_node; }
在引导层创建裁剪节点:
// create clip node var mask = cc.LayerColor.create(cc.color(0, 0, 0, ui.mask_a), ui.screen_width, ui.screen_height); var stencil = cc.LayerColor.create(cc.color.GREEN, 100, 100); stencil.ignoreAnchorPointForPosition(false); this.clip_node = createClipNode(mask, stencil, true); this.addChild(this.clip_node, ui.mask_z);这里是创建了一个全屏的黑色遮罩层,然后在上面裁剪掉stencil的区域。要改变区域,我们只需要改变stencil的位置和大小就可以了。
然后在引导层中写裁剪的函数:
node.clipNode = function (ref) { this.clip_ref = ref; var stencil = this.clip_node.stencil; if (ref) { stencil.setAnchorPoint(ref.getAnchorPoint()); stencil.setContentSize(ref.getContentSize()); stencil.setPosition(ref.getParent().convertToWorldSpace(ref.getPosition())); } else { // set out of screen stencil.setPosition(cc.p(10000, 10000)); } }这个函数就是用传进来的参考节点ref的锚点、大小、位置来设置模板的属性,这样就能按参考节点进行裁剪了。
2.引导的简单流程
对于简单的引导实现,就是在引导开始的地方开始、引导结束的地方结束。而什么时候开始、什么时候结束,如果量小且开始、结束条件都比较特殊的话,
就可以找到相关的地方开始和结束引导。如果量大且条件比较一般化(比如按钮事件结束、滑动事件结束之类的),可以将条件 抽象话,然后进行配置。
下面就说简单的方式吧,先准备一下引导开始和结束的接口。
先从文件流获取上次引导的步数吧,这里用的local storage:
// local storage var storage = { ls: cc.sys.localStorage, }; storage.set = function (key, value) { this.ls.setItem(key, value); } storage.get = function (key) { var value = this.ls.getItem(key); if (value != '') { return value; } } storage.remove = function (key) { this.ls.removeItem(key); } // global interface var guide = { node: node, }; // arrow: // 0 down, 1 right, 2 up, 3 left guide.steps = [ // 0 { name: 'btn_right', str: '请按住按钮,控制力度,将沙包扔进红色区域。', arrow: 1, }, // ... ]; // 获取上次引导完成的步数 guide.cur_step = storage.get('guide') || 0;
然后准备开始和结束引导的接口:
guide.start = function (step) { if (step == this.cur_step) { console.log('guide start:', step, ',', this.cur_step); this.started = true; this._show(true); var info = this.steps[this.cur_step]; this.node.updateData(info); } } guide.end = function (step) { if (!this.started) { return; } this.started = false; if (step == undefined) { step = this.cur_step; } if (step == this.cur_step) { console.log('guide end:', step, ',', this.cur_step); storage.set('guide', ++this.cur_step); this._show(false); } } guide._show = function (show) { if (show) { if (!this.node.getParent()) { this.node.init(); ui.scene.addChild(this.node); } } this.node.visible = show; }上面guide里的node就是引导界面的根节点。引导开始guide.start的时候,判断步数是当前步,就引导当前步,从上面配置的steps里面获取要引导的文字内容,
以及参考节点的名字(参考节点会挂到guide.start被调用的当前界面node对象下)、以及箭头等(文字、箭头的显示我就不多说了),然后更新裁剪区域、显示文字、箭头等。在引导结束的时候将当前步数增加。
而实际设计各个引导的时候,比如在第i步的时候,去开始的地方调用guide.start(i),在引导完的时候掉guide.end(i)就可以了。这里设计的是简单的单线引导,对于简单的
新手引导已经够用了。
3.结果
各位看官也累了。下面是我游戏《跳房子》里的截图,有兴趣的同学可以下来玩玩吧,多谢啦!
【下载地址】
《跳房子》游戏下载地址
http://zhushou.360.cn/detail/index/soft_id/2766861
相关文章推荐
- 一个Android程序中新手引导功能实现方式的变迁
- coco2d-x CCScrollView实现关卡选择 新手引导 帮助界面
- 如何简单的实现新手引导之UGUI篇
- 新手引导的实现
- Android 新手引导半透明蒙层效果实现
- 基于mootools插件实现遮罩层新手引导
- android实现App新手引导功能
- Android 新手引导蒙层效果实现代码示例
- Android学习——自定义View实现蒙版新手引导(二)
- CCClippingNode(Clip修剪 可以实现新手引导遮罩、滚动字幕。。渲染child时仅渲染模板透明度值大于透明度阀值的像素点.默认透明度阀值 =1)
- APP中透明新手引导页面的实现
- cocos3——8.实现初学者指南
- 2D游戏新手引导点光源和类迷雾实现
- lua版本ClippingNode实现新手引导
- coco2d-x CCScrollView实现关卡选择 新手引导 帮助界面
- unity3d ngui3.7 新手引导遮罩和高亮实现
- 实现“新手引导”效果
- uitexture实现新手引导遮罩等
- Android 新手引导蒙层效果实现