cocos3——8.实现初学者指南
1.采用ClippingNode裁剪范围
写作物接口:
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.引导的简单流程
对于简单的引导实现,就是在引导開始的地方開始、引导结束的地方结束。
而什么时候開始、什么时候结束,假设量小且開始、结束条件都比較特殊的话,
就能够找到相关的地方開始和结束引导。
假设量大且条件比較一般化(比方button事件结束、滑动事件结束之类的),能够将条件 抽象话。然后进行配置。
以下就说简单的方式吧,先准备一下引导開始和结束的接口。
先从文件流获取上次引导的步数吧,这里用的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: '请按住button,控制力度,将沙包扔进红色区域。 ',
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
版权声明:本文博主原创文章。博客,未经同意不得转载。
cocos3——8.实现初学者指南的更多相关文章
- Java多线程初学者指南系列教程
转自:http://developer.51cto.com/art/200911/162925.htm 51cto 本系列来自NokiaGuy的“真的有外星人吗”博客,系列名称为<Java多线程 ...
- NHibernate初学者指南系列文章导航
NHibernate初学者指南系列文章导航 前面的话 经过三个多周的时间,终于将这个系列完成了,谢谢大家的关注和支持,有很多不足之处还望大家包涵. 本系列参考的书籍为NHibernate 3 Be ...
- 【系列】Java多线程初学者指南(1):线程简介
原文地址:http://www.blogjava.net/nokiaguy/archive/2009/nokiaguy/archive/2009/03/archive/2009/03/19/26075 ...
- 【翻译】nginx初学者指南
nginx初学者指南 本文翻译自nginx官方网站:http://nginx.org/en/docs/beginners_guide.html#control 该指南会对nginx做一个简要的介绍,同 ...
- FreeBSD上编写x86 Shellcode初学者指南
FreeBSD上编写x86 Shellcode初学者指南 来源 https://www.4hou.com/binary/14375.html 介绍 本教程的目的是帮助你熟悉如何在FreeBSD操作系统 ...
- 《SQL初学者指南》——第1章 关系型数据库和SQL
第1章 关系型数据库和SQL SQL初学者指南在本章中,我们将介绍一些背景知识,以便于你能够很快地上手,能在后续的章节中编写SQL语句.本章有两个主题.首先是对本书所涉及到的数据库做一个概述,并且介绍 ...
- Python编程初学者指南|百度网盘免费下载|Python新手入门资料
Python编程初学者指南|百度网盘免费下载 提取码:9ozx 目录 · · · · · · 第1章 启程:Game Over程序1.1 剖析Game Over程序1.2 Python简介1.2.1 ...
- 《Python编程初学者指南》高清PDF版|百度网盘免费下载|Python基础
<Python编程初学者指南>|百度网盘免费下载| 提取码:03b1 内容简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python可以用于很多的领域,从科学计 ...
- Python编程初学者指南PDF高清电子书免费下载|百度云盘
百度云盘:Python编程初学者指南PDF高清电子书免费下载 提取码:bftd 内容简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python可以用于很多的领域,从科学计算 ...
随机推荐
- Python天天美味(25) - 深入理解yield
Python天天美味(25) - 深入理解yield - CoderZh - 博客园 Python天天美味(25) - 深入理解yield yield的英文单词意思是生产,刚接触Python的时候 ...
- HDU 1007 近期点对
分治法求近期点对 递归将点不断分成小组.计算最短距离.此时的最短距离不过两点都属两块的某一块(这里的切割点是mid点). 还须要考虑两点分属两块的情况. 这时对于选点则把范围缩小到了以mid为中心. ...
- cannot load supported formats intellij 解决的方法
http://stackoverflow.com/questions/20797443/intellij-idea-subversion-checkout-error http://stackover ...
- SLB 权重问题
<pre name="code" class="html">一般配置SLB的时候有个权重0到100,是如何选择数值的? 权重需要您根据后端机器的配置 ...
- C++教材
C++语言: 1.<Essential C++>:Stanley B.Lipman著. 旁枝暂略,主攻核心,轻薄短小.附习题与解答,适合刚開始学习的人. 2.<The C++ Pro ...
- 2013 吉林通化邀请赛 Tutor 有点坑的水题
计算12个数的和的平均数.四舍五入,不能有后导0. 我的做法是,将答案算出后,乘以1000,然后看个位是否大于等于5,判断是否要进位…… #include<iostream> #inclu ...
- python基础教程_学习笔记10:异常
异常 什么是异常 Python用异常对象来表示异常情况.遇到错误后,会引发异常.假设异常对象并未被处理或捕捉,程序就会用所谓的回溯(Traceback,一种错误信息)终止运行: >>> ...
- poj 3278 Catch That Cow (bfs搜索)
Catch That Cow Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 46715 Accepted: 14673 ...
- hdu4059 The Boss on Mars
The Boss on Mars Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- VSTO 学习笔记(十三)谈谈VSTO项目的部署
原文:VSTO 学习笔记(十三)谈谈VSTO项目的部署 一般客户计算机专业水平不高,但是有一些Office水平相当了得,尤其对Excel的操作非常熟练.因此如果能将产品的一些功能集成在Office中, ...