[译]在Tiled Map中使用碰撞检测(二) TMX地图中的碰撞检测

On 2010年06月20日, in iPhone, by 毛叔

在上一篇里，我们已经学会了如何创建一个基于tiled map的简单游戏。学会了如何制作地图，如何将地图载入到游戏，如何让主角在屏幕上移动。
在这篇教程里，我们将学习如何在地图里创建可碰撞（不可穿越）区域，如何使用tile属性，如何使用可碰撞物体和动态修改地图，如何确定你的主角没有产生穿越。

Tiled Maps和碰撞

你可能注意到了，上一篇里完成的游戏，小忍者可以穿过各种障碍。它是忍者，不是上帝！
所以，我们要想办法让地图里的障碍物产生碰撞（不可穿越）。有很多办法可以解决这个问题（包括使用对象层objects layers），但是我准备告诉你种新技术，我认为这种技术更有效，同时也是作为学习课程的好素材。使用meta layer和层属性。

废话少说，我们开始吧。
用Tiled Map Editor打开之前创建的地图，点击Layer菜单的Add Tile Layer取名Meta。我们会在这一层上放置一些假的Tile指示特殊的tile元件。点击Map菜单的New Tileset，选择meta_tile.png图片。将Margin和Spacing设置为1。
你会在Tilesets窗口看到meta_tiles的标签。

这些tiles元件其实没什么特别的，只是带有透明特性的红色和绿色方块。我们拟定红色表示“可碰撞”的（绿色的后面会用到）。
选中Meta层，选择印章(stamp)工具，选择红色tile元件。把它绘制到忍者不能穿越的地方。绘制好之后，看起来应该是这样的：

接下来，我们要给这些Tile元件设置一些标记属性，这样在代码里我们可以确定哪些tile元件是不可穿越的。在Tilesets窗口里右键点击红色tile元件。添加一个新的属性Collidable”，设置值为true。

保存地图，回到xcode。修改HelloWorldScene.h文件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// Inside the HelloWorld class declaration CCTMXLayer *_meta;   // After the class declaration @property (nonatomic, retain) CCTMXLayer *meta; [\cc] 修改HelloWorldScene.m文件 [cc lang="objc"] // Right after the implementation section @synthesize meta = _meta;   // In dealloc self.meta = nil;   // In init, right after loading background self.meta = [_tileMap layerNamed:@"Meta"]; _meta.visible = NO;   // Add new method - (CGPoint)tileCoordForPosition:(CGPoint)position {     int x = position.x / _tileMap.tileSize.width;     int y = ((_tileMap.mapSize.height * _tileMap.tileSize.height) - position.y) / _tileMap.tileSize.height;     return ccp(x, y); }

简单的对上面的代码做一些解释。我们定义了一个CCTMXLayer对象meta作为类成员。注意，我们将这个层设置为不可见，因为它只是用来处理碰撞的。
接下来我们编写了一个tileCoordForPosition方法，用来将x,y坐标转换为地图网格坐标。地图左上角为(0,0)右下角为(49,49)。

上面带有坐标显示的截图来自java版本的编辑器。顺便说一声，我觉得在Qt版本里这个功能可能不再会被移植了。
不管怎么样，用地图网格坐标要比用x,y坐标方便。得到x坐标比较方便，但是y坐标有点麻烦，因为在cocos2d里，是以左下作为原点的。也就是说，y坐标的向量与地图网格坐标是相反的。
接下来，我们要修改一下setPlayerPosition方法。

1 2 3 4 5 6 7 8 9 10 11 12

CGPoint tileCoord = [self tileCoordForPosition:position]; int tileGid = [_meta tileGIDAt:tileCoord]; if (tileGid) {     NSDictionary *properties = [_tileMap propertiesForGID:tileGid];     if (properties) {         NSString *collision = [properties valueForKey:@"Collidable"];         if (collision && [collision compare:@"True"] == NSOrderedSame) {             return;         }     } } _player.position = position;

这里，我们将主角的坐标系从x,y坐标（左下原点）系转换为tile坐标系（左上原点）。接下来，我们使用meta layer里的tileGIDAt函数获取tile坐标系里的GID。
噢？什么是GID? GID应该是“全局唯一标识”（我认为）.但是在这个例子里，把它作为tile层的id更贴切。
我们使用GID来查找tile层的属性，返回值是一个包含属性列表的dictionary。我们检查“Collidable”属性是否设置为ture。如果是，则说明不可以穿越。
很好，编译运行工程，你再也不能走入你在tile里设置为红色的区域了。

动态改变Tiled Maps

现在，你的小忍者可以在地图上漫游了，不过，整个游戏还是略显沉闷。
假设我们的小忍者非常饿，那么我们设置一些食物，让小忍者可以找到并吃掉它们。
为了实现这个想法，我们要创建一个前端层，承载所有用于触碰（吃掉）的物体。这样，我们可以在忍者吃掉它们的同时，方便的从层上删除它。并且背景层不受任何影响。
打开Tiled Map Editor，Layer菜单的Add Tile Layer。命名新层为Foreground。选中这个层，添加一些可触碰的物件。我比较喜欢用西瓜。

