box2d 碰撞检测_(译)如何使用box2d来做碰撞检测(且仅用来做碰撞检测)

原文链接地址:http://www.raywenderlich.com/606/how-to-use-box2d-for-just-collision-detection-with-cocos2d-iphone

程序截图:

当你使用cocos2d来制作一个游戏的时候,有时,你可能想使用cocos2d的action来移动游戏中的对象,而不是直接使用Box2d物理引擎来做。然而,这并不是说你不能使用box2d提供的强大的碰撞检测功能!

这个教程的目的,就是一步一步地向你展示如何仅使用box2d来做碰撞检测---没有物理效果。我们将创建一个简单的demo,里面有一辆车在屏幕上奔驰,当它撞到一只猫后就会放声大笑。是的,我明白,这样做太残忍了。

在这篇教程中,我们会引入一些新的、有趣的概念,比如使用sprite sheets,利用Zwoptex工具来制作它。还会涉及box2d的debug drawing和VertexHelper这个工具。

这个简单假设你已经阅读过前面的一系列的cocos2d和box2d的教程了(如果没有,最好把前面的教程先看一遍),或者你有相关经验也可以。

还有,在我忘记之前--特别要感谢Kim在评论中建议我写一篇这样的教程。

Sprites and Sprite Sheets

在我们开始之前,需要简单地介绍一下sprites和spritesheets。

目前为止,当我们使用cocos2d的时候,我们都是直接使用CCSprite类,然后传递一个精灵图片给它。但是,根据cocos2d最佳实践,如果使用spritesheet来做的话,那样会极大地提高效率。

上图就是一个spritesheet的样例,这个图在cocos2d的样例代码中可以找到。简言之,spritesheet就是一张大的图片,它能够被裁成许多小的子图片。为了指定spritesheet中的每个子图片的位置,你需要为每个图片指定一个坐标,通常是一个矩形。比如,下面的代码展示了,如何把spritesheet中前四张图片抠出来:

CCSpriteSheet *sheet = [CCSpriteSheet

spriteSheetWithFile:@"grossini_dance_atlas.jpg" capacity:1];

CCSprite *sprite1 = [CCSprite spriteWithTexture:sheet.texture rect:

CGRectMake(85*0, 121*1, 85, 121)];

CCSprite *sprite2 = [CCSprite spriteWithTexture:sheet.texture rect:

CGRectMake(85*1, 121*1, 85, 121)];

CCSprite *sprite3 = [CCSprite spriteWithTexture:sheet.texture rect:

CGRectMake(85*2, 121*1, 85, 121)];

CCSprite *sprite4 = [CCSprite spriteWithTexture:sheet.texture rect:

CGRectMake(85*3, 121*1, 85, 121)];

你可以会说,写一大堆硬编码的坐标太麻烦了,太烦人了!幸运的是,Robert Payne已经写好了一个非常方便地web工具,叫做Zwoptex,它可以创建精灵表单(spritesheet),同时会导出每个子图片的坐标,这样你在cocos2d里面使用这些子图片就会非常方便了。

制作精灵表单

在我们开始之前,你需要一张图片。你可以下载我老婆制作的车和猫的图片,或者使用你自己的。接下来,打开浏览器,加载Zwoptex主页。你将会看到下面的屏幕:

一旦加载完毕后,点击Zwoptex的File菜单,然后点Import Images。选择你刚刚下载的车和猫的图片,然后点click,这时,你的图片应该出现会互相重叠在一起。拖动其中一张,这样会看得更清楚一些。

注意,这些图片已经被自动地把图片周围的空白部分给去掉了。这并不是我们想要的(后面你会知道为什么),因此,用鼠标把这两张图片都框住,然后选择菜单Modify\Untrim Selected Images。

现在,我们的图片看起来非常好了。点击Arrange\Complex by Height(no spacing),然后它们会排列地更加整齐。

最后,让我们把画布(canvas)的大小调整为合适的大小。点击Modify\Canvas Width,并把它设置为128px。同样的,点击Modify\Canvas Height,然后把它设置为64px。你的屏幕最后看起来应该是下面这个样子。

最后,是时候导出sprite sheet和相应的坐标了!点击File\Export Texture,然后保存sprite sheet为“sprites.jpg”。然后点击File\Export Coordinates“并且保存为”sprites.plist“。注意,这里必须把spritesheet和坐标文件的名字取成相同的,因为,spritesheet为假设它的坐标文件为相应名字的plist文件。

接下来,打开sprites.plist。你会看到Zwopte已经自动地帮你把原图中每一个子图片的坐标计算出来了,并且存储成了一个plist文件。我们接下来就可以使用这些坐标,而不用手工去输入它们了!

从Sprite sheet中添加我们的精灵

好,是时候写一些代码了!

打开Xcode并创建一个新的工程,选择 cocos2d-0.99.1 Box2d Application template,取名为Box2DCollision。然后把自带的样例代码全部删除,你可能从弹球的教程中找到具体的做法。

当然,我们要在HelloWorldScene.mm的顶部加入下面一行代码:

#define PTM_RATIO 32.0

如果你不明白我在这里讲的是些什么,你可能需要看看弹球的教程来获取更多的信息。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值