首页 > 代码库 > quick-x 新手引导

quick-x 新手引导

大部分游戏都有新手引导,而新手引导很多表现都是 其他地方压黑,新手引导的按钮等高亮可点。针对这种情况,用ClippingNode写了一个简单方便的遮罩层。

 1 --[[ 2     touchRect: 3         1. CCRect 高亮区域 4         2.  { 5                 imagePath 高亮图片路径 6                 imagePos  高亮精灵位置 7                 scale, rotation 可选 8             } 9     canTouch: 高亮区域是否可点击10     callback: 点击遮罩后的回调(比如点击后进行下一个引导)11 ]]12 function G_createGuideLayer(touchRect, canTouch, callback)13     local highLightNode = nil14     if type(touchRect) == "table" then      --图片15         highLightNode = display.newSprite(touchRect.imagePath)16         highLightNode:setPosition(touchRect.imagePos)17         highLightNode:setScale(touchRect.scale or 1)18         highLightNode:setRotation(touchRect.rotation or 0)19     else                                    --CCRect 目前是矩形,可相应换成椭圆或固定图片20         local midX = touchRect:getMidX()21         local midY = touchRect:getMidY()22         highLightNode = CCSprite:createWithTexture(nil, touchRect)23         highLightNode:setPosition(midX, midY)24     end25 26     local layer = display.newLayer()27     28     --压黑29     local layerColor = CCLayerColor:create(ccc4(0, 0, 0, 200), display.width, display.height)30 31     --高亮32     local clipNode = CCClippingNode:create()33     clipNode:setInverted(true)34     clipNode:addChild(layerColor)35     local stencilNode = CCNode:create()36     stencilNode:addChild(node)37     stencilNode:addChild(highLightNode)38     clipNode:setStencil(stencilNode)39     clipNode:setAlphaThreshold(0)40 41     layer:addChild(clipNode)42 43     layer:setTouchEnabled(true)44     layer:registerScriptTouchHandler(function ( eventType,x,y )45         local point = highLightNode:getParent():convertToNodeSpace(ccp(x, y))46         if eventType == "began" then47             if layer:isVisible() == false then48                 return false49             end50             if canTouch == false then51                 return true52             --可点并且在高亮区域时不吞噬触摸,这样高亮区域的按钮就可以响应53             elseif highLightNode:getBoundingBox():containsPoint(point) then54                 return false55             else56                 return true57             end58         elseif eventType == "ended" then59             if canTouch == false then60                 if callback then61                     callback()62                 end63             end64         end65     end, false, -10000, true)66 67     return layer68 end

 有几种常用的用法:

local button = display.newSprite(ImagePath)                     :addTo(self)button:setTouchEnable(true)button:registerScriptTouchHandler( .... )

1.  按钮区域矩形高亮,点击屏幕任何一处移除遮罩,点击高亮区域按钮不响应

local rect = button:boundingBox()local layer = G_createGuideLayer(rect, false, function()    layer:removeFromParentAndCleanUp(true)end)

2. 按钮高亮(高亮区域跟按钮一模一样),点击屏幕任何一处移除遮罩,点击高亮区域按钮不响应

local tab = {    imagePath = imagePath,    imagePos = button:getParent():convertToWordSpace(button:getPositionInCCPoint()),
}local layer = G_createGuideLayer(rect, false, function() layer:removeFromParentAndCleanUp(true)end)

3. 按钮高亮(高亮区域跟按钮一模一样),点击高亮区域按钮响应,非高亮区域没反应

local tab = {    imagePath = imagePath,    imagePos = button:getParent():convertToWordSpace(button:getPositionInCCPoint()),}local layer = G_createGuideLayer(rect, true, function()    layer:removeFromParentAndCleanUp(true)end)

 

quick-x 新手引导