【Cocos2dx 3.3 Lua】剪裁结点ClippingNode

参考资料：

     http://shahdza.blog.51cto.com/2410787/1561937

   http://blog.csdn.net/jackystudio/article/details/17160973

 

【ClippingNode】

一、原理

    ClippingNode（裁剪节点）能够用来对节点进行裁剪。ClippingNode是Node的子类，能够像普通节点同样放入Layer，Scene，Node中。

    主要是根据一个模板（Stencil）切割图片的节点，生成任何形状的节点显示。

    ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。

    如何理解ClippingNode的遮罩？看下图的例子吧。

 

二、举例说明

    > 模板（Stencil）：可使用Layer、Node、Sprite等。

    > 底板           ：可使用Layer、Node、Sprite等。

    > Layer层

 

  2.一、第一组（Layer层无背景图片）

    > 模板（Stencil）：模板为Node节点，放入5个Sprite的小球。

    > 底板           ：底板为Node节点，放入1个Sprite的ABCD图。

    > Layer层        ：无元素，背景颜色为黑色。

            

 

    > 裁剪遮罩效果示意图：

    ​

 

  2.二、第二组（Layer层有背景图片）

    > 模板（Stencil）：模板为Node节点，放入5个Sprite的小球。

    > 底板           ：底板为Node节点，放入1个Sprite的ABCD图。

    > Layer层        ：有一个Sprite的cocos2dx背景图片。

            

 

    

    > 裁剪遮罩效果示意图：

 

  2.三、分析总结

    经过ClippingNode进行裁剪遮罩，实际上是这样的：

        > 将模板（Stencil）上全部元素的形状集合做为“形状模板”，其元素自己不渲染。

        > 使用“形状模板”对底板进行裁剪。

        > 显示从底板上裁剪下来的图片区域。

    总的来讲：

        > 模板（Stencil）至关因而一个样板，上面有不少不一样形状的"洞洞"。

        > 而后根据样板，对底板进行裁剪，"挖洞"。

        > 而后将剪下来的那些碎片，按照原来的位置进行摆放。

    其中：模板（Stencil）只是一个“形状模板”，自己的图片是不进行绘制的。

 

三、主要函数

    ClippingNode继承于Node类，用于节点的裁剪与遮罩。

 

  3.一、建立ClippingNode

    两种方式：是否使用模板（stencil）来建立。

1 2 3 4 5 6 7

//      //建立，不含模板（stencil）      ClippingNode* clippingNode = ClippingNode::create();        //建立，使用模板（stencil）      ClippingNode* clippingNode = ClippingNode::create(stencil); //

    

  3.二、设置模板（Stencil）

    模板节点是Node的子类，通常经常使用DrawNode，由于它能够绘制不一样形状的图形。固然也能够直接使用Node节点做为做为模板。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// /**   *     用来作裁剪的模板（stencil）节点（Node）   *     模板（stencil）对象，默认为空（nullptr）   **/      Node* stencil = Node::create();     //模板stencil节点Node            stencil->addChild(spriteBall1);     //添加小球1      stencil->addChild(spriteBall2);     //添加小球2      stencil->addChild(spriteBall3);     //添加小球3      stencil->addChild(spriteBall4);     //添加小球4      stencil->addChild(spriteBall5);     //添加小球5            clippingNode->setStencil(stencil);  //设置模板Stencil //

 

  3.三、设置底板（Content）

1 2 3 4

//      //建立ClippingNode后，使用addChild()添加的节点，即为底板内容      clippingNode->addChild(content);  //设置底板 //

 

  3.四、倒置显示（Inverted）

    > false ：显示被模板裁剪下来的底板内容。默认为false。

    > true  ：显示剩余部分。

1 2 3 4 5

//      //默认为false      //表示显示被裁剪下来的底板内容      clippingNode->setInverted( false ); //

 

  3.五、alpha阈值（alphaThreshold）

    > alpha：表示像素的透明度值。

    > 只有模板（stencil）中像素的alpha值大于alpha阈值时，内容才会被绘制。

    > alpha阈值（alphaThreshold）：取值范围[0,1]。

    > 默认为 1 ，表示alpha测试默认关闭，即所有绘制。

    > 若不是1  ，表示只绘制模板中，alpha像素大于alphaThreshold的内容。

1 2 3 4 5

//      //设置alpha透明度闸值      //即显示模板中，alpha像素大于0.05的内容      holesClipper->setAlphaThreshold(0.05f);  //

  具体说明：

    如下是一张40*40的图片，其中小球之外的其余区域像素为透明的（即：alpha为 0 ）。

    

    （1）在不设置AlphaThreshold闸值，或者setAlphaThreshold(1.0f)，的状况下：

    

 

    （2）在设置setAlphaThreshold(0.5f)，的状况下：

    

    （3）结论：

        > 能够发如今不设置alpha闸值时，模板绘制的区域为一个40*40的矩形。

        > 设置了alpha闸值为0.5时，透明度alpha为0的像素不被绘制，只绘制了一个小圆。

 

