CCClippingNode遮罩解析
来源:互联网 发布:方舟生存进化 生物数据 编辑:程序博客网 时间:2024/04/29 04:55
转自:http://www.zaojiahua.com/ccclipping.html
3.x已经改为ClippingNode,CCClippingNode在做新手引导的时候经常用到,所以要想做个新手引导就得先学学这个,当然它的功能不会仅限于此,明白了原理以后你可以自由发挥啊。在网上看到不少的文章,但是说的不够明白,我今天好好给大家说说吧,这里只说下原理,下次利用这个做个新手引导出来。
需要明确的一点就是CCClippingNode本质上是一个节点,什么是节点,节点就是可以存放东西,它也可以放到其他的节点上。大家在新手引导中看到的画面,大多数是一些背景层什么的,这个CCClippingNode也是放到了场景中的,只不过zOrder是靠前的。我么需要完成的这些个效果都是在这个层中实现的,不要被搞乱了。首先我们在这个node层中添加一些我们的元素,当然根据你自己的情况了,基本上都是一些精灵,那个看起来透明的遮罩层就是添加到这个node中的节点。接着,最重要的一点是这个node有一个模板节点,什么是模板节点呢,就是一个模子,我们要按照这个模子来裁剪我们的这个层,道理就像我们用剪刀按照一个模子来减一块布一样,我们最后可以设置我们是要留下这个模子裁剪出来的区域还是要留下这个模子剩下来的区域,CCClippingNode有专门的函数来设置这个模子。下面看看代码中怎么实现吧,具体的函数调用也加了注释,很好懂的。
1
bool
HelloWorld::init()
2
{
3
if
( !CCLayer::init() )
4
{
5
return
false
;
6
}
7
8
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
9
10
//背景图片
11
CCSprite * background = CCSprite::create(
"HelloWorld.png"
);
12
background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
13
this
->addChild(background,0);
14
15
//创建一个裁剪节点用来实现遮罩的效果
16
CCClippingNode * clippingNode = CCClippingNode::create();
17
this
->addChild(clippingNode,1);
18
//向裁剪节点中加入内容,这里加入的是一个透明的层
19
CCLayerColor * layer = CCLayerColor::create(ccc4(0,0,0,200));
20
clippingNode->addChild(layer);
21
//继续向裁剪节点中加入内容,这里加入的是一个精灵
22
CCSprite * sprite = CCSprite::create(
"1.png"
);
23
sprite->setPosition(ccp(visibleSize.width/4,visibleSize.height/2));
24
clippingNode->addChild(sprite);
25
//向裁剪节点中加入精灵,精灵的位置和裁剪的位置相同,所以最后让裁剪掉了
26
CCSprite * sprite2 = CCSprite::create(
"icon.png"
);
27
sprite2->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
28
clippingNode->addChild(sprite2);
29
30
//创建模板,裁剪节点将按照这个模板来裁剪区域
31
CCSprite * stencil = CCSprite::create(
"icon.png"
);
32
stencil->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
33
clippingNode->setStencil(stencil);
34
//这个是用来设置显示裁剪区域还是非裁剪区域的
35
clippingNode->setInverted(
true
);
36
//我们之前放了一张裁剪的模板,按照这个模板裁剪的时候同时按照这个alpha的值裁剪,这个值的范围是0-1
37
//设为0就把透明的区域裁剪掉了
38
//clippingNode->setAlphaThreshold(0);
39
40
return
true
;
41
}
你看到的上边的俩种图片就是通过setInverted这个函数来设置的,它可以设置你最终看到的是裁剪掉的区域还是模板的区域,我想原理你应该明白了吧。下面我们再来看一下init函数中最后注释掉的那行代码,意思注释已经写了,打开这句话我们看到的效果如下。
有了上面的基础我们应该想想怎么去做这个新手引导了,个人认为这个CCClippingNode节点上只应该添加一个CCLayreColor,设置一下它的透明度,看起来就有了遮罩的效果了,而其他的元素都是在其他的层中的,然后我们为CCClippingNode设置一个模板,同时设置setAlphaThreshold这句话,将透明度为0的都裁剪掉,这样就留下了精灵的形状,然后做一下触摸操作的处理,应该是这样吧。下面这幅图就是这样做的。是不是有了新手引导的效果了!
- CCClippingNode遮罩解析
- CCClippingNode遮罩解析
- CCClippingRectangleNode,CCClippingNode源码解析
- CCClippingNode
- CCClippingNode
- CCClippingNode
- CCClippingNode
- cocos2d-x CCClippingNode遮罩实现手电筒效果
- cocos2d-x新手引导遮罩CCClippingNode裁剪区域
- CCClippingNode详解
- CCClippingNode特性
- Cocos2d-x CCClippingNode
- CCClippingNode应用篇--拼图游戏
- CCClippingNode的一个bug
- cocos2d-x 基于CCClippingNode实现CCLayer遮罩功能,在滑动时超出剪切区域的实现显示部分的效果,不需要再借助其他sprite来遮挡了
- CCClippingNode(Clip修剪 可以实现新手引导遮罩、滚动字幕。。渲染child时仅渲染模板透明度值大于透明度阀值的像素点.默认透明度阀值 =1)
- 解决 cocos2d-x CCClippingNode 无效
- cocos2d-x 2.1新特性之CCClippingNode
- 应用层之HTTP持久连接
- oracle start with 递归查询
- Android Service学习之 Service生命周期 & 绑定类型服务& Binder类
- MATLAB中的视角处理
- 看来matplotlib 1.3.1的64位版本安装文件有bug
- CCClippingNode遮罩解析
- YouTube视频和字幕下载完美方案
- Redis源码剖析
- _stdcall、_edecl、fastcall、thiscall等函数约定区分
- git学习——远程分支
- Acdream 1063 平衡树(字典树)
- locale的设定及LANG、LC_CTYPE、LC_ALL环境变量
- 内部类学习笔记(二)方法内部类
- PLSQL创建用户