制作新手引导高亮区域方法之二：裁剪模式

裁剪模式

(1)创建裁剪对象

 
        localbgColor=ccc3(255,0)--非高亮区域颜色 
       
        localbgOpacity=0.6--非高亮区域透明度 
       
        locallayerColor=CCLayerColor:create(ccc4(bgColor.r,bgColor.g,bgColor.b,bgOpacity*255),size.width,size.height) 
       
        localclipNode=CCClippingNode:create(); 
       
        clipNode:setInverted( 
        true 
        )--设定遮罩的模式 
        显示没有被遮起来的纹理如果是 
        false 
        就显示遮罩起来的纹理 
       
        clipNode:setAlphaThreshold(0)--设定遮罩图层的透明度取值范围 
       
        clipNode:addChild(layerColor) 
       
        self:addChild(clipNode)

(2)创建用来裁剪的对象

因为这里都是使用同一张贴图，所以使用CCSpriteBatchNode统一创建

@H_301_135@ 27

localbatchNode=CCSpriteBatchNode:create( "Images/circle.png" )

 
        localcircleSpr=CCSprite:createWithTexture(batchNode:getTexture()) 
       

 
        localcircleSize=circleSpr:getContentSize() 
       

 
        localwidthPara 
       

 
        localheightPara 
       

 
        localrectArray={ 
       

 
        [1]=CCRect(100,100,100),

 
        [2]=CCRect(200,150), 
       

 
        [3]=CCRect(450,35,150, 
       

 
        [4]=CCRect(300,300, 
       

}

 
        for 
        i,rectinipairs(rectArray) 
        do 
       

 
        localcircleSpr=CCSprite:createWithTexture(batchNode:getTexture()) 
       

 
        if 
        notwidthParathen

 
        localcircleSize=circleSpr:getContentSize() 
       

 
        --宽度和高度参数，1.4142为根号2，矩形的外接椭圆的长轴与短轴长度 
       

 
        widthPara=1.4142/circleSize.width 
       

 
        heightPara=1.4142/circleSize.height 
       

end

 
        localfScaleX=widthPara*rect.size.width 
       

 
        localfScaleY=heightPara*rect.size.height 
       

 
        circleSpr:setScaleX(fScaleX) 
       

 
        circleSpr:setScaleY(fScaleY) 
       

 
        circleSpr:setPosition(rect:getMidX(),rect:getMidY()) 
       

 
        batchNode:addChild(circleSpr) 
       

end

 
        clipNode:setStencil(batchNode)--关键代码 
       

具体效果(裁剪模板模式 StencilMode)

教程方法一的使用的混合模式（BlendMode）

原始图片（Origin）

可以看到，裁剪模式已经出现了锯齿（后面会用另外一种方式解决这个问题）

原文链接：https://www.f2er.com/cocos2dx/343321.html

制作新手引导高亮区域方法之二：裁剪模式

猜你在找的Cocos2d-x相关文章