地球人己阻止不了程序猿们学习cocos2d-x了 (第五篇)

转自http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=1222&extra=page%3D1

内容重点: 为 cocos2d-x 加上关键帧粒子系统.

cocos2d-x 的粒子系统只有单一发射器, 而且粒子的变化只有开始和结束的设定, 局限挺大的.

举个列子, 一个好的爆炸效果, 要有烟, 有火花, 可能还会有碎片, 要多个发射器加在一起才能做到. 

而爆炸的火花是忽然间变光然後再变暗, 所以颜色等的变化要有 关键帧 般的设定才可以做到这个效果.

以我接触过的2D引擎来说, 我觉得是Torque2D 的粒子系统是比较出色的一个, 要把它移植到 cocos2d-x 有点难度, 但模仿一下总是可以的 


对於多发射器的支持, cocos2d 是可以做到, 我们只要把几个 CCParticleSystemQuad 组合在一起用就可以.

以关键帧来控制粒子变化我们就要费点心思了, 在以不影响 cocos2d-x 库的情况下, 我以引申 CCParticleSystemQuad 的方法来实现它:

class CCParticleEmitter: public CCParticleSystemQuad

{

public:

        CCParticleEmitter();

        virtual ~CCParticleEmitter();

        virtual void update(float dt);

        void InitEmitter(CCParticleController &controller);

        

        void AddEmittingCounterKeyFrame(float time, float value);

        void Reset();

private:

        CCParticleControl mEmittingCount;

        int mControllerCount;

        CCParticleController **mControllers;

};

复制代码

CCParticleSystemQuad 的 update() 是 virtual 的, 正好方便我们弄自己的粒子系统.

首先我们先了解一下怎样以关键帧来控制粒子变化. 简单来说, 我们就是定义一系列的"时间:数值"组合, 来决定粒子的某个属性在某个时间段的变化.

比如说粒子的透明度 (alpha):

时间(秒) : 透明度
0.0 : 1.0
1.0 : 0.5
2.0 : 0.0

这个列表说明, 在一开始, 粒子的透明度是1.0, 即是完全不透明, 到了1秒的时候, 透明度变成了0.5, 一半透明了, 最後到了2秒, 粒子变成完全透明, 即是消失了!

但是以秒为作为关键帧的时间单位有个不好的地方, 就是每个粒子生命的长短一般都是不规则的(不规则的安排才能做出好的粒子效果), 那我们在制定关键帧时就比较杯具了, 很难统一的去处理每个粒子. Torque2D 的原作者(Melv May)想到了一个较好的方法, 时间的表达不是用时间,
而是用粒子生命的百分比. 比如像刚才的例子, 那个粒子的生命週期是2秒, 那我们的列表就变成了:

生命週期的百分比 : 透明度
0.0 : 1.0
0.5 : 0.5
1.0 : 0.0

1.0 就是代表100%, 整个生命週期的长短.

现在以关键帧控制的粒子属性有:

- 粒子数目
- 颜色 (R, G, B, A)
- 大小 (*)
- 移动速度 (*)
- 旋转角度
- 粒子数目
- radial 加速 (*)
- tangential 加速 (*)
- 旋转速度 (*)
- 旋转半径

其中有(*) 的, 是说数值代表的是属性开始数值的百分比, 比如粒子大小一开始是 10个 像素, 那 0.5 就是5个像素, 2.0 就是20个像素.

附件工程里的粒子效果现在是以人手很痛苦地输入在一个粒子 plist 档里, 看看那位同学有时间弄个粒子编辑器? 


最后看看我们的爆炸效果吧:


 

注意事项: 

- 工程是用了今天(6月21日)
github 上的cocos2d-x最新版本, 这个版本改了很多命名方式, 所以用较旧的cocos2d-x 版本不一定可以编译.
- 关键帧的数目暂时定了为6个, 如有需要, 可以更改 CCParticleEmitter.h 里的 MAX_KEYFRAME.
- 这个粒子系统只是试验性质, 并没有详细测试, 如果有蟲或改善的建议(改善的建议最好是有热心同学改好了分享给大家

),
欢迎跟贴留言.