cocos2d Tile Map

转自：http://www.comedreams.com/index.php/archives/52750

什么是瓷砖地图（Tile Map）

瓷砖地图-Tile Map 是图形界面程序设计和游戏设计领域中常用的技术！其实，原理就是使用小的瓷砖（Tile）拼接出一张大的地图。

为什么要使用瓷砖地图（Tile Map）

我们知道，我们使用了多个精灵的话，那么当精灵对象，他别多的时候，那么OpenGL ES 需要渲染并且绘制多个精灵对象，就会对程序带来极大的负担。所以，应该有一种好的方式，来进行绘制。也就是Tile Map技术。
这样做，可以大大提高OpenGL ES 的渲染绘图的性能。Cocos2d中也集成了初始化、使用瓷砖的类。

瓷砖地图（Tile Map）的原理

首先，将背景图片，进行一次渲染。
其次，将大的图片，分割成大小相同的小块儿！每小块就是一块一块的小瓷砖。瓷砖坐标记录着该区域的渲染内容。
然后，根据读取TileMap.tmx 中的坐标信息。来得到响应的小瓷砖块（即获得需要的矩形部分）。

打个比方，就像是拼图版！将大的完整的图，分割成多个正方形的小块！那么，TileMap.tmx文件，记录着每一块的坐标等相关信息。当使用时，根据坐标，将需要的块直接取出来直接使用（因为，大的图片已经被OpenGL ES渲染完成。这样，就能大大提高渲染效率！）！

制造瓷砖地图（Tile Map）

“预善其事，必先利其器”！Cocos2d，推荐使用一种专门地图编译工具来构建我们的瓷砖地图（Tile Map）。
这个工具，就是：Tiled！！

下载Tiled工具

下载地址为：http://www.mapeditor.org
下载完成后，就可以尝试着做自己的地图了！

使用工具就略了！So easy！！！

需要一张大的完整的图片：File.png。
这张图片，就是我们将所有的用到的素材放进去。排列好！
当我们使用Tiled工具，绘制好以后，保存，就会得到，一个响应的File.tmx 文件！
File.tmx 文件本质是一个xml文件，类似如下：

view source

print

?

001

002	<</span>map version="1.0" orientation="orthogonal" width="50" height="50" tilewidth="32"tileheight="32">

003	<</span>tileset firstgid="1" name="tmw_desert_spacing" tilewidth="32" tileheight="32" spacing="1"margin="1">

004	<</span>img source="File.png" width="265" height="199">

005	</</span>tileset>

006	<</span>layer name="Background" width="50" height="50">

007	<</span>data encoding="base64" compression="zlib">

008	eJzt1csKwjAQheF4W3hbeFt4q6ggqOD7P16PSCEEC0mJTMB/8ZFhIGTCaUnlnKv+1Fo2Cav1vG3zH+SYsFrPHUqdyzqPnvRlEFnnunduY5nINLJu9t0Ky2MhS1lF1uH+UyF5dPH60rPOIxfrPFLfh3AdyqiAPFLfh3CdybyAPN62spO9+/y3jZi+9bx+fZaLXDv0Le7hn+/Xd3nIs0Pf4h7++W2zxPStv6tf5Go9S65crWcBAAAAAAAAAABAOWpLmSF/

009	</<span class="s2">data>

010	</</span>layer>

011	<</span>objectgroup name="Objects" width="50" height="50">

012	<</span>object name="SpawnPoint" x="435" y="116">

013

014

015

016	<<span class="s2">p>包含了，响应的坐标信息！！！</<span class="s2">p>

017	<<span class="s2">p>好了，到此，准备工作完成，我们绘制好了瓷砖地图！下一步就是让Cocos2d来使用我们的瓷砖地图（Tile Map）。</<span class="s2">p>

018	<<span class="s2">p>在Cocos2d项目中使用 瓷砖地图（Tile Map）</<span class="s2">p>

019	<<span class="s2">p>Cocos2d中为我们准备好了操作瓷砖地图（Tile Map）的相关类！</<span class="s2">p>

020	<<span class="s2">p>CCTMXTiledMap 类</<span class="s2">p>

021	<<span class="s2">p>该类的主要作用是解析和渲染TMX地图。<<span class="s2">br>

022	经过查看，该类集成了CCNode类，并且加入了对瓷砖地图的相关支持！<<span class="s2">br>

023	那么，就好了，既然继承自CCNode类，那么，就可以像操作精灵对象一样操作该瓷砖地图了！</<span class="s2">p>

024	<<span class="s2">p>创建瓷砖地图</<span class="s2">p>

025	<<span class="s2">pre class="brush:html;">// 创建瓷砖地图，根据地图tmx文件

