标签：
引言
Cocos2d-x引擎中有很多Action，这样可以方便的让开发者调用相应的Action去完成一些动作，例如：移动，弹跳，淡入淡出等。可在实际的开发过程中，由于游戏的需要，显然地，引擎自带的Action是完全不够用的，很多时候都需要我们自己去写。今天我就来分享一个让精灵和粒子绕着圆角矩形运动的实例，细讲一下实现过程（仅凭个人想法实现，如有其他更好的方法，欢迎交流分享）。
效果
该实例类似天天爱消除等系列游戏中的按钮特效：
实现方法
刚开始本来考虑自己定义一条圆角矩形的路径，即建一个自己的动作模块，让精灵和粒子按照自己的定义的动作来运动来着，就像MoveTo/MoveBy、BezierTo/BezierBy等Action一样。但是后来发现好难啊，因为根本没有函数可以来定义圆角矩形（至少我不知道），所以一番纠结后，果断放弃了这种设想。
另辟蹊径，不是说cocos2d-x引擎提供很多的Action吗，那我们就来“拼”一个圆角矩形的Action啊！要“拼”这个Action，我觉得很有必要了解清楚Cocos2d-x中的各个Action，引擎中常用的Action有：
了解更多可查看官网信息: http://www.cocos2d-x.org/reference/native-cpp/V3.0alpha0/db/d61/classcocos2d11_action.html
其中以To结尾的动作和以By结尾的动作的区别在于：
To是设置Node(引擎中所以物体的基类)到指定坐标位置，而By则是设置Node到相对的坐标位置。例如：一个Sprite的坐标是（100,200），XXTo(1.0f, ccp(100, 100))是在1秒内运动到点(100, 100)处，无论节点之前的坐标在哪，它最终的位置坐标都是点（100,100）；XXBy(1.0f, ccp(100, 100))则是表示1秒内向x轴方向运动100个单位，向y轴方向运动100个单位，它是以自身节点为参照位置，运动了（100，100）个单位。
理清Action后回归到正题，根据圆角矩形的特征，这里我们可以把圆角矩形分成四段：左右两半弧和上下两直线，如下图：
沿直线的运动的2、4段我们可以用MoveTo、MoveBy，而沿着左右两边的曲线运动呢？曲线！首先想到的应该是贝塞尔曲线吧，先来了解一下贝塞尔曲线。
贝赛尔曲线的每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。
在引擎中是这样子定义一个贝塞尔曲线的配置信息的：
typedef struct _ccBezierConfig { //! end position of the bezier Point endPosition; //! Bezier control point 1 Point controlPoint_1; //! Bezier control point 2 Point controlPoint_2; } ccBezierConfig;
描述结构体中三个点分别是：曲线的目的结束点，控制点1和控制点2， Bezier的起始点则是它当前的位置坐标。贝塞尔曲线的两个控制点的位置将决定曲线的形状，不清楚的可以在Photoshop等有贝塞尔曲线的软件中去调。以圆角矩形左边的曲线为例，我调了一条曲线，如下图所示：
从图中可以看到，只要Point1与起始点连成的直线和Point2与结束点连成的直线平行 && 两个控制点都在以起点和终点为连线的同一个面 && 两个控制点的连线与起始点终点的连线平行时，就可以确定一条相对标准的曲线，可以近似圆角矩形的圆角部分。左右移动Point1和Point2的位置可调节这条曲线的形状，如图：
理清思路以后，上代码“画”上图的贝塞尔曲线：
ccBezierConfig bezier; bezier.controlPoint_1 = Point(-controlX, 0); //控制点1 bezier.controlPoint_2 = Point(-controlX, controlY); //控制点2 bezier.endPosition = Point(0, controlY); //目的地（终点） auto bezierBy = BezierBy::create(1.0f, bezier); //创建动作 node->runAction(bezierBy); //让节点按bezierBy路径运动
注意，使用BezierBy时，节点始终把自己的运动初始位置看做(0, 0)，与它的实际场景位置无关，ccBezierConfig中的点都是相对坐标点，如果使用BezierTo，ccBezierConfig的点就都是绝对坐标点，曲线的起始点也将被认作为实际场景位置坐标，而非(0, 0)，因此也将不能达到上图的效果。
右边的贝塞尔曲线类似，直线的运动同理用MoveBy，而不用MoveTo。移动的代码很简单，如：auto move = MoveBy::create(1.0f, Point(w, 0)); //向右移动W个单位。
这样圆角矩形的四部分都能用相应的Action来实现了，接下来该完成的就是把它们按顺序的串连在一起并重复的执行下去。那就要用到Sequenc（按顺序执行一系列的动作） 和RepeatForever（重复执行动作）了。下面就是抽象出来的方法，返回值为一个能绕圆角矩形运动的循环动作：
RepeatForever* HelloWorld::MyPathFun(float controlX, float controlY, float w) { ccBezierConfig bezier1; bezier1.controlPoint_1 = Point(-controlX, 0); bezier1.controlPoint_2 = Point(-controlX, controlY); bezier1.endPosition = Point(0, controlY); auto bezierBy1 = BezierBy::create(0.8f, bezier1); auto move1 = MoveBy::create(0.8f, Point(w, 0)); ccBezierConfig bezier2; bezier2.controlPoint_1 = Point(controlX, 0); bezier2.controlPoint_2 = Point(controlX, -controlY); bezier2.endPosition = Point(0, -controlY); auto bezierBy2 = BezierBy::create(0.8f, bezier2); auto move2 = MoveBy::create(0.8f, Point(-w, 0)); auto path = RepeatForever::create(Sequence::create(bezierBy1, move1, bezierBy2, move2, NULL)); return path; }
函数MyPathFun()的参数分别是控制点1的X分量、控制点2的Y分量（圆角矩形的高）、直线移动的x分量，如上图。因为参数controlX和w都不是确定的值，所以传参时要特别注意，要根据按钮的形状来调节这两个参数。
接下来只需要让节点runAction这个动作就可以了，下面利用粒子系统做一条尾巴。关于粒子特效的介绍大家可以参考泰然网的一篇文章，地址: http://www.tairan.com/archives/3460
ParticleSystem* HelloWorld::particleInit() { auto _emitter = new ParticleSystemQuad(); _emitter->initWithTotalParticles(50); addChild(_emitter, 10); _emitter->setTexture(Director::getInstance()->getTextureCache()->addImage("point.png")); _emitter->setAnchorPoint(Point(0, 0)); // duration _emitter->setDuration(ParticleSystem::DURATION_INFINITY); // radius mode _emitter->setEmitterMode(ParticleSystem::Mode::RADIUS); // radius mode: start and end radius in pixels _emitter->setStartRadius(4); _emitter->setStartRadiusVar(1); _emitter->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS); _emitter->setEndRadiusVar(0); // radius mode: degrees per second _emitter->setRotatePerSecond(100); _emitter->setRotatePerSecondVar(0); // angle _emitter->setAngle(90); _emitter->setAngleVar(0); // emitter position auto size = Director::getInstance()->getWinSize(); _emitter->setPosVar(Point::ZERO); // life of particles _emitter->setLife(0.5); _emitter->setLifeVar(0); // spin of particles _emitter->setStartSpin(0); _emitter->setStartSpinVar(0); _emitter->setEndSpin(0); _emitter->setEndSpinVar(0); // color of particles Color4F startColor(0.0f, 0.8f, 0.9f, 1.0f); _emitter->setStartColor(startColor); Color4F startColorVar(0, 0, 0, 1.0f); _emitter->setStartColorVar(startColorVar); Color4F endColor(1.0f, 1.0f, 1.0f, 0.1f); _emitter->setEndColor(endColor); Color4F endColorVar(0, 0, 0, 0.1f); _emitter->setEndColorVar(endColorVar); Color4F setStartColor(Color4F(Color4B(50, 50, 50, 50))); Color4F setEndColor(Color4F(Color4B(0, 0, 0, 0))); // size, in pixels _emitter->setStartSize(20); _emitter->setStartSizeVar(1); _emitter->setEndSize(0); // emits per second _emitter->setEmissionRate(_emitter->getTotalParticles() / _emitter->getLife()); // additive _emitter->setBlendAdditive(false); return _emitter; }
这里也可以利用粒子特效制作工具来编辑好看的粒子，然后通过plist文件加载粒子。
添加按钮btnSprite（这里按钮的描点要设为（0，0）），星星starSprite，尾巴_emitter后，设置星星和尾巴的位置与动作：
starSprite->setPosition(Point(btnSprite->getPosition().x + btnSprite->getContentSize().height / 2 - 4, btnSprite->getPosition().y));
//设置星星的坐标
_emitter->setPosition(Point(btnSprite->getPosition().x + btnSprite->getContentSize().height / 2 - 4, btnSprite->getPosition().y + 3));
//设置尾巴粒子发射器的坐标 float X = btnSprite->getContentSize().height / 2; auto path = MyPathFun(X+10, btnSprite->getContentSize().height, btnSprite->getContentSize().width - X * 2 );
//根据按钮的形状调节按钮的动作路径 starSprite->runAction(path); _emitter->runAction(path->clone());
这里把星星和尾巴的起点坐标设为上图的originPoint点，因为描点的原因，星星starSprite和尾巴_emitter的位置要做一定的微调。
该方法实用于任意圆角矩形，同时适用于矩形，只要把controlX设置为零，W设置为矩形宽就都实现，即：
MyPathFun(0, btnSprite2->getContentSize().height, btnSprite2->getContentSize().width );
工程下载地址：https://github.com/renshan/btnTest/tree/master/Test-btn
使用Cocos2d-x实现微信“天天爱消除”炫耀button特效
标签：
原文地址：http://www.cnblogs.com/jeason1997/p/5144490.html
