Box2d源码学习<一>之Box2d简介

本系列博客是由扭曲45原创,欢迎转载,转载时注明出处,http://blog.csdn.net/cg0206/article/details/8257607

 随着智能手机的大量普及,手机的性能也越来越好,伴随而来出现大量的手机游戏 ,其中不乏很多优秀的游戏,如《愤怒的小鸟》、《鳄鱼小玩皮》、《翼飞冲天》等等。同时它们也大量的模拟了现实生活中的相关东西,比如小鸟飞行、碰撞的模拟,流体的模拟,都用到了相关的物理知识,他们的开发团队是怎么做到的呢,我们不得而知,但我们可以通过box2d引擎来实现相应的效果。下面我们就来了解并学习下box2d。

一、学习资料

  要学习一件事物,首先要知道它是干什么的,有什么作用,以及它的历史,可以通过它的官网http://www.box2d.org获取相应的解答,还可以从http://www.iforce2d.net/b2dtut/introduction网站上面的一系列的教程,以及它的中文版---阿蕉同学的博客【http://blog.csdn.net/wen294299195/article/details/7930907】和http://ohcoder.com/blog/categories/box2d-tutorials/中获取相应的了解,当然你还可以从互联网上搜索相关的知识。

 

二、介绍

box2d是一个2d刚体仿真物理引擎,也是目前使用最为广泛的,具有很强的移植性,同时它简洁、跨平台、开源、免费,甚至在c++,java,c#,javascript等很多语言上都有实现。我们主要说的是用c++实现的版本。

box2d可以模拟现实世界物体的物理属性,给用户一种真实感,存在感。该引擎是有英国人Erincatto编写的,并作为每天工作的一部分去维护和完善它。现在经常用于游戏框架中的物理引擎部分,像iphone上有名的开源框架cocos2d就是用的此物理引擎,以及最近很火的跨平台引擎cocos2d-x也是用的它作为物理引擎。


三、源码结构

Box2D由三个模块组成:公用(Common),碰撞(Collision)以及动力学(Dynamics)。公用模块包括内存分配,数学库,设置。碰撞模块定义了形状,broad-phase算法,碰撞的功能/查询。最后动力学模块提供了模拟物理世界,物体,定制器(fixtures),以及连接器。下面是三者的关系图。



 四、其它

用过cocos2d、或者cocos2d-x的coder应该清楚,其上述两个引擎还提供了另一个物理引擎Chipmunk,下面我们就来比较一下这两者之间的差异:

1、box2d是用c++写的,而Chipmunk用的是c

2、box2d变量和方法使用全称命名,而Chipmunk很多地方使用一个字母的简写

3、box2d使用类【class】,具有很强的封装物体性,而Chipmunk使用结构体【struct】,暴露了过多的细节给外部

4、box2d有针对快速移动直接穿透而不进行碰撞测试的解决方法。而Chipmunk针对object-c有个叫SpaceManager接口,可以很容易的添加精灵到刚体上。

 

好了,不都说了,相信大家对box2d有了一定了解了。下一篇开始我们正式学习源码。

这段 HTML + CSS + JavaScript 代码实现的效果是将一张包含了多个小图片的图片作为背景,然后通过 JavaScript 代码实现将每个小图片的位置进行调整,从而实现一个转盘的效果。 下面是三种用其他方法实现这个效果的方式: 1. 用 CSS3 动画实现转盘效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小精灵转呀转~</title> <style> * { list-style: none; margin: 0; padding: 0; } .box2 { width: 260px; height: 190px; margin: 100px auto; position: relative; } .box2 ul { position: absolute; top: 0; left: 0; animation: rotate 5s linear infinite; } .box2 li { width: 24px; height: 24px; background-color: pink; background: url(qb.png) no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="box2"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> ``` 2. 用 Canvas 实现转盘效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小精灵转呀转~</title> <style> * { list-style: none; margin: 0; padding: 0; } .box2 { width: 260px; height: 190px; margin: 100px auto; position: relative; } .box2 canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box2"> <canvas id="canvas" width="260" height="190"></canvas> </div> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'qb.png'; img.onload = function() { var count = 0; setInterval(function() { count += 44; if (count >= 528) { count = 0; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, count, 24, 24, 118, 82, 24, 24); }, 100); } </script> </body> </html> ``` 3. 用 SVG 实现转盘效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小精灵转呀转~</title> <style> * { list-style: none; margin: 0; padding: 0; } .box2 { width: 260px; height: 190px; margin: 100px auto; position: relative; } .box2 svg { position: absolute; top: 0; left: 0; transform-origin: 50% 50%; animation: rotate 5s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="box2"> <svg viewBox="0 0 24 528" width="24" height="528"> <use xlink:href="#icon"></use> </svg> <svg style="display: none;"> <symbol id="icon"> <image href="qb.png" width="24" height="528"></image> </symbol> </svg> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值