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

裁剪模式

(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统一创建

 
        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 
      
     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）

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

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

相关文章