---

 

具体实例：

一、子弹穿孔

    1.1 建立子弹的ClippingNode

 

HoleClipping.lua

Link: http://codepad.org/jmwuH8CM    [ raw code | fork ]

HoleClipping=class("HoleClipping",function()
    return cc.ClippingNode:create()
end)

HoleClipping.ctor=function(self)
    self:setInverted(true)
    self:setAlphaThreshold(0.5)

    self.stencil=cc.Node:create()
    self.holes=cc.Node:create()

    self:setStencil(self.stencil)
    self:addChild(self.holes)
end

--在指定点添加子弹孔
HoleClipping.addHole=function(self,point)
    self.rotate=math.random(0,1)*360    --旋转角度
    self.scale=math.random(0,1)*0.2+0.9 --缩放

    local stencil=function()
        local sprite=cc.Sprite:create("Images/hole_stencil.png")
        sprite:setPosition(point.x,point.y)
        sprite:setScale(self.scale)
        sprite:setRotation(self.rotate)
        return sprite
    end

    local content=function()
        local sprite=cc.Sprite:create("Images/hole_effect.png")
        sprite:setPosition(point.x,point.y)
        sprite:setScale(self.scale)
        sprite:setRotation(self.rotate)
        return sprite
    end

    self.holes:addChild(content())
    self.stencil:addChild(stencil())
end

--添加剪裁内容
HoleClipping.addContent=function(self,content)
    self.holes:addChild(content)
end

HoleClipping.create=function()
    local clip=HoleClipping.new()
    return clip
end

return HoleClipping

 

 

Background.lua

Link: http://codepad.org/C13kJ4vP    [ raw code | fork ]

Background=class("Background",function()
    return cc.ClippingNode:create()
end)

Background.ctor=function(self)
    local size=cc.Director:getInstance():getWinSize()
    self:setPosition(size.width/2,size.height/2)
    self:setAnchorPoint(0.5,0.5)
    local action=cc.RotateBy:create(1,90)
    self:runAction(cc.RepeatForever:create(action))

    self:setStencil(self:block())
end

--背景图片
Background.block=function(self)
    local sprite=cc.Sprite:create()
    sprite:setTexture("Images/blocks.png")
    sprite:setScale(3)
    return sprite
end

Background.create=function()
    local sprite=Background.new()
    return sprite
end

return Background

 

HoleLayer.lua

Link: http://codepad.org/FZKuKRDS     [ raw code | fork ]

HoleLayer=class("HoleLayer",function()
    return cc.LayerColor:create(cc.c4b(0,60,30,255))
end)

HoleLayer.ctor=function(self)
    local function onTouchBegin(touch,event)
        if self:onTouchBegin(touch,event) then
            return true
        end
        return false
    end

    local function onTouchMoved(touch,event)
        self:onTouchMoved(touch,event)
    end

    local function onTouchEnded(touch,event)
        self:onTouchEnded(touch,event)
    end
    local listener=cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegin,cc.Handler.EVENT_TOUCH_BEGAN)
    listener:registerScriptHandler(onTouchMoved,cc.Handler.EVENT_TOUCH_MOVED)
    listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED)
    local dispacher=cc.Director:getInstance():getEventDispatcher()
    dispacher:addEventListenerWithSceneGraphPriority(listener,self)

    --添加BackgrounClipping
    local node=require("sprite/clipping/Background")
    self.outerClip=node.create()
    
    --添加子弹HoleClip
    local hole=require("sprite/clipping/HoleClipping")
    self.holeClip=hole.create()
    self.holeClip:addContent(self.outerClip:block())
    
    self.outerClip:addChild(self.holeClip)
    self:addChild(self.outerClip)
end

HoleLayer.onTouchBegin=function(self,touch,event)
    cclog("<HoleLayer.onTouchBegin>")
    return true
end

HoleLayer.onTouchMoved=function(self,touch,event)

end

HoleLayer.onTouchEnded=function(self,touch,event)
    local point=touch:getLocation() --返回的是WordSpace坐标
    self.holeClip:addHole(self.holeClip:convertToNodeSpace(point))  --转换成NodeSpace
    
    --outerClip特效
    local action1=cc.ScaleBy:create(0.05,0.95)
    local action2=cc.ScaleTo:create(0.1,1)
    self.outerClip:runAction(cc.Sequence:create(action1,action2))
end

HoleLayer.create=function()
    local layer=HoleLayer.new()
    return layer
end

return HoleLayer

 

 

执行效果：

    

 

 

二、闪烁字实现

    ClipFont.lua

Link:  http://codepad.org/gYufliIO     [  raw code |  fork ]   Lua, pasted 2 seconds ago:  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ClipFont=class("ClipFont",function() return cc.ClippingNode:create() end) ClipFont.init=function(self) self:setInverted(false) self:setAlphaThreshold(0.5) local size=cc.Director:getInstance():getWinSize() local loadTitle=function() local title=cc.Sprite:create() title:setTexture("clipfont/game_title.png") title:setPosition(size.width/2,size.height/2) return title end local loadSpark=function() local spark=cc.Sprite:create() spark:setTexture("clipfont/spark.png") spark:setAnchorPoint(1,1) spark:setPosition(0,size.height) local move_end=cc.MoveTo:create(1,cc.p(size.width,size.height)) local move_begin=cc.MoveTo:create(1,cc.p(0,size.height)) local seq=cc.Sequence:create(move_end,move_begin) spark:runAction(cc.RepeatForever:create(seq)) return spark end local title=loadTitle() local spark=loadSpark() self:addChild(title,1) self:addChild(spark,2) self:setStencil(title) --ClippingNode的模板是特效字 end ClipFont.create=function(self) local node=ClipFont.new() node:init() return node end return ClipFont

闪烁字效果：

    

三、新手指引

    ClipGuide.lua

Link: http://codepad.org/7ZMoNJz2    [ raw code | fork ]

ClipGuide=class("ClipGuide",function()
    return cc.ClippingNode:create()
end)

ClipGuide.init=function(self)
    local size=cc.Director:getInstance():getWinSize()
    local loadTexture=function(texture,position)
        local sprite=cc.Sprite:create()
        sprite:setTexture(texture)
        sprite:setPosition(position.x,position.y)
        return sprite
    end

    --模板
    local stencilPosition=cc.p(size.width/2,size.height/2)
    local stencil=loadTexture("clipguide/CloseSelected.png",stencilPosition)
    local stencilSize=stencil:getBoundingBox()
    stencil:setScale(1.5)
    self.stencil=stencil

    --背景图层
    local layer=cc.LayerColor:create(cc.c4b(0,0,0,200),size.width,size.height)

    self:setInverted(true)
    self:setAlphaThreshold(1)
    self:setStencil(stencil)
    self:addChild(layer)
end

ClipGuide.getStencilRect=function(self)
    local pointX=self.stencil:getPositionX()
    local pointY=self.stencil:getPositionY()
    local size=self.stencil:getBoundingBox()
    return cc.rect(pointX-size.width/2,pointY-size.height/2,size.width,size.height)
end

ClipGuide.create=function(self)
    local clip=ClipGuide.new()
    clip:init()
    return clip
end

return ClipGuide

BackLayer.lua

Link: http://codepad.org/P7ZpcqTW    [ raw code | fork ]

BackLayer=class("BackLayer",function()
    return cc.Layer:create()
end)

BackLayer.ctor=function(self)
    local size=cc.Director:getInstance():getWinSize()
    self.size=size
    local sprite=cc.Sprite:create("clipguide/HelloWorld.png")
    sprite:setPosition(size.width/2,size.height/2)
    self:addChild(sprite)

    --添加ClippingNode遮罩
    local clip=require("sprite.clipping.guide.ClipGuide")
    self.clip=clip.create()
    self:addChild(self.clip)

    --添加提示标志
    self.tip=self:guideSprite()
    self:addChild(self.tip)

    --添加监听事件
    self:event()
end

BackLayer.guideSprite=function(self)
    --提示标志
    local guide=cc.Sprite:create()
    guide:setTexture("clipguide/tip.png")
    guide:setPosition(self.size.width/2-55,self.size.height/2+40)
    guide:setScale(0.4)
    guide:setRotation(60)

    --提示标志动做
    local scale1=cc.ScaleBy:create(0.25,0.95)
    local scale2=cc.ScaleTo:create(0.25,0.4)
    local action=cc.Sequence:create(scale1,scale2)
    guide:runAction(cc.RepeatForever:create(action))

    return guide
end

BackLayer.event=function(self)
    local function onTouchBegin(touch,event)
        return true
    end

    local function onTouchMoved(touch,event)
    end

    local function onTouchEnded(touch,event)
        local location=touch:getLocationInView()  -- touch in screen
        local glPoint=cc.Director:getInstance():convertToGL(location)
        if self.clip and self.tip then
            local rect=self.clip:getStencilRect()
            if cc.rectContainsPoint(rect,glPoint) then
                self:removeChild(self.clip,true)
                self:removeChild(self.tip,true)
                self.clip,self.tip=nil,nil
            end
        end
    end

    local listener=cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegin,cc.Handler.EVENT_TOUCH_BEGAN)
    listener:registerScriptHandler(onTouchMoved,cc.Handler.EVENT_TOUCH_MOVED)
    listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED)

    local dispacher=cc.Director:getInstance():getEventDispatcher()
    dispacher:addEventListenerWithSceneGraphPriority(listener,self)
end

BackLayer.create=function()
    local layer=BackLayer.new()
    return layer
end

return BackLayer

 

执行效果：