Cocos2d-x 遮罩的实现 : ClippingNode
来源:互联网 发布:企业建站优化方案 编辑:程序博客网 时间:2024/05/16 11:04
ClippingNode的使用
概述
ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。
ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。
ClippingNode 原理:
ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何理解ClippingNode的遮罩?看下图的例子吧。
所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底板上的东西又不会妨碍Layer上的东西,即模板在底板之外的空间对于Layer来说是透明的。
ClippingNode 常用方法
create
可以使用
static ClippingNode* create();
方法创建一个ClippingNode对象。如下:1auto clipper = ClippingNode::create();
也可以使用
static ClippingNode* create(Node *stencil);
方法创建;在创建的时候指定裁剪模板12auto stencil = Sprite::create(
"CloseNormal.png"
);
//模板节点
clipper = ClippingNode::create(stencil);
setStencil 可以使用
void setStencil(Node *stencil);
方法设置“裁剪模板”节点。 如下:1clipper->setStencil(stencil);
//设置裁剪模板
setInverted
可以使用
void setInverted(bool inverted);
方法,设置是显示被裁剪的部分,还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下:1clipper->setInverted(
true
);
//设置底板可见,显示剩余部分
setAlphaThreshold
可以使用
void setAlphaThreshold(GLfloat alphaThreshold);
,设置alpha阈值, 只有模板(stencil)的alpha像素大于alpha阈值(alphaThreshold)时内容才会被绘制。 alpha阈值(threshold)范围应是0到1之间的浮点数。 alpha阈值(threshold)默认为1。 如下:1clipper->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);
运行效果如图:
//----------------------------
by yizhengtutu : 经过本地测试,发现在window上,setAlphaThreshold方法显示效果有异常,会在两个状态见一闪一闪切换,而且,对比实现源码,发现这个方法只在,mac、windows、linux系统上适用,所以如果要做跨平台的效果,先不要使用这个特性。
- Cocos2d-x 遮罩的实现 : ClippingNode
- Cocos2d-x使用ClippingNode实现遮罩效果
- cocos2d-x ClippingNode的使用 节点剪裁
- cocos2d-x ClippingNode
- 【Cocos2d-x】节点裁剪 ClippingNode
- Cocos2d-x的ClippingNode的最简要使用方法
- 【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1)
- 【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告(2)
- Cocos2d-x 3.x ClippingNode裁剪节点
- 关于cocos2d-js中使用 ClippingNode 以及 BlendFunc 来实现遮罩
- Cocos2d-x3.2 ClippingNode裁减节点(模板遮罩)
- Cocos2d-x3.2 ClippingNode裁减节点(模板遮罩)
- Cocos2d-x3.2 ClippingNode裁减节点(模板遮罩)
- Cocos2d-x中的那些坑--ScrollView,ClippingNode在Android上显示不正常的解决方法
- cocos2dx clippingNode的实现原理
- 【Cocos2d-x 3.2】裁剪节点(ClippingNode)总结
- 【Cocos2d-x 3.2】裁剪节点(ClippingNode)总结
- 【Cocos2d-x】3.3 ClippingRectangleNode与ClippingNode 以及 ClippingRectangleNode BUG
- NYOJ 60、75、113
- 最短路径算法学习
- 第十四周项目6-阅读程序
- MFC 处理 HTTP 请求的基本方法
- android 自定义View【2】对话框取色&色盘取色的实现
- Cocos2d-x 遮罩的实现 : ClippingNode
- 如何压缩mysql ibdata1文件
- PLA(principal component analysis ) 参考资料
- Servlet生命周期与工作原理
- 有个非计算机专业的问我:怎么学写游戏?
- Android 视频 H.264 编码文章集合
- C++ 字符串反转
- Struts2配置问题
- 软件工程——视频初总