接下来，要让西瓜变为可触碰的。这次我们用绿色方块来标记。记得要在meta_tiles里做这件事。

同样的，给绿色方块添加属性“Collectable”设置值为 “True”.
保存地图，回到xcode。修改代码：

1 2 3 4 5 6

//in HelloWorldScene.h: // Inside the HelloWorld class declaration CCTMXLayer *_foreground;   // After the class declaration @property (nonatomic, retain) CCTMXLayer *foreground;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//in HelloWorldScene.m // Right after the implementation section @synthesize foreground = _foreground;   // In dealloc self.foreground = nil;   // In init, right after loading background self.foreground = [_tileMap layerNamed:@"Foreground"];   // Add to setPlayerPosition, right after the if clause with the return in it NSString *collectable = [properties valueForKey:@"Collectable"]; if (collectable && [collectable compare:@"True"] == NSOrderedSame) {     [_meta removeTileAt:tileCoord];     [_foreground removeTileAt:tileCoord]; }

这里有个基本的原则，要同时删除meta layer 和the foreground layer的匹配对象。
编译运行，小忍者可以吃到美味的甜西瓜了。

创建分数计数器
小忍者现有吃有喝很开心，但是，我们想知道到底他吃了多少个西瓜。
通常，我们在layer上看着顺眼的地方加个label来显示数量。但是，我们一直在移动层，这样会给我们带来很多的困扰。
这是一个演示在一个场景里使用多个层的好例子。我们保留HelloWorld层来进行游戏，同时，增加一个HelloWorldHud层用来显示label（Hub = heads up display）。
当然，这两个层需要一些方法来互相通讯。Hub层需要知道小忍者吃到了西瓜。有很多很多方法实现两个层之间的通信，但是我们使用尽量简单的方法来实现。我 们会让HelloWorld层管理一个HelloworldHub层的引用，在忍者迟到西瓜的时候，可以调用一个方法来通知Hub层。
修改代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// HelloWorldScene.h // Before HelloWorld class declaration @interface HelloWorldHud : CCLayer {        CCLabel *label; }   - (void)numCollectedChanged:(int)numCollected; @end   // Inside HelloWorld class declaration int _numCollected; HelloWorldHud *_hud;   // After the class declaration @property (nonatomic, assign) int numCollected; @property (nonatomic, retain) HelloWorldHud *hud;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

// HelloWorldScene.m // At top of file @implementation HelloWorldHud   -(id) init {     if ((self = [super init])) {         CGSize winSize = [[CCDirector sharedDirector] winSize];         label = [CCLabel labelWithString:@"0" dimensions:CGSizeMake(50, 20)             alignment:UITextAlignmentRight fontName:@"Verdana-Bold"              fontSize:18.0];         label.color = ccc3(0,0,0);         int margin = 10;         label.position = ccp(winSize.width - (label.contentSize.width/2)              - margin, label.contentSize.height/2 + margin);         [self addChild:label];     }     return self; }   - (void)numCollectedChanged:(int)numCollected {     [label setString:[NSString stringWithFormat:@"%d", numCollected]]; }   @end   // Right after the HelloWorld implementation section @synthesize numCollected = _numCollected; @synthesize hud = _hud;   // In dealloc self.hud = nil;   // Add to the +(id) scene method, right before the return HelloWorldHud *hud = [HelloWorldHud node];     [scene addChild: hud];   layer.hud = hud;   // Add inside setPlayerPosition, in the case where a tile is collectable self.numCollected++; [_hud numCollectedChanged:_numCollected];

没什么稀奇的，第二个层继承CCLayer，并且在右下角添加了一个label。我们将第二个层添加到场景（Scene）里并且把hub层的引用传递给HelloWorld层。然后修改HelloWorld层调用通知计数改变的方法。
编译运行，应该可以在右下角看到吃瓜计数器了。

音效和音乐
众所周知，没有音效和音乐的游戏，称不上是个完整的游戏。
接下来，我们做一些简单的修改，让我们的游戏带有音效和背景音。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// HelloWorldScene.m // At top of file #import "SimpleAudioEngine.h"   // At top of init for HelloWorld layer [[SimpleAudioEngine sharedEngine] preloadEffect:@"pickup.caf"]; [[SimpleAudioEngine sharedEngine] preloadEffect:@"hit.caf"]; [[SimpleAudioEngine sharedEngine] preloadEffect:@"move.caf"]; [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"TileMap.caf"];   // In case for collidable tile [[SimpleAudioEngine sharedEngine] playEffect:@"hit.caf"];   // In case of collectable tile [[SimpleAudioEngine sharedEngine] playEffect:@"pickup.caf"];   // Right before setting player position [[SimpleAudioEngine sharedEngine] playEffect:@"move.caf"];

接下来做点什么呢？
通过这篇教程，你应该对coco2d有了一些基本的了解。
这里是按照整篇教程完成的工程文件，猛击这里下载
如果你感兴趣，我的好朋友Geek和Dad编写了一篇后续教程：Enemies and Combat: How To Make a Tile-Based Game with Cocos2D Part 3! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。