码迷,mamicode.com
首页 > 其他好文 > 详细

quick-x 新手引导

时间:2014-11-26 13:58:22      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   io   ar   color   os   sp   on   

大部分游戏都有新手引导,而新手引导很多表现都是 其他地方压黑,新手引导的按钮等高亮可点。针对这种情况,用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 = nil
14     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     end
25 
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" then
47             if layer:isVisible() == false then
48                 return false
49             end
50             if canTouch == false then
51                 return true
52             --可点并且在高亮区域时不吞噬触摸,这样高亮区域的按钮就可以响应
53             elseif highLightNode:getBoundingBox():containsPoint(point) then
54                 return false
55             else
56                 return true
57             end
58         elseif eventType == "ended" then
59             if canTouch == false then
60                 if callback then
61                     callback()
62                 end
63             end
64         end
65     end, false, -10000, true)
66 
67     return layer
68 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 新手引导

标签:des   style   blog   io   ar   color   os   sp   on   

原文地址:http://www.cnblogs.com/lyzz0612/p/4122890.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!