网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

vs-yanguo的博客

导航

 
 
 
 
 

日志

 
 
关于我
vs-yanguo

我就是我,认识了就会知道！

文章分类
 
 

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

2010-12-01 17:00:46|  分类： 默认分类 |  标签： |举报 |字号大中小 订阅

  下载LOFTER 我的照片书  |

在上一篇里，我们已经学会了如何创建一个基于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! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。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! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。

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有了一些基本的了解。
这里是按照整篇教程完成的工

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

默认分类 2010-09-17 16:13:40 阅读33 评论0  字号：大中小 订阅


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! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。程文件，猛击这里下载
如果你感兴趣，我的好朋友Geek和Dad编写了一篇后续教程：Enemies and Combat: How To Make a Tile-Based Game with Cocos2D Part 3! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。

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! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。

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! 。这篇


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! 。这篇教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。教程将告诉你，如何在游戏里添加敌人，武器，胜负场景等。

  评论这张
 
阅读(979)| 评论(0)

历史上的今天

评论

<#--最新日志，群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易公司版权所有 ©1997-2018