Ricardo Quesada：如何在Cocos2d-x中整合LiquidFun(带有流体物理性质的粒子)

上个月，“Cocos2d之父”Ricardo Quesada在Google+上发表了如何将LiquidFun版本的Box2d的SDK集成到Cocos2d-x中的教程。英文好的童鞋可直接点击以下地址查看：

http://towp8.com/2014/04/23/integrating-liquidfun-with-cocos2d-x-part-i/

背景介绍：

LiquidFun 是谷歌基于原本的Box2D改造的，可以生成带有流体物理性质粒子的一个扩展库。Ricardo 利用这个LiquidFun，将它整合到了Cocos2d-x 3.0 中，做成了2个Demo，使我们可以直接生成带有流体物理性质的粒子。

LiquidFun 整合Cocos2d-x 3.0 Demo github 仓库地址：

https://github.com/cocos2d/cocos2d-x-samples

LiquidFun 官方文档:

http://google.github.io/liquidfun/

LiquidFun Testbed + Cocos2d-x

以下为全文翻译，若有不够准确的地方欢迎大家指出

**********分割线**********

下面这段话摘自LiquidFun的官网地址：

通过基于Box2D的功能，LiquidFun 实现了一个可以模拟流体的粒子特效。游戏开发者可以在他们的游戏中通过使用它来实现游戏中的力学，或者逼真的物理特效。游戏设计者则可以通过这些库来设计出精彩的流体互动的游戏体验。

通过上面这段话可以看出，本质上 LiquidFun 是一个在Box2D之上追加的一个扩展，它通过使用粒子系统来实现模拟流体粒子的效果。你可以通过下载安装安卓上的LiquidFun-Testbed 和 LiquidFun-EyeCandy 来测试它。

Cocos2d-x 已经整合了Box2D, 为了整合LiquidFun, 我们需要先把一个新的类整合进来：b2ParticleSystem

LiquidFun中的 b2ParticleSystem

我并不打算在这里介绍如何使用LiquidFun（你可以通过阅读它的开发向导来学习。）不过，我会讲解如何将 b2ParticleSysytem 整合进Cocos2d-x。（这个方法在别的游戏引擎中也同样适用。）

为了合并整合，我们需要一个能够懂得如何渲染 b2ParticleSysytem的 Cocos2d-x Node。b2ParticleSysytem 提供以下4个有用的方法：

理想情况下我们本应该通过重用 cocos2d::ParticleSystemQuad 来做上面提到的渲染，但是因为以下几个原因这样做是行不通的：

cocos2d::ParticleSystemQuad 不支持改变它的吸引子（这是一个设计上的缺陷，之后我们会修复它。）这种情况下应该用一个空的吸引子。

ParticleSystemQuad 是通过Quads来实现的，而不是Points。尽管Cocos2d-x是支持 Points的（如 Cocos2d-x v1.0，它依旧没有办法正常工作因为Points和colors应该在一个交错的数组中。

另一个问题便是Box2D和Cocos2d-x之前的坐标系转换问题，不过这个问题可以很容易解决

Points vs .Quads

使用Points的主要缺点在于，你没有办法旋转一个Points，这也正是我们在Cocos2d-x上不使用它的原因。

但是Points也有很多优势，它跟Quads比起来只需要更少的内存，这意味着它可以运行的更快。下面举一些使用Point的与Quads不同的情况：

Point 的坐标只需要一个点 （Quads需要4个）

Point 只需要1种颜色（Quads需要4个）

Point 不需要使用 UV 坐标 （Quads需要）

Point 如果你需要使用不同的大小的时候，你可能要传一个浮点型的数组。（Quads不需要）

Point 在做碰撞检测的时候会消耗比Quads更少的资源。

值得注意的是LiquidFun的目的在于模拟流体。因此在流体的情况下，你是不需要去考虑粒子的旋转的, 所以 LiquidFun在这里选择了内存消耗更小的Points

通过GL_POINTS绘图

在OpenGL/OpenGL ES 中可以通过GL_POINTS来绘制Points，不过它有以下几个确定的限制：

它没有办法旋转（就像上面说的那样）

如果你通过gl_PointSize放大或者缩小粒子，你没有办法单独放大或缩小X轴和Y轴的大小，它们只能同时被放大或缩小。

Points也可以使用纹理，但是你没有办法改变他的 U-V坐标，无论你用的是一整张纹理还是什么都不使用。

如果你以前从没使用过GL_POINTS，你可以通过下面的代码来看看它什么样的：

将Box2d坐标转换成Cocos2d-x坐标系

Cocos2d-x v3.0 需要将ModelView模型传递给draw()方法。我们所要做的便是将它转换成Box2D坐标系统中能用的坐标。下面的代码便是我们所需要做的：

通过gl_PointSize来转换大小

我们要做的另一件事便是上面所没有讲到的，如何根据“世界”大小来放大缩小Points。下面的代码将会展示：

通过gl_PointCoord来生成纹理坐标

最后要做的事情，就是给粒子附上纹理，否则我们将没法看到任何东西。上面提到过，你不能直接把UV坐标传递给Points。因此，这里我们将使用一个叫做gl_POINTS的预定义变量。如下：

以上！便是所有的过程！

在第二部分，我会介绍如何将LiquidFun整合到Cocos2d-x在Win32和Visual Studio的环境中。待会我会介绍如何使用更漂亮的"metaball/blob"来渲染模拟水的特效。

完整的LFParticleSystemNode与示例demo等请点击“阅读原文”查看：

http://www.cocoachina.com/bbs/read.php?tid=199487