译者：杨栋
邮箱：yangdongmy@gmail
第十章
瓷砖地图（Tilemap）基础知识
在接下去的两章里，我将介绍基于瓷砖地图的游戏。不管你是不是从经典的角
扮演类游戏(例如Ultima）就已经开始玩游戏了，还是最近才开始在Facebook 上玩Farmville，我敢肯定你已经玩过利用瓷砖地图来显示图形的游戏。
在瓷砖地图游戏里，游戏图形由叫做“瓷砖”（tiles）的一小组图片相互排列组成。这些图片被放置在一个网格中，得到的效果就是令人信服的游戏世界。
瓷砖地图的概念非常吸引人，因为你可以节省内存而不必使用很多贴图渲染整
个世界，同时还可以有很多不同的组合。3tiles
本章将会使用最简单的一种瓷砖地图：90度角瓷砖地图（Orthogonal Tilemaps），介绍瓷砖地图的一般概念。它们是用正方形或长方形的瓷砖组成的，通常以从上到下的视角展示游戏世界。例如，Ultima系列就已经使用瓷砖
地图很长时间了。Ultima 1 到 Ultima 5 使用了正方形的瓷砖和从上到下的视角；Ultima 6和 Ultima 7 转换到“半斜45度角”(semi isometric)视角，但
是仍然使用90度角瓷砖地图。Ultima 8:Pagan是这一系列中唯一使用“斜45度角”（isometric）瓷砖地图的游戏，所生成的地图创造出了更加令人身临其境的游戏世界。我们将在下一章讨论“斜45度角”瓷砖地图。
我将会在本章解释如何移动瓷砖地图，如何将地图定位在某块指定的瓷砖上，
还有如何将屏幕保持在瓷砖地图的可视区域。瓷砖地图的移动是通过触摸瓷砖
来实现的，这意味着你也会学习如何判断哪块瓷砖已经被触摸了。
什么是瓷砖地图（Tilemap）？
瓷砖地图是由多个单独的瓷砖组成的2D游戏世界。你可以利用几种拥有相同尺
寸的图片创造出很大的游戏地图。这意味着瓷砖地图可以为大地图节省很多内
存空间，它们首先出现在早期的电脑游戏中也就不足为奇了。很多经典的角
扮演类游戏使用正方形的瓷砖创造出了不可思议的幻想世界，有些看上去有点
像图10-1中展示的瓷砖地图。
通常我们使用编辑器来编辑瓷砖地图。cocos2d直接支持的编辑器叫做
Tiled(QT) Map Editor。Tiled是一款免费的开源工具，你可以用它编辑90度角瓷砖地图和斜45度角瓷砖地图，支持多个层。Tiled还允许你添加触发区域和物体，也可以为瓷砖添加代码中所需的，用来判断瓷砖类型的属性。
注:Qt是指诺基亚的Qt Framework，Tiled就是用Qt编写的。因为还有一个Java
版本的Tiled，所以用Tiled(Qt)可以和Java版本很清楚地分开。Java版本已经
停止更新，不过Java版本中有几个额外的功能是目前Qt版本中所没有的，所以
值得一试。不过在本章和接下去的一章中，我将使用Tiled(Qt)来做演示和讨论。
图10-1. 在Tile(Qt) Map Editor中的90度角瓷砖地图（Orthogonal Tilemap）
久而久之，人们开始在正方形瓷砖地图中添加“过渡瓷砖”（Trasition Tiles）。例如，我们不再直接在青草瓷砖旁边放置水的瓷砖，而是添加混合瓷砖（在这个例子中就是青草和水的混合瓷砖，青草在一边，水则在另一边，两者之间是一条分隔线），从而在水与草之间生成非常平滑的过渡。如果没有这个功能，你将不得不制作很多瓷砖，然后小心地考虑什么瓷砖可以过渡到其它瓷砖上去。
图10-1中的瓷砖地图有许多个很好的过渡瓷砖。沙漠瓷砖集只有4种地板瓷砖：沙漠，碎石（在瓷砖地图的下半部份），砖石（在左上角区域）和泥土（在右上角区域）。对于其中的3种瓷砖（除了沙漠），每一种都有12个瓷砖可被用于过渡到沙漠瓷砖。
瓷砖不一定是要正方形的；你也可以用长方形图片生成90度角瓷砖地图。亚洲的角扮演类游戏通常使用长方形图片，例如Dragon Quest4到6。在使用90度角透视的同时，设计师可以使用长方形图片创造出长度比宽度大的物体，由此创造出深度的幻觉。
斜45度角瓷砖地图（Isometric Tilemaps）则通过将透视旋转45度以得到更加真实的深度感觉。通过制作3D风格的瓷砖，游戏世界获得了更多的视觉深度。
虽然所有的瓷砖图片实际上是2D的，但是斜45度角瓷砖地图可以让我们的大脑
相信我们是在看3D的地图。斜45度角瓷砖地图的图片是钻石形状的（也就是菱形），同时允许靠近观察者的瓷砖覆盖离开观察者远一些的瓷砖。图10-2展示了一个斜45度角瓷砖地图。
图10-2.Tiled(Qt) Map Editor中展示的斜45度角瓷砖地图
斜45度角地图证明了瓷砖地图不一定看上去是平的。如果将瓷砖设计成可以无缝地叠加在一起，你甚至可以用正方形的瓷砖地图得到和斜45度角瓷砖地图一样的效果。由于这个原因，Tiled支持使用多层瓷砖以生成令人信服的3D视图，如图10-3所示。多层瓷砖或者瓷砖的叠加也可用于斜45度角地图中，就像很多Farmville迷的视频展示的那样。有几个Farmville玩家只用了游戏中的玉米地就建造出了房子甚至高楼大厦。他们的秘诀是使用了斜45度角瓷砖地图中的视觉错觉。
图10-3.可以在多个层中使用的正方形瓷砖地图，用以创造出视觉深度。这种瓷砖地图是从游戏 Ultima 7 开始流行的。
在Zwoptex中准备图片
在本章的Tilmap01项目中，你会发现项目文件夹中的Resources/individual
tile images文件夹里有几张正方形的瓷砖图片。将这些图片添加到Zwoptex中，然后将Canvas size设置为256x256像素-这个尺寸足够了。点击Apply按钮让Zwoptex自动排布这些图片。图10-4展示了排布的结果：