由于现在项目需要在春节进行更新，主要方面包括烟花效果以及鞭炮效果等
烟花效果主要由粒子完成，如果需要更好的效果，可以使用序列帧的方式，每一张图片的尺寸可以一定程度的缩小，保证内存的消耗不是过大。
当然今天主要讨论的问题不是烟花效果，是如果做一个比较效果不错的鞭炮。如下图所示：
这里主要谈两部分的内容，第一部分如何开发较简单的直鞭炮；第二部分我们将讨论下如果做其他形状鞭炮方法。
简单鞭炮制作
这里主要用到的相关技术： DB(DragonBones)、ClippingNode、粒子；主要使用Lua作为脚本语言来进行开发。
首先我们需要确定鞭炮有多少个个数，个数不一样那么最后鞭炮的长度也是不同的。
local bianpao_type = { 25, 18, 13 }
上图我们确定了长度分别为25、18、13几种长度的鞭炮
最后得到的图如上图，我们这里数量不是真实的数量，我们生成的时候数量是4x个
local function genWhipItem(p_node, index, num) local pos = { cc.p(rand(90, 93), num * 100), cc.p(-rand(90, 93), num * 100), cc.p(rand(90, 93), num * 100 + 25), cc.p(-rand(90, 93), num * 100 + 25), } local rotation = { rand(6, 8), -rand(6, 8), rand(6, 8), -rand(6, 8) } local order = { 3, 3, 1, 1 } for i = 1, 4 do local item_pao = create() p_node:addChild(item_pao.node, order[i]) item_pao.node:setPosition(pos[i]) item_pao.node:setRotation(rotation[i]) pianpao_arr[index][#pianpao_arr[index] + 1] = item_pao.node end end上述函数是生成每一组鞭炮的函数，设定了每个鞭炮的位置有一点随机，Order的设定为了燃放的时候先放上层，整体的燃放方式就是先上后下，先左后右。
然后说下引线的制作方法
首先有一条鞭炮捏的图片，然后将使用ClippingNode就可以完成一个遮罩动画，感觉引线越来越短，当然这里ClippingNode只限于规则的图形，下一块我们讨论非规则引线的实现方案。
ClippingNode这里简单说下，具体可以参考上面的链接
一个ClippingNode对象可以设置底版和模板（Stencil），这里弄清楚两者的区别就可以非常容易的使用了。
模板就是遮罩层，不会对其绘制，将通过它对底版进行裁剪。
底版就是显示层，ClippingNode* node = new ClippingNode();...(一定设置了模板)，node->addChild(child_node); 这里addChild的所有的Node就是底版。
引线这里可以显示了越来越短了，但是似乎还是少了点什么，对了火星子，这里我们使用一个粒子动画，来模拟就可以。有一个细节就是在执行move动画的时候，一定运动同步，最好开始定一个速度，然后引线缩短和粒子移动是一致的。
引线制作完成了，当到达了鞭炮位置，鞭炮需要燃放，鞭炮本身是一个骨骼动画，播放爆炸的动画，然后释放掉就可以了。一定要小心节奏的控制，否则会感觉很假。
好啦，很简单，下面看看非规则图形怎么办，比如下图
这个图我们想沿着“S"图形的一端沿着轨迹走完，走过的地方被清除。首先我们发现使用ClippingNode的遮罩怎么都无法完成这个工作。
我们需要变通，更换思路，可以参考RenderTexture绘制的方法，然后设置一个橡皮去擦除，橡皮需要依靠路径斜率来变化角度。
RenderTexture的实现方法如下：
创建
ear_can_use = cc.Sprite:create("ear.png") ear_can_use:setRotation(-60) local array = { cc.p(893, 580), cc.p(1040, 580), cc.p(1120, 675), cc.p(1002, 795), cc.p(928, 910), cc.p(1000, 950), cc.p(1130, 950) } local action = cc.CardinalSplineBy:create(3, array, 0) ear_can_use:runAction(action) drawNode1 = cc.Sprite:create("ear.png") drawNode1:runAction(cc.Sequence:create({ cc.RotateBy:create(0.8, -90), cc.RotateBy:create(0.4, -75), cc.RotateBy:create(0.16, -40), cc.RotateBy:create(0.25, 40), cc.RotateBy:create(0.5, 70), cc.RotateBy:create(0.8, 90), })) ear_can_use:runAction(cc.Sequence:create({ cc.RotateBy:create(0.1, 0), cc.RotateBy:create(10, -60), })) ear_can_use:setVisible(false) drawNode1:setRotation(-60) drawNode1:setPosition(200, 1536 / 2) drawNode1:setVisible(false) pRTex = cc.RenderTexture:create(2048, 1536) pRTex:setPosition(cc.p(1024, 1536 / 2)) current_page_objects['Page']:addChild(pRTex, 10) local image = cc.Sprite:create("s_mask_image.png") image:setPosition(cc.p(1024, 1536 / 2)) pRTex:begin() image:visit() pRTex:endToLua()update中
local posi = cc.p(ear_can_use:getPositionX(), ear_can_use:getPositionY()) drawNode1:setPosition(cc.p(posi.x, posi.y )); drawNode1:setBlendFunc(cc.blendFunc(gl.ZERO , gl.ONE_MINUS_SRC_COLOR)) pRTex:begin() drawNode1:setVisible(true) drawNode1:visit() drawNode1:setVisible(false) pRTex:endToLua()这里相当于在每一帧设置了橡皮的位置与游动图片一致，那么就会按照路径来进行删除了。
角度的设置根据图形的不同而设定不同，一般可以放到update中，一段时间执行一次计算，其实和微积分的思路差不多。
欢迎大家多来提问！
转载于:https://www.cnblogs.com/TomYuan/p/5133647.html
相关资源：CocosCreator项目实战（15）：动画与音效