前段时间被clipNode困扰了一会，彻底弄透以后写篇文章介绍一下
clipNode是一个可以根据模板(stencil)来显示指定内容的强大控件，它可以做出动态高亮效果。也可以做新手引导。
如下图所示

这里来介绍一下如何实现
如图所示，那个穿透的地方就是stencil。clipNode在于它支持是否显示模板。
像新手引导这个例子就是不显示模板的。那么它就是透的。
clipNode首先是一个node,那么它就有children，这些children的层级是先加的在下，后加的在上。而这个stencil是比较特殊的child,它只允许设置一个
clipNode:setStencil()
添加了stenceil以后，就可以对它的显示进行控制了
clipNode:setInverted()
这个是用来设置是显否显示stenceil的，若是false，则只显示stencil的内容，其他内容看不到。若为true，则显示的是除了stenceil以外的内容

图是盗的别人的，它所做的就是只显示stencil。而上面那个图相反，不显示stencil。
setInverted(true) 不显示stencil
setInverted(false) 只显示stencil
这么记有点绕，可以记为true时显示非stencil的内容，反之显示stenceil。
以下是伪代码
第一种

// 新手引导
local maskLayer = display.newColorLayer(cc.c4b(0,0,120))  // 遮罩
local clipNode = cc.ClippingNode:create()
clipNode:addTo(self)
clipNode:setInverted(true)
local sprite = display.newSprite('a.png')         // 透出来的框
clipNode:setStencil(sprite)
clipNode:addChild(maskLayer)
clipNode:setAlphaThreshold(0)

第二种

// 字幕显示
local title= display.newSprite('title.png') // 下面的文字
local clipNode = cc.ClippingNode:create()
clipNode:addTo(self)
clipNode:setInverted(false)
local sprite = display.newSprite('a.png') //遮罩
clipNode:setStencil(title)
clipNode:addChild(sprite)
clipNode:setAlphaThreshold(0)

不同之处就是设置了显示哪一部分

https://www.processon.com/i/568c6ea4e4b0e51d149a085f 这个网站解决了大家开始设计阶段的问题，轻量级的各种设计模型，强烈推荐