ClippingNode实现新手引导高亮裁切
ClippingNode的使用
概述
ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。
ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。
ClippingNode 原理:
ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何理解ClippingNode的遮罩?看下图的例子吧。
所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底板上的东西又不会妨碍Layer上的东西,即模板在底板之外的空间对于Layer来说是透明的。
ClippingNode 常用方法
create
可以使用
static ClippingNode* create();
方法创建一个ClippingNode对象。如下:auto clipper = ClippingNode::create();
也可以使用
static ClippingNode* create(Node *stencil);
方法创建;在创建的时候指定裁剪模板auto stencil = Sprite::create("CloseNormal.png");//模板节点
clipper = ClippingNode::create(stencil);setStencil 可以使用
void setStencil(Node *stencil);
方法设置“裁剪模板”节点。 如下:clipper->setStencil(stencil);//设置裁剪模板
setInverted
可以使用
void setInverted(bool inverted);
方法,设置是显示被裁剪的部分,还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下:clipper->setInverted(true);//设置底板可见,显示剩余部分
setAlphaThreshold
可以使用
void setAlphaThreshold(GLfloat alphaThreshold);
,设置alpha阈值, 只有模板(stencil)的alpha像素大于alpha阈值(alphaThreshold)时内容才会被绘制。 alpha阈值(threshold)范围应是0到1之间的浮点数。 alpha阈值(threshold)默认为1。 如下:clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
ClippingNode示例
auto bg = LayerColor::create(Color4B(255, 255, 255,255));
this->addChild(bg, -1);//1
auto stencil = Sprite::create("CloseNormal.png");
stencil->setScale(2);//2
auto clipper = ClippingNode::create();
clipper->setStencil(stencil);//设置裁剪模板 //3
clipper->setInverted(true);//设置底板可见
clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
this->addChild(clipper);//4
auto content = Sprite::create("HelloWorld.png");//被裁剪的内容
clipper->addChild(content);//5
clipper->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
- 添加了一个白色的LayerColor作为背景层。
- 创建一个精灵,作为裁剪模板,并放大2倍
- 创建ClippingNode节点,并设置裁剪模板
- 设置裁剪显示,Alpha阈值,并将裁剪节点加到层中
- 设置被裁剪的内容
运行效果如图:
将 clipper->setInverted(true);
改为 clipper->setInverted(false);
运行效果如图:
- 资源图片
http://www.2cto.com/kf/201207/144656.html
战争迷雾效果:
http://bbs.9ria.com/thread-157487-1-1.html
http://www.benmutou.com/archives/455
ClippingNode实现新手引导高亮裁切的更多相关文章
- cocos2dx混合模式应用———制作新手引导高亮区域 (2.2.0)
cocos2dx混合模式应用———制作新手引导高亮区域 转自:http://www.cnblogs.com/mrblue/p/3455775.html 首先,效果预览一下 高亮区域的图片: 示例代码: ...
- cocos2dx混合模式应用———制作新手引导高亮区域
先看下效果 制造这个椭圆高亮区域所使用原图是 附上代码 bool HelloWorld::init() { ////////////////////////////// // 1. super ini ...
- [Quick-x]制作新手引导高亮区域方法之二:裁剪模式
demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea 2.裁剪模式 (1)创建裁剪对象 , , ) --非高亮区域颜色 local b ...
- [Quick-x]制作新手引导高亮区域方法之一:混合模式
demo下载:https://github.com/chenquanjun/Quick-x-HighlightArea 1.混合模式 (1)首先创建一个全屏的CCRenderTexture实例 这里使 ...
- cocos2dx 3.0 用ClippingNode做游戏的新手引导
转自:http://blog.csdn.net/star530/article/details/20851263 本篇介绍的是用ClippingNode 做游戏的新手引导,额,或者说是做新手引导的一种 ...
- Unity3D新手引导开发手记
最近开始接手新手引导的开发,记录下这块相关的心得 首先客户端是Unity,在接手前,前面的同学已经初步完成了新手引导框架的搭建,这套框架比较简单,有优点也有缺点,稍后一一点评 我们的新手引导是由一个个 ...
- NGUI 新手引导
现在我们的游戏已到了开发后期,这个时候需要做新手引导这一块(恶心的新手引导,真想说游戏行业究竟哪个2B最先想出来要引导的???代码搞的到处都是,改了一次又改!) 吐槽过后进入正题:主要还是UI相关的操 ...
- cocos2d-x之蒙板,局部高亮可点,CCRenderTexture
转自:http://www.2cto.com/kf/201207/144656.html 蒙板,局部高亮可点的用处大多是在新手引导的时候,引导玩家一步一步的走游戏的操作流程. 之前写了一个cocos2 ...
- Cocos2d-x教程第(11)讲-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
欢迎转载,转载时请注明原文出处:http://blog.csdn.net/u012945598/article/details/17280019 源码下载地址:http://download.csdn ...
随机推荐
- 使用 GCC 调试程序
系统 Ubuntu 调试示例: #include <stdio.h> int func(int n) { ,i; ;i<n;i++) { sum+=i; } return sum; ...
- scala - Map基础
Map 构造Map 不可变: val map = Map("sa" -> 1, "s" -> 2)map("sa") = 3 / ...
- 采用Hibernate框架的研发平台如何能够真正兼容Oracle和sqlServer数据库
都说Hibernate框架的使用可以很容易的让你的研发平台支持多种不同类型的数据库,但实践表明,这里的“容易”,是相对的. 想让研发平台支持多种数据库,并不是一件简单的事,也可以这么说:并不是只要使用 ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- Android错误:W/ResourceType(2411): No package identifier when getting value for resource number 0x
报错信息: 07-04 11:14:43.064: W/ResourceType(2411): No package identifier when getting value for resourc ...
- Linux学习笔记---用户管理---帐号管理
root管理 (1)新增用户:useradd -u 指定UID -g 指定GID -G 作为组员添加到某个组 -M 不创建主用户目录 -m 创建主用户目录 -c 用户信息说明列 -d 指定某个目录为主 ...
- POJ 1986 Distance Queries(Tarjan离线法求LCA)
Distance Queries Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 12846 Accepted: 4552 ...
- json.parse 与 json.stringfy
转自 :http://blog.csdn.net/wangxiaohu__/article/details/7254598 parse用于从一个字符串中解析出json对象,如 var str = '{ ...
- Swift声明参考
一条声明可以在你的程序里引入新的名字和构造.举例来说,你可以使用声明来引入函数和方法,变量和常量,或者来定义 新的命名好的枚举,结构,类和协议类型.你也可以使用一条声明来延长一个已经存在的命名好的类型 ...
- Xcode 杂七杂八
一.Exception 的捕捉 1.message send to dealloc instance a, 输出控制台(lldb)后面输入:c + enter, 找到对应的行 b, po ...