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

裁剪模式

(1)创建裁剪对象

1

2

3

4

@H_301_25@ 5

6

7

8

9

10

 
        localbgColor=ccc3(255,0)--非高亮区域颜色@H_502_42@ 
       

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

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

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

localbatchNode=CCSpriteBatchNode:create(@H_502_42@

"Images/circle.png"@H_502_42@ 
        )@H_502_42@ 
        
       
          
        
        
        localcircleSpr=CCSprite:createWithTexture(batchNode:getTexture())@H_502_42@ 
       
 
        
        localcircleSize=circleSpr:getContentSize()@H_502_42@ 
       
 
       
          
        
        
        localwidthPara@H_502_42@ 
       
 
        
        localheightPara@H_502_42@ 
       
 
       
          
        
        
        localrectArray={@H_502_42@ 
       
 
        
        @H_502_42@ 
        [1]=CCRect(100,100,100),@H_502_42@ 
       
 
        
        [2]=CCRect(200,150),@H_502_42@ 
       
 
        
        [3]=CCRect(450,35,150,@H_502_42@ 
       
 
        
        [4]=CCRect(300,300,@H_502_42@ 
       
 
        
        }@H_502_42@ 
       
 
       
          
        
        
        for@H_502_42@ 
        i,rectinipairs(rectArray)@H_502_42@ 
        do@H_502_42@ 
       
 
        
        localcircleSpr=CCSprite:createWithTexture(batchNode:getTexture())@H_502_42@ 
       
 
       
          
        
        
        @H_502_42@ 
        if@H_502_42@ 
        notwidthParathen@H_502_42@ 
       
 
        
        localcircleSize=circleSpr:getContentSize()@H_502_42@ 
       
 
        
        @H_502_42@ 
       
 
        
        --宽度和高度参数，1.4142为根号2，矩形的外接椭圆的长轴与短轴长度@H_502_42@ 
       
 
        
        widthPara=1.4142/circleSize.width@H_502_42@ 
       
 
        
        heightPara=1.4142/circleSize.height@H_502_42@ 
       
 
        
        end@H_502_42@ 
       
 
       
          
        
        
        localfScaleX=widthPara*rect.size.width@H_502_42@ 
       
 
        
        localfScaleY=heightPara*rect.size.height@H_502_42@ 
       
 
        
        circleSpr:setScaleX(fScaleX)@H_502_42@ 
       
 
        
        circleSpr:setScaleY(fScaleY)@H_502_42@ 
       
 
        
        circleSpr:setPosition(rect:getMidX(),rect:getMidY())@H_502_42@ 
       
 
        
        batchNode:addChild(circleSpr)@H_502_42@ 
       
 
        
        end@H_502_42@ 
       
 
        
        @H_502_42@ 
       
 
        
        clipNode:setStencil(batchNode)--关键代码@H_502_42@

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

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

原始图片（Origin）

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

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

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

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