第10章-瓷砖地图(Tilemap)基础知识

译者：杨栋邮箱：[e-mail]第十章瓷砖地图（Tilemap）基础知识在接下去的两章里，我将介绍基于瓷砖地图的游戏。不管你是不是从经典的角色扮演类游戏(例如Ultima）就已经开始玩游戏了，还是昀近才开始在Facebook上玩Farmville，我敢肯定你已经玩过利用瓷砖地图来显示图形的游戏。在瓷砖地图游戏里，游戏图形由叫做“瓷砖”（tiles）的一小组图片相互排列组成。这些图片被放置在一个网格中，得到的效果就是令人信服的游戏世界。瓷砖地图的概念非常吸引人，因为你可以节省内存而不必使用很多贴图渲染整个世界，同时还可以有很多不同的组合。本章将会使用昀简单的一种瓷砖地图：90度角瓷砖地图（OrthogonalTilemaps），介绍瓷砖地图的一般概念。它们是用正方形或长方形的瓷砖组成的，通常以从上到下的视角展示游戏世界。例如，Ultima系列就已经使用瓷砖地图很长时间了。Ultima1到Ultima5使用了正方形的瓷砖和从上到下的视角；Ultima6和Ultima7转换到“半斜45度角”(semiisometric)视角，但是仍然使用90度角瓷砖地图。Ultima8:Pagan是这一系列中唯一使用“斜45度角”（isometric）瓷砖地图的游戏，所生成的地图创造出了更加令人身临其境的游戏世界。我们将在下一章讨论“斜45度角”瓷砖地图。我将会在本章解释如何移动瓷砖地图，如何将地图定位在某块指定的瓷砖上，还有如何将屏幕保持在瓷砖地图的可视区域。瓷砖地图的移动是通过触摸瓷砖来实现的，这意味着你也会学习如何判断哪块瓷砖已经被触摸了。什么是瓷砖地图（Tilemap）？瓷砖地图是由多个单独的瓷砖组成的2D游戏世界。你可以利用几种拥有相同尺寸的图片创造出很大的游戏地图。这意味着瓷砖地图可以为大地图节省很多内存空间，它们首先出现在早期的电脑游戏中也就不足为奇了。很多经典的角色扮演类游戏使用正方形的瓷砖创造出了不可思议的幻想世界，有些看上去有点像图10-1中展示的瓷砖地图。通常我们使用编辑器来编辑瓷砖地图。cocos2d直接支持的编辑器叫做Tiled(QT)MapEditor。Tiled是一款免费的开源工具，你可以用它编辑90度角瓷砖地图和斜45度角瓷砖地图，支持多个层。Tiled还允许你添加触发区域和物体，也可以为瓷砖添加代码中所需的，用来判断瓷砖类型的属性。注:Qt是指诺基亚的QtFramework，Tiled就是用Qt编写的。因为还有一个Java版本的Tiled，所以用Tiled(Qt)可以和Java版本很清楚地分开。Java版本已经停止更新，不过Java版本中有几个额外的功能是目前Qt版本中所没有的，所以值得一试。不过在本章和接下去的一章中，我将使用Tiled(Qt)来做演示和讨论。图10-1.在Tile(Qt)MapEditor中的90度角瓷砖地图（OrthogonalTilemap）久而久之，人们开始在正方形瓷砖地图中添加“过渡瓷砖”（TrasitionTiles）。例如，我们不再直接在青草瓷砖旁边放置水的瓷砖，而是添加混合瓷砖（在这个例子中就是青草和水的混合瓷砖，青草在一边，水则在另一边，两者之间是一条分隔线），从而在水与草之间生成非常平滑的过渡。如果没有这个功能，你将不得不制作很多瓷砖，然后小心地考虑什么瓷砖可以过渡到其它瓷砖上去。图10-1中的瓷砖地图有许多个很好的过渡瓷砖。沙漠瓷砖集只有4种地板瓷砖：沙漠，碎石（在瓷砖地图的下半部份），砖石（在左上角区域）和泥土（在右上角区域）。对于其中的3种瓷砖（除了沙漠），每一种都有12个瓷砖可被用于过渡到沙漠瓷砖。瓷砖不一定是要正方形的；你也可以用长方形图片生成90度角瓷砖地图。亚洲的角色扮演类游戏通常使用长方形图片，例如DragonQuest4到6。在使用90度角透视的同时，设计师可以使用长方形图片创造出长度比宽度大的物体，由此创造出深度的幻觉。斜45度角瓷砖地图（IsometricTilemaps）则通过将透视旋转45度以得到更加真实的深度感觉。通过制作3D风格的瓷砖，游戏世界获得了更多的视觉深度。虽然所有的瓷砖图片实际上是2D的，但是斜45度角瓷砖地图可以让我们的大脑相信我们是在看3D的地图。斜45度角瓷砖地图的图片是钻石形状的（也就是菱形），同时允许靠近观察者的瓷砖覆盖离开观察者远一些的瓷砖。图10-2展示了一个斜45度角瓷砖地图。图10-2.Tiled(Qt)MapEditor中展示的斜45度角瓷砖地图斜45度角地图证明了瓷砖地图不一定看上去是平的。如果将瓷砖设计成可以无缝地叠加在一起，你甚至可以用正方形的瓷砖地图得到和斜45度角瓷砖地图一样的效果。由于这个原因，Tiled支持使用多层瓷砖以生成令人信服的3D视图，如图10-3所示。多层瓷砖或者瓷砖的叠加也可用于斜45度角地图中，就像很多Farmville迷的视频展示的那样。有几个Farmville玩家只用了游戏中的玉米地就建造出了房子甚至高楼大厦。他们的秘诀是使用了斜45度角瓷砖地图中的视觉错觉。图10-3.可以在多个层中使用的正方形瓷砖地图，用以创造出视觉深度。这种瓷砖地图是从游戏Ultima7开始流行的。在Zwoptex中准备图片在本章的Tilmap01项目中，你会发现项目文件夹中的Resources/individualtileimages文件夹里有几张正方形的瓷砖图片。将这些图片添加到Zwoptex中，然后将Canvassize设置为256x256像素-这个尺寸足够了。点击Apply按钮让Zwoptex自动排布这些图片。图10-4展示了排布的结果： 图10-4.使用Zwoptex生成一张由几个正方形瓷砖图片组成的纹理贴图集你会注意到Zwoptex是随机排布这些图片的。因为在撰写本书的时候，Zwoptex版本10.4还不能够按照瓷砖的名称来排布。如果可以用瓷砖名称排布的话，纹理贴图集的图片布局将会和硬盘上的文件名排布相同。已经有一些Zwoptex的用户请求了这个功能，所以在将来版本中应该会有以图片名称排序的布局方式。看一下是否你的Zwoptex版本支持按名称排序，如果有这个功能，你可以编辑瓷砖的命名，然后用这些图片生成一个以文件名排布的瓷砖集。目前为止，你只能使用这些随机排布的图片。不过，当你在画布上添加或者删除图片，再点击Apply按钮以后，之前的图片排列次序就不能保证了。Zwoptex会再次随机排布图片的位置。不过，如果你是在CCSpriteBatchNode中通过引用图片名称来使用这些图片的话，上述随机排列并不会给你带来任何麻烦。但是，对于TiledMapEditor来说，瓷砖图片保持在相同的位置是很重要的，因为编辑器是通过图片位置和相关的位移来引用各个瓷砖的。这意味着如果贴图集里的瓷砖改变了位置，编辑器中的瓷砖地图将会看上去和之前的完全不一样。因为编辑器还在引用之前的瓷砖位置信息，但是之前可能是草地的地方现在可能已经成了水的瓷砖。为了解决上述问题，你可以使用一些空白的瓷砖图片填充一定尺寸的纹理贴图集。空白图片的数量至少要和需要的瓷砖图片数量相同，或者更多一些。使用空白图片的目的是为你创造可以手动描绘瓷砖的空间。你在Zwoptex中导入所有的空白图片，用于生成一个空白瓷砖平均分布的纹理贴图集。然后你可以关闭Zeoptex，你不再需要它了，因为你可以把得到的纹理贴图集在任何图片编辑器中打开，手动地将需要的瓷砖图片填充到非透明的空白区域。Zwoptex在这里的作用是帮助一开始的瓷砖排布。如果你会画画，你也可以考虑直接在图片编辑软件中制作瓷砖地图。你需要注意的是要把图片的背景设置为透明。这样的话，当瓷砖显示在游戏里的时候，可以避免瓷砖边缘产生明显的毛边。还有，所有的瓷砖都要是相同尺寸的，而且瓷砖之间的空间必须保持一致。对于我来说，我会将空白瓷砖图片导入Zwoptex，让它自动为我排布图片。你只需要做一次就够了。TiledMapEditor（瓷砖地图编辑器）昀出名的用于生成cocos2d中可用的瓷砖地图的编辑器叫做TiledMapEditor（在此我简称它为Tiled）。cocos2d游戏引擎原生支持Tiled生成的TMX文件。Tiled是免费的，在撰写本书时，它的昀新版本是0.5。你可以通过以下网址下载：进一步的开发工作，可以考虑向此软件的开发者ThorbjørnLindeijer捐款。你可以通过以下网址捐款：=161281.生成一个新的瓷砖地图在下载安装完成后，打开Tiled，点击菜单栏的View菜单，然后点击Tilesets和Layers两项。你会看到软件界面的右边会出现两块新的区域，一块在右边上半部份，显示层（Layers），另一块在右边下半部份，显示当前的瓷砖集（Tilesets）。瓷砖集其实就是一张包含多个瓷砖的图片，每个瓷砖之间的间隔相同，你也可以将其理解成一张仅包含相同尺寸图片的纹理贴图集。接着，从菜单栏选择File➤New，你会得到如图10-5所示的新地图生成对话框：图10-5.Tiled中的新瓷砖地图生成对话框目前，Tiled支持90度角瓷砖地图和斜45度角瓷砖地图。地图的尺寸是由瓷砖的数量来决定的，而不是像素。在我们的例子中，新地图的大小是30x20块瓷砖，每块瓷砖的大小是32x32像素。单个瓷砖大小必须与单个瓷砖图片的大小相同，否则会导致瓷砖和图片大小不能完全匹配。新生成的地图是空的，也没有任何瓷砖集加载进来以供使用。你可以通过使用菜单栏的Map➤NewTileset来添加需要的瓷砖集。点击NewTileset以后，你会得到如图10-6所示的NewTileset对话框，你可以在这里选择本地机器上的瓷砖集。我在这里使用的瓷砖集是dg_grounds32.png。这些瓷砖图片是DavidE.Gervais通过“创作共享理念授权同意书”（CreativeCommonLicense）发布的，所以只要你在使用这些图片时说明图片是来自DavidE.Gervais的，你就可以免费分享和重新混合这些图片了。你可以通过以下网址下载更多David的瓷砖集：如图10-6所示，我用对话框中的Browse按钮在Tilemap01项目的Resources文件夹中找到了dg_grounds32.png瓷砖集图片。如果你勾选“Usetransparentcolor”复选框，图片上的透明区域将被替换成粉色（默认颜色）。我没有勾选这个复选框，因为我们使用的图片中没有透明区域。我们使用的瓷砖尺寸是32x32像素，这和瓷砖集图片中的单个瓷砖大小相同。Margin选项用于设置所有瓷砖离开整个大图边缘的距离；而Spacing则用于设置瓷砖之间的间隔距离。因为dg_grounds32.png中的单个瓷砖和我们使用的瓷砖大小相同，所有我将Margin和Spacing都设为0。如果你使用Zwoptex生成瓷砖集图片的话，你必须将Zwoptex中的pixel-padding值填进Margin和Spacing这两个输入框中。默认情况下，Zwoptex使用的padding（填充）值是2个像素。 图10‐6. 从外部加载图片生成新的瓷砖集（tileset）当导入新的瓷砖集图片时，请确保将此图片导入你项目的资源文件夹。之后，当你导出TMX格式的瓷砖地图时，你要把这个TMX文件放到与瓷砖集图片相同的文件夹中。否则cocos2d会因为找不到TMX引用的瓷砖集图片而抛出程序运行异常。TMX文件只能引用同一文件夹下的瓷砖集图片。如果TMX文件和需要用到的瓷砖集图片在不同的文件夹中，当你的应用程序安装到模拟器或者真实设备上后，本来的文件夹结构就会发生变化，导致瓷砖集图片引用失败。技巧：TMX文件实际上就是一个XML文件。如果你觉得好奇的话，你可以打开TMX文件查看。如果你看