026	self.tileMap = [CCTMXTiledMap tiledMapWithTMXFile:@"TileMap.tmx"];

027	</<span class="s2">pre>

028	<<span class="s2">p>该句，其实就是根据读取TileMap.tmx文件（XML文件），根据XML文件中的内容，读取响应的数据信息。创建好一个瓷砖地图！以备侯用！</<span class="s2">p>

029	<<span class="s2">p>CCTMXTiledMap中包含了一个或者多个层（CCTMXLayer）。</<span class="s2">p>

030	<<span class="s2">p>获得层</<span class="s2">p>

031	<<span class="s2">pre class="brush:html;">// 从瓷砖地图（CCTMXTiledMap）中，获取层（CCTMXLayer）

032	CCTMXLayer *myLayer=[_tileMap layerNamed:@"Background"];

033	</<span class="s2">pre>

034	<<span class="s2">p>其实CCTMXLayer就是地图中的层，CCTMXLayer继承自CCSpriteBatchNode类，每个层，相当于一个精灵表单！OK，好理解了！呵呵！</<span class="s2">p>

035	<<span class="s2">p>获得对象</<span class="s2">p>

036	<<span class="s2">pre class="brush:html;">// 从瓷砖地图（CCTMXTiledMap）中，获取CCTMXObjectGroup 对象

037	CCTMXObjectGroup *objects = [_tileMap objectGroupNamed:@"Objects"];

038	</<span class="s2">pre>

039	<<span class="s2">p>其实，CCTMXObjectGroup就是地图中的对象组，获取层（CCTMXLayer），和获取对象（CCTMXObjectGroup），也就是读取响应的节点信息。</<span class="s2">p>

040	<<span class="s2">p>Cocos2d-瓷砖地图-CCTMXTiledMap-CCTMXLayer-CCTMXObjectGroup</<span class="s2">p>

041	<<span class="s2">p>其实，感觉下来，也没有什么难懂的。最后，就贴贴代码，知道大概如何使用</<span class="s2">p>

042	<<span class="s2">pre class="brush:html;">-(id) init

043

{

044	if( (self=[super init]) ) {

045

046	self.isTouchEnabled = YES;

047	// 创建瓷砖地图，根据地图tmx文件

048	self.tileMap = [CCTMXTiledMap tiledMapWithTMXFile:@"TileMap.tmx"];

049

050	// 根据瓷砖地图，创建层

051	// 从瓷砖地图（CCTMXTiledMap）中，获取层（CCTMXLayer）

052	self.background = [_tileMap layerNamed:@"Background"];

053

054	// 从瓷砖地图（CCTMXTiledMap）中，获取CCTMXObjectGroup 对象

055	CCTMXObjectGroup *objects = [_tileMap objectGroupNamed:@"Objects"];

056	NSMutableDictionary *spawnPoint = [objects objectNamed:@"SpawnPoint"];

057	int x = [[spawnPoint valueForKey:@"x"] intValue];

058	int y = [[spawnPoint valueForKey:@"y"] intValue];

059

060	self.player = [CCSprite spriteWithFile:@"Player.png"];

061	_player.position = ccp(x, y);

062	[self addChild:_player];

063	[self setViewpointCenter:_player.position];

064	[self addChild:_tileMap z:-1];

065

066

}

067	return self;

068

}

069

070	// 让指定点（position）在屏幕的中间：调整视图的中心点

071	-(void)setViewpointCenter:(CGPoint) position {

072

073	CGSize winSize = [[CCDirector sharedDirector] winSize];

074

075	int x = MAX(position.x, winSize.width / 2);

076	int y = MAX(position.y, winSize.height / 2);

077

078	NSLog(@"winSize.width=%f",winSize.width/2);

079	NSLog(@"winSize.height=%f",winSize.height/2);

080

081	NSLog(@"mapSize.width=%f",_tileMap.mapSize.width);

082	NSLog(@"mapSize.height=%f",_tileMap.mapSize.height);

083

084	x = MIN(x, (_tileMap.mapSize.width * _tileMap.tileSize.width)- winSize.width / 2);

085	y = MIN(y, (_tileMap.mapSize.height * _tileMap.tileSize.height)- winSize.height/2);

086

087	CGPoint actualPosition = ccp(x, y);

088

089	CGPoint centerOfView = ccp(winSize.width/2, winSize.height/2);

090	CGPoint viewPoint = ccpSub(centerOfView, actualPosition);

091

092	NSLog(@"viewPoint=x=%f,y=%f",viewPoint.x,viewPoint.y);

093

094	self.position = viewPoint;

095

096

}