如何在Cocos2d-x中整合LiquidFun(一)

本文翻译自《Integrating LiquidFun with Cocos2d-x: Part I》


背景介绍

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


LiquidFun 整合Cocos2d-x 3.0 Demo地址


LiquidFun 官方文档: http://google.github.io/liquidfun/

如何在Cocos2d-x中整合LiquidFun(一)_第1张图片

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个有用的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class  b2ParticleSystem {
   ...
   // 获得粒子的数量
   int32 GetParticleCount()  const ;
   
   // 获得粒子的半径
   float32 GetRadius()  const ;
   
   // 获得每个粒子在Box2D坐标系统中的位置
   // 数组长度可以通过GetParticleCount()获得
   b2Vec2* GetPositionBuffer();
   
   // 获得每个粒子RGBA Uint8格式下的颜色
   b2ParticleColor* GetColorBuffer();
};


理想情况下我们本应该通过重用 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,你可以通过下面的代码来看看它什么样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建一个Box2D下的坐标的数组
// 这些坐标等会会转换成Cocos2d-x中的坐标系统的坐标
void  *positions = _particleSystem->GetPositionBuffer();
glVertexAttribPointer(position_index, 2, GL_FLOAT, GL_FALSE, 0, positions);
glEnableVertexAttribArray(position_index);
   
// 颜色的数组. 它的参数格式: R,G,B,A unsigned bytes
void  *colors= _particleSystem->GetColorBuffer();
glVertexAttribPointer(color_index, 4, GL_UNSIGNED_BYTE, GL_TRUE, 0, colors);
glEnableVertexAttribArray(color_index);
   
// 尺寸大小的数组。particlesize_index指的是一个浮点数的数组(上面提到过的),用户必须创建这个数组
// 这是一个额外的功能,当用户想要使用不一样大小的Points的时候可以用到它
glVertexAttribPointer(particlesize_index, 1, GL_FLOAT, GL_FALSE, 0, particle_size);
glEnableVertexAttribArray(particlesize_index);
   
// 绘制Points
glDrawArrays(GL_POINTS, 0, _particleSystem->GetParticleCount());



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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class  LFParticleSystemNode :  public  cocos2d::Node {
   ...
   // 为缩放转换用的变量
   kmMat4 _ratioTransform;
}
   
bool  LFParticleSystemNode::init(b2ParticleSystem* particleSystem,  float  ratio)
{
   ...
   // 像素转换为米的比例:相当于将Box2d转换为Cocos2d
   kmMat4Scaling(&_ratioTransform, ratio, ratio, 1);
   ...
}
   
void  LFParticleSystemNode::onDraw( const  kmMat4 &modelViewTransform,  bool  transformUpdated)
{
     // 这里需要新建一个新的modelview,它可以让我们在Cocos2d-x坐标系中渲染粒子想·想·
     // newMV = modelViewTransform * _ratioTransform
     kmMat4 newMV;
     kmMat4Multiply(&newMV, &modelViewTransform, &_ratioTransform);
     _shaderProgram->use();
     _shaderProgram->setUniformsForBuiltins(newMV);
    ...
}


通过gl_PointSize来转换大小

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Vertex 着色器
attribute vec4 a_position;
attribute vec4 a_color;
attribute  float  a_size;
   
void  main()
{
     // CC_PMatrix = Projection Matrix
     // CC_MVMatrix = ModelView Matrix
     gl_Position = CC_PMatrix * CC_MVMatrix * a_position;
   
     // 下面正是如何放大所辖Points的方法:
     // 这里的ModelView 模型的X轴缩放为[0][0] Y轴缩放为[1][1]
     //不幸的是我们只能ScaleX或者ScaleY,而不能同时使用它们
     gl_PointSize = CC_MVMatrix[0][0] * a_size;
     v_fragmentColor = a_color;
}


通过gl_PointCoord来生成纹理坐标

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

1
2
3
4
5
6
7
8
9
10
// Fragment 着色器
uniform sampler2D CC_Texture0;
   
varying vec4 v_fragmentColor;
void  main()
{
     // gl_PointCoord 在fragment中应该是已经转换成像素了
     // 它必须使用一张完整的纹理,而不是一张纹理中截取的部分。
     gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, gl_PointCoord);
}


以上!便是所有的过程!


你可以在这里找到完整的LFParticleSystemNode:LFParticleSystemNode


完整的示例demo可以在这里下载:

Cocos2d-x samples: 你可以尝试LiquidFun-EyeCandy和LiquidFun-Tested两个粒子。


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


来源网址:http://www.cocoachina.com/bbs/read.php?tid=199487

你可能感兴趣的:(游戏,cocos2d-x)