cocos2dx精灵裁剪显示ClippingNode

港控/mmm° 2022-08-04 13:47 206阅读 0赞

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

![20150830214820476][]

使用示例

auto bg = LayerColor::create(Color4B(255, 255, 255,255));
        this->addChild(bg, -1);//1
    
        auto stencil = Sprite::create("CloseNormal.png");
        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));

当clipper->setInverted(true);时显示的是底板中扣去模板的图像

![20150830220214667][]

当clipper->setInverted(false);显示的是模板大小的图片，相当于底板的精灵只显示模板非透明区域的图像。

![20150830215745431][]

所以当游戏中要显示圆形头像，不用再生成一套资源，只需一张实心圆形的图片作为模板图即可。

[20150830214820476]: /images/20220731/57461f332e4f4274ba047ba3d63c096a.png
[20150830220214667]: /images/20220731/ce18a4732ed44e70b3d95765113cce75.png
[20150830215745431]: /images/20220731/ad82977e94fe43b7a9885c040f84e9ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 cocos2dx中ClippingNode实现带边框圆形头像

有个小需求，需要实现一个圆形的头像。要ui设计直接给圆形的png当然可以，但这种解决方式总是不优雅。然后就在网上查了半天，最终找到了使用ClippingNode来实现的方法。

野性酷女/ 2022年08月19日 14:10/ 0 赞/ 136 阅读

相关 cocos2dx setDisplayStats

82 <-- number of draw calls 0.016 <-- time it took to render the frame 60.0 <--

电玩女神/ 2022年08月14日 03:52/ 0 赞/ 343 阅读

相关 cocos2dx打包

转自 http://blog.csdn.net/cwn0812/article/details/8771865、根据实际情况，发现quickcocos2dx也可以用类似的方

一时失言乱红尘/ 2022年08月12日 01:12/ 0 赞/ 321 阅读

相关 cocos2dx3.0 遮罩技术, ClippingNode 和 DrawNode

先来说一下DrawNode类,这个是画图类,可以画各种几何形状. auto s = Director::getInstance()->getWinSize();

谁借莪１个温暖的怀抱￠/ 2022年08月11日 10:59/ 0 赞/ 133 阅读

相关 cocos2dx shader

在测试过程中，发现shader如果有错误，那么在material创建的时候就会报错。这是检查shader的一个好方法，但是不会告诉具体哪个条出错。在cocos2dx中，

谁借莪１个温暖的怀抱￠/ 2022年08月10日 00:48/ 0 赞/ 347 阅读

相关 cocos2dx 多个精灵执行同一个动作

最近在项目中出现了在一个场景中有多个精灵同一时刻执行同一个动作，直接使用runAction发现只有最后一个精灵执行了动作。最后发现一个动作同时只能给一个精灵执行；后来的解决

青旅半醒/ 2022年08月08日 14:56/ 0 赞/ 187 阅读

相关 cocos2dx精灵裁剪显示ClippingNode

ClippingNode(裁剪节点)可以用来对节点进行裁剪，可以根据一个模板切割图片的节点，生成任何形状的节点显示。 ![20150830214820476][] 使用示例

港控/mmm°/ 2022年08月04日 13:47/ 0 赞/ 207 阅读

相关 cocos2dx特效

//3D晃动的特效 // CCActionInterval shaky3D = CCShaky3D::create(5, CCSize(10, 10)

末蓝、/ 2022年07月27日 23:30/ 0 赞/ 369 阅读

相关 cocos2dx精灵做正逆时针圆周运动

这个是在cocos2dx示例中看到的，可能会用到，记录下载 void HelloWorld::update(float dt) \{ static float

秒速五厘米/ 2022年07月27日 14:52/ 0 赞/ 189 阅读

相关 Cocos2d-x 之显示精灵 Sprite

Sprite Sprite是cocos2d-x中用来显示图片的主要对象，它的创建有四种方式，下面分别介绍：直接用图片文件创建 //直接用单张图片创建精灵

墨蓝/ 2022年06月12日 03:18/ 0 赞/ 207 阅读