by AlexQ （email alexq_andr@163.com）
工程托管在此：GitHub
工程托管在此：GitHub
前情提要
之前写的那篇Android FrameWork 基于libGDX实现高性能动画特效（烟花／粒子特效篇）最后提到了Box2D，很久之前我写过一个基于jbox2d库开发的一个碰撞特效，由于jbox2d性能所限制，同时出现20颗左右的物体碰撞时，就会出现卡顿掉帧的现象，便萌生了想用libGDX中提供的Box2D来实现一个更高效的版本，很高兴很快就完成了，我们今天就来继续分享一下这部分内容。（基于jbox2d版本demo工程地址）**
Gif较大，可能需要较长时间加载，或者直接查看视频效果
导语
libGDX是一个小有名气的跨平台游戏开发引擎,Box2D则是大名鼎鼎模拟刚体运动特性的库，文章中我们会介绍如下几点：
- 关于libGDX以及如何引入到App；
- 学习Box2D
- App FrameWork层使用libGDX－Box2D实现特效的那些细节；
- 推荐
回顾：libGDX入门学习以及如何引入到App
阅读此篇文章之前可能您需要对以下两个知识点做一些了解和铺垫，
libGDX入门学习内容，请参考我的文章libGDX 入门精要
如何才能完美引入到App中的详细分析，请参考我的另外一篇文章Android FrameWork 基于libGDX实现高性能动画特效。
学习Box2D
为了不分散我们这篇文章的主旨，关于Box2D入门学习内容，我特意编写在这篇文章中请移步到这里查看Box2D 入门简要
当您初步掌握了Box2D中基本概念后会很容易的掌握下面的内容。
App FrameWork层使用libGDX－Box2D实现特效的那些细节
- 工程组织结构
- 性能表现卓越
- 利用libGDX中提供的Box2D实现特效
- 添加重力感应逻辑
1.工程组织结构三个部分
-
libs中再增加libgdx提供的gdx-box2d.so以及gdx-box2d.jar包
资源文件增加碰撞物体显示图片
- 核心代码文件，用来在app中使用libgdx－box2d实现带有重力感应的碰撞效果
2.性能卓越
以下的对比很好的说明了左侧基于jbox2d的实现与右侧基于libgdx－box2d实现的两个版本之间的巨大性能差异。
运算方面一个是在java层进行的，另外一个则是在底层C上进行的，绘制方面则一个是用android通常的ondraw绘制，另一个用opengles绘制的。
如果对比还不够明显的话，你可以尝试将星星的上线调整到100左右，在你的真机上运行一下试试效果。基于jbox2d版本demo工程地址
3.利用libGDX中提供的Box2D实现特效
- 注意坐标系
首先有个重要的问题要说明，Box2D的坐标系原点是在你创建的Fragment的中心点，而libGDX的绘制坐标系是Fragment的左下，如果你发现你的debug视图是好的，而一旦按照Box2D返回的坐标贴图，造成显示位置偏差那就是没有注意坐标系关系造成的
工程中Tools目录下的Transform，就是为了转换坐标系用的，提供双向的转换：
libGDX －> Box2D 以及 Box2D －> libGDX
使用方法就是贴图绘制前，将你从box2d中拿到的坐标做一次转化之后再使用。
```
Vector2 transformVect = Transform.mtp(box2d.x, box2d.y, new Vector2(w, h), PXTM);
```
-
“盖房子”，添加左、右、底三面墙
建立用来限制小星星碰撞范围的围墙，三面围墙原理相同，只是位置不同罢了，可以通过打开“Open DebugDraw”，看到绿色的细线就是围墙，这里我们用staticBody这种刚体类型来表现他最合适不过。我们列举地面的代码：private void addground(){ BodyDef groundBodyDef =new BodyDef(); groundBodyDef.position.set(new Vector2(0, -camera.viewportHeight/2)); Body groundBody = world.createBody(groundBodyDef); PolygonShape groundBox = new PolygonShape(); groundBox.setAsBox(camera.viewportWidth, 1.0f / PXTM); groundBody.createFixture(groundBox, 0.5f); groundBox.dispose(); }这里面有2个点值得注意：
首先是设置位置的时候，我们将地面的Y坐标设置为-camera.viewportHeight/2，是因为，我们之前提到了，Box2D的坐标系是中心点，所以，Y向下为负值，总高度的一半向下，自然就是最下面的边缘了。
其次注意到PXTM这个常量了嘛，它的作用是单位换算，什么单位呢，Box2D用的距离单位都是米(m)，而我们屏幕的单位是像素，这两者有个转化比例就是PXTM = 30（1米等于30像素）;这个是除去坐标系转化之外，影响绘制位置的重要因素，请切记。
-
render方法中的三件事情
预览代码:
@Override public void render() { Gdx.gl.glClearColor(0, 0, 0, 0); Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); synchronized (Box2dEffectView.class) { if (m_ballBodys.size() == 0) return; float deltatm = Gdx.app.getGraphics().getDeltaTime(); world.step(deltatm, 6, 2); _ballUpdatasLogic(deltatm); if (m_isDebugRenderer) m_debugRenderer.render(world, camera.combined); } }private void _ballUpdatasLogic(float deltatm){ for (int i=0; i<m_ballBodys.size(); i++){ Body bd = m_ballBodys.get(i); BallInfo ballInfo = (BallInfo)bd.getUserData(); float alphascale = 1f; float curruntm = ballInfo.getRuntimes(); if (curruntm >= Box2dConstant.MaxBallLiferSP){ alphascale = hidesmallBody(i); } //判断是否已经到了生命尽头 if (curruntm >= Box2dConstant.MaxBallLifer){ destoryBody(i); i--; continue; } //更新时间 ballInfo.setRuntimes(curruntm + deltatm); Vector2 transformVect = Transform.mtp(bd.getPosition().x + 1f, bd.getPosition().y + 1f, new Vector2(2f, 2f), PXTM); //绘制 m_spriteBatch.begin(); m_spriteBatch.setColor(new Color(1,1,1,alphascale)); m_spriteBatch.draw(TESTTEXTURE, transformVect.x+(1f-alphascale)*30, transformVect.y+(1f-alphascale)*30, alphascale*60f, alphascale*60f); m_spriteBatch.end(); } }
* 模拟碰撞
调用 world.step(deltatm, 6, 2);启动Box2D模拟运算。
在_ballUpdatasLogic函数里面遍历所有小星星的循环
* 控制物体生命周期
响应业务逻辑，判断如果小星星展示时间超过一个我们定义阀值，启动摧毁这颗小星星代码逻辑；
* 绘制
像我们在前一篇粒子特效中和libGDX入门中介绍的一样，最终我们要将Box2D模拟的数据结果绘制出来，通过调用m_spriteBatch.draw方法，将小星星的图片按照Box2D运算结果绘制到屏幕上。其中我们为了更好的视觉效果，在小星星的消失过程中设置了缩小以及渐隐，通过设置透明度以及调整贴图来达到，并不需要改变Box2D运算过程。
4.添加重力感应逻辑
如果您仔细观察最开始那个事例gif图片的话，在左上角有一个实时在动的像是水平仪的东西（带有指针的小圆圈），对，他就是个水平仪。我们为整个碰撞特效添加了重力感应的效果，当你左右晃动手机时，会发现小星星也跟着左右摆动起来，很有意思很互动，水平仪表现了手机摆动的情况。
首先为了能够直观的演示重力感应，我在工程的testcode目录里面实现了一个levelgaugeView，也就是你看到的这个小东西，帮助你看到自己的陀螺仪水平方向上的变化，这个demo表现了，我们将手机先是水平的，之后向右倾斜，在之后向左倾斜，最后恢复水平状态。
public Box2dSenserLogic(final World world, Context context) {
m_world = world;
//获得重力感应硬件控制器
sm = (SensorManager) context.getSystemService(Context.SENSOR_SERVICE);
sensor = sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
//添加重力感应侦听，并实现其方法，
sel = new SensorEventListener() {
public void onSensorChanged(SensorEvent se) {
float x = se.values[SensorManager.DATA_X];
float y = se.values[SensorManager.DATA_Y];
float xSenser, ySenser;
if (m_isPortrait) {
xSenser = -5.0f * x;
ySenser = (y >= -1) ? -30 : -y * 5.0f;
if (y<-1){
xSenser = -1 * xSenser;
ySenser = -1 * ySenser;
}
}
else{
xSenser = 5.0f * y;
ySenser = (x >= -1) ? -30 : -x * 5.0f;
if (x<-1) {
xSenser = -1 * xSenser;
ySenser = -1 * ySenser;
}
}
Vector2 vec2 = m_isPortrait ? new Vector2(xSenser, ySenser) : new Vector2(xSenser, ySenser);
if (world != null)
world.setGravity(vec2);
}
public void onAccuracyChanged(Sensor arg0, int arg1) {
}
};
}
我们考虑了如果你开启屏幕方向变化的因素，横竖屏幕我们分开处理。其中能够达到效果的核心代码就是：“world.setGravity(vec2);”，根据陀螺仪传递的数据，我们设置好相应的新的重力方向，就能够达到们看到的效果了。别忘了退出时，关闭重力感应接收哦。
以上便是用libgdx－Box2d实现碰撞特效的全部内容，如果您之前了解了libGDX入门内容＋libGDX如何引入到app中＋Box2D入门知识，掌握起来还是很简单的
推荐
1.推荐书目
作者: 陈文登
出版社: 科学出版社
出版年: 2015-3-16
页数: 328
定价: 78
装帧: 平装
ISBN: 9787030434340
