参照了一下大神的文章,自己也试着写了一个
Cocos2d-x教程第(12)讲-利用遮罩(蒙版)CCLayerColor制作新手引导界面(中)
lua 代码如下:
local GuideLayer = class("GuideLayer",function() return cc.Layer:create() end) function GuideLayer.create(tTarget,fnCallBack) local layer = GuideLayer.new() if layer:Init(tTarget,fnCallBack)then return layer end end function GuideLayer:ctor() end function GuideLayer:Init(tTarget,fnCallBack) local winSize = cc.Director:getInstance():getWinSize() local clipNode = cc.ClippingNode:create() self:addChild(clipNode) --底板 local layer = cc.LayerColor:create(cc.c4b(0,110)) clipNode:setInverted(true) clipNode:addChild(layer) --clipNode:setAlphaThreshold(0) local radius = 55 local count = 200 local angel = 2 * 3.14 / count local tCircle = {} for i = 1,count do local radian = i * angel tCircle[i] = tCircle[i] or {} tCircle[i].x = radius * math.cos(radian) tCircle[i].y = radius * math.sin(radian) end local stencil = cc.DrawNode:create() stencil:drawPolygon(tCircle,count,cc.c4b(1,1),1)) local p = cc.p(tTarget:getPosition()) local anchorPoint = tTarget:getAnchorPoint() local size = tTarget:getContentSize() local wordPos = tTarget:getParent():convertToWorldSpace(p) --计算出模板的有效区域,,转换成屏幕坐标,否则模板有些地方点击失效 local rect = cc.rect(wordPos.x - size.width * anchorPoint.x,wordPos.y - size.height * anchorPoint.y,size.width,size.height) stencil:setPosition(wordPos.x,wordPos.y) stencil:setContentSize(size) clipNode:setStencil(stencil) --模板 local function OnTouchBegan(touch,event) return true; end local function OnTouchEnded(touch,event) print("touchend") local point = touch:getLocation() local rect = stencil:getBoundingBox() if cc.rectContainsPoint(rect,point) then print("执行了回调") fnCallBack() end end local maskListener = cc.EventListenerTouchOneByOne:create(); maskListener:registerScriptHandler(OnTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN); maskListener:registerScriptHandler(OnTouchEnded,cc.Handler.EVENT_TOUCH_ENDED); local eventDispatcher = self:getEventDispatcher(); eventDispatcher:addEventListenerWithSceneGraPHPriority(maskListener,self); maskListener:setSwallowTouches(true) return true end return GuideLayer
使用如下:
require "Cocos2d" require "Cocos2dConstants" local GameScene = class("GameScene",function() return cc.Scene:create() end) function GameScene.create() local scene = GameScene.new() if scene:Init()then return scene end end function GameScene:ctor() self.visibleSize = cc.Director:getInstance():getVisibleSize() self.origin = cc.Director:getInstance():getVisibleOrigin() end function GameScene:Init() local winSize = cc.Director:getInstance():getWinSize() local sprite = cc.Sprite:create("res/Hello.png") sprite:setPosition(winSize.width/3*2,winSize.height/2) self:addChild(sprite) --sprite:setScale(0.2) self.tTarget = sprite sprite:setScale(0.5) local GuideLayer = require("GuideLayer") local guide local tCopy = cc.Sprite:create("res/Hello.png") guide = GuideLayer.create(sprite,function()guide:removeFromParent() end) self:addChild(guide) return true end return GameScene
其中工程使用cocoide 建立的工程。
运行效果如下: