制作新手引导高亮区域方法之一：混合模式

发布时间：2020-12-14 21:08:32 所属栏目：百科来源：网络整理

导读：demo下载： Quick-x-HighlightArea-master.zip 1、混合模式（1）首先创建一个全屏的CCRenderTexture实例这里使用的黑色 0.6的透明度，看起来的效果就是一层黑色半透明的遮罩叠在游戏界面上面： 1 2 3 4 localpRt=CCRenderTexture:create(size.width,size.h

demo下载：Quick-x-HighlightArea-master.zip

1、混合模式

（1）首先创建一个全屏的CCRenderTexture实例

这里使用的黑色 0.6的透明度，看起来的效果就是一层黑色半透明的遮罩叠在游戏界面上面：

 
        localpRt=CCRenderTexture:create(size.width,size.height) 
       
        localcolor=ccc3(0,0)--黑色 
       
        localopacity=0.6--透明度 
       
        pRt:clear(color.r,color.g,color.b,opacity)

（2）设置混合模式

具体原理可以参考http://www.52php.cn/article/p-xfoespbu-xd.html

 
        3 
        
     localblend=ccBlendFunc() 
        
        blend.src=GL_ZERO 
       
        blend.dst=GL_ONE_MINUS_SRC_ALPHA

(3) "刷"出高亮区域

这里是把一个黑色的圆形通过拉伸来实现椭圆效果（CCRenderTexture有个坑，注意不要在begin和endToLua之间创建精灵，安卓下会发生偏移，以后还会提到）：

 
        4 
      
        5 
      
        6 
      
        7 
      
        8 
      
        9 
      
        10 
      
        11 
      
        12 
      
        13 
      
        14 
      
        15 
      
        16 
      
        17 
      
        18 
      
        19 
      
        20 
      
        21 
      
        22 
      
        23 
      
        24 
      
        25 
      
     localcircleSpr=CCSprite:create( 
        "Images/circle.png") 
        localcircleSize=circleSpr:getContentSize() 
       
        circleSpr:setBlendFunc(blend)--把贴图“刷”掉，高亮效果的关键 
       
        --宽度和高度参数，1.4142为根号2，矩形的外接椭圆的长轴与短轴长度 
       
        localwidthPara=1.4142/circleSize.width 
       
        localheightPara=1.4142/circleSize.height 
       
        localrectArray={[1]=CCRect(100,100,100), 
       
        [2]=CCRect(200,150), 
       
        [3]=CCRect(450,35,150, 
       
        [4]=CCRect(300,300, 
       
        } 
       
        pRt:begin() 
       
        for 
        i,rectinipairs(rectArray) 
        do 
       
        localfScaleX=widthPara*rect.size.width 
       
        localfScaleY=heightPara*rect.size.height 
       
        circleSpr:setScaleX(fScaleX) 
       
        circleSpr:setScaleY(fScaleY) 
       
        circleSpr:setPosition(rect:getMidX(),rect:getMidY()) 
       
        circleSpr:visit() 
       
        end 
       
        pRt:endToLua()

(4)获得贴图然后创建精灵即可，注意要翻转一下y轴

 
        4 
        
     localnewSprite=CCSprite:createWithTexture(pRt:getSprite():getTexture()) 
        
        newSprite:setFlipY( 
        true 
        )--翻转 
       
        newSprite:setPosition(display.cx,display.cy) 
       
        self:addChild(newSprite)

使用的圆形图片

具体效果

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!