1.用ClippingNode可以实现上面的效果
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiIXZ05WZD9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVP9EVZoRGWa9mUuJmd5EjW1Z1RkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TM3YzM0gTMzITMxUDM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
2.以标题作为模板,光效经过ClippingNode(裁剪节点),裁剪掉多余的部分
3.附带上lua代码
-- 1.创建模板、ClippingNode(裁剪节点)
local stencil = display.newSprite("game_title.png")
local clipper = cc.ClippingNode:create()
clipper:setStencil(stencil)
-- clipper:setInverted(true)
clipper:setAlphaThreshold(0)
-- 2.标题和光效
local spr_title = display.newSprite("game_title.png")
local spark = display.newSprite("spark.png")
clipper:addChild(spr_title)
clipper:addChild(spark)
clipper:setPosition(cc.p(300, 300))
self:addChild(clipper)
-- 3.光效移动、自动裁剪
local sz = spr_title:getContentSize()
local move = cc.MoveTo:create(0.6, cc.p(sz.width, 0))
local delay1 = cc.DelayTime:create(0.5)
local move_back = cc.MoveTo:create(0.6, cc.p(-sz.width, 0))
local delay2 = cc.DelayTime:create(0.5)
local seq = cc.Sequence:create(delay1, move, delay2, move_back)
local repeatAction = cc.RepeatForever:create(seq)
spark:runAction(repeatAction)
4.资源代码下载地址:http://download.csdn.net/download/teng_ontheway/8688765
参考文章:
1.官方ClippingNode的使用
2.cocos2d js ClippingNode 制作标题闪亮特效 原文链接 http://www.waitingfy.com/archives/1093
3.比较详细的ClippingNode诠释 http://www.mamicode.com/info-detail-247772.html