Cocos2d-x使用ClippingNode实现遮罩效果

本文介绍了Cocos2d-x中使用ClippingNode创建遮罩效果的方法,详细解析了官方文档,并通过模板和底板的概念解释了裁剪原理。示例代码展示了如何设置倒置来改变裁剪显示效果,提供了lua代码示例及其运行截图。
摘要由CSDN通过智能技术生成

关于ClippingNode


以下解析来自官方文档:http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d2/d06/classcocos2d_1_1_clipping_node.html

ClippingNode类 参考

ClippingNode是Node的子类。 使用模板(stencil)绘制它裁剪的内容(子节点)。 模板(stencil)是另一个节点(Node),它不会被绘制。 裁剪是通过使用模板的(alphaThreshold调节的)alpha部分完成的。 更多...

#include <CCClippingNode.h>

类 ClippingNode 继承关系图:


模板与底板


        最终显示效果是:在底板对应位置裁剪出模板形状部分并显示,图中浅灰色部分为显示效果


        设置倒置:clippingNode:setInverted(true)

        如果设置了倒置,显示效果如下(图中浅灰色部分为最终显示效果):



示例代码


lua代码(主要代码)

    -- 遮罩效果
    -- 模板
    local stencil = cc.Node:create()
    local dogTmp = cc.Sprite:create("res/dog.png")
    dogTmp:setPosition(cc.p(visibleSize.width/2,visibleSize.height/2))
    stencil:addChild(dogTmp)

    -- 初始化一个裁剪节点            
    local clippingNode = cc.ClippingNode:create(stencil)
    -- 倒置(Inverted) 如果设置为真(true),模板(stencil)会被反转,此时会绘制内容而不绘制模板(stencil)。 默认设置为假(false)    
    clippingNode:setInverted(true)
    --    alpha阈值(threshold) 只有模板(stencil)的alpha像素大于alpha阈值(alphaThreshold)时内容才会被绘制。 alpha阈值(threshold)范围应是0到1之间的浮点数。 alpha阈值(threshold)默认为1(alpha测试默认关闭)
    clippingNode:setAlphaThreshold(0)
    
    -- 底板
    local floor = cc.LayerColor:create(cc.c4b(0,0,0,150))    
    clippingNode:addChild(floor)
    
    sceneGame:addChild(clippingNode)


运行效果:倒置


运行效果:未倒置


源码下载

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值