Cocos2d-x 3.x节点裁剪以及实现跑马灯

Cocos2d-x 3.x节点裁剪以及实现跑马灯,第1张

概述3.x节点裁剪还是很有作用的,很多功能都可以用上; 节点裁剪功能简介: ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。 ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。 ClippingNode 原理: ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何

3.x节点裁剪还是很有作用的,很多功能都可以用上;


节点裁剪功能简介:


ClipPingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。

ClipPingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。

ClipPingNode 原理:

ClipPingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何理解ClipPingNode的遮罩?看下图的例子吧。所谓模板,就是一个形状,透过该形状可看到底板上的图层,如果底板上没有任何内容,则直接看到Layer上的内容,而底板上的东西又不会妨碍Layer上的东西,即模板在底板之外的空间对于Layer来说是透明的。

ClipPingNode 常用方法

create

可以使用static ClipPingNode* create();方法创建一个ClipPingNode对象。如下:

1 auto clipper = ClipPingNode::create();

也可以使用static ClipPingNode* create(Node *stencil);方法创建;在创建的时候指定裁剪模板

1 2
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示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 auto bg = Layercolor::create(color4B(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 ->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);运行效果如图:

跑马灯实现: 跑马灯即游戏当中在特定区域滚动的公告显示; 附上代码: /* 节点裁剪 */
//DrawNode *baseDraw = DrawNode::create();
//Vec2 triangle[4];
//triangle[0] = Vec2(200,200);
//triangle[1] = Vec2(200,300);
//triangle[2] = Vec2(500,300);
//triangle[3] = Vec2(500,200);
//color4F blue(0,1,0);
//baseDraw->drawpolygon(triangle,4,blue,blue);
////---------------------------------------
//auto labelText = Label::create();
//
//labelText->setString("Text Label!!");
//labelText->setScale(2.0f);
//labelText->setposition(600,220);
//auto clipper = ClipPingNode::create();
//clipper->setposition(visibleSize/2);
//clipper->setStencil( baseDraw );
//clipper->setInverted(false);
//clipper->addChild(labelText);


//labelText->runAction(Moveto::create(20.0f,Vec2(-600,220));
//clipper->setAlphaThreshold(1.0f);
//addChild(clipper);

代码中坐标设置不对,自己改下就好了,用到了DrawNode可以自行百度使用。

本文可自由复制和转载!

总结

以上是内存溢出为你收集整理的Cocos2d-x 3.x节点裁剪以及实现跑马灯全部内容,希望文章能够帮你解决Cocos2d-x 3.x节点裁剪以及实现跑马灯所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1014642.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存