Cocos2d ClippingNode(遮罩效果、跑马灯)

一、先上代码：

function M:clip()
    local w, h = V.Width, V.Height
    -- 底板
    local clip = cc.ClippingNode:create()
    clip:setContentSize(w, h)
    
    local bg = cc.Sprite:create("res/updater/loading.jpg")
    bg:setPosition(w / 2, h / 2)
    clip:addChild(bg)

    -- 模板
    local stencil = cc.Sprite:createWithSpriteFrameName("world_grid_owner_10")
    stencil:setPosition(w / 2, h / 2)
    clip:setStencil(stencil)
    --[[
        false stencil的形状（默认）
        true 未被裁剪下来的内容
    ]]
    clip:setInverted(true)

    self:addChild(clip)
end

二、原理
以模板的形状来裁剪底板，模板本身不绘制;
原始裁剪图片：

grid.png 裁剪后效果： image.png

三、应用
游戏中可以利用ClippingNode实现跑马灯效果，简单描述下思路。跑马灯背景添加到底板上，再同样以跑马灯背景作为模板来裁剪底板，那么当背景上的label滚动到背景外面时候就会不可见。