第十一章
45度角瓷砖地图(Isometric Tilemaps)
你可以在45度角瓷砖地图中使用2D图形来表现3D场景,这就是为什么45度角瓷
砖地图非常流行的原因。这种地图允许你用相对简单的图形和工具创造出拥有
空间感的,相对真实的游戏世界。而且渲染2D图形比3D图形对硬件的
要求
对教师党员的评价套管和固井爆破片与爆破装置仓库管理基本要求三甲医院都需要复审吗
要低
的多。图11-1展示了我们将在本章制作的样例游戏。你将会控制一个忍者角色
在游戏世界中潜行,他会避开碰到的墙和山,也会躲藏在某些物体后面,比如
树木和仙人掌。
图11-1. 45度角瓷砖地图
注:本章使用的瓷砖集来自David E. Gervais,通过“创作共用许可”
(Creative Commons License)发布。你可以通过以下网址下载他的大多数作
品:http://pousse.rapiere.free.fr/tome/index.htm
设计制作45度角瓷砖
45度角瓷砖地图的游戏使用的是“三向图投影”(Axonometric Projection),
这种投影可以给你从一个角度观看地图的印象,由此创造出视觉深度。“三向
图投影”是个技术用语,意思是将一个旋转过的3D物体投射到一个2D的平面上,
得到的2D图形虽然变得歪曲了,但是我们的大脑还是认为此图形是3D的。
对于瓷砖地图来说,如果你看一下图11-2,你会看到我们是如何使用90度角图
片生成45度角瓷砖的。首先,正方形图片会被旋转45度角,然后在y轴方向将它
缩小成典型的45度角瓷砖的钻石形状。
图11-2. 将90度角瓷砖旋转45度角,然后沿着y轴方向缩小成最终的45度角瓷砖
不过,图11-2只是在理论上可行。在实际操作中,你不能直接把90度角瓷砖直
接旋转缩小成45度角瓷砖,因为旋转操作会影响图片里的内容。如图11-3所示,
直接旋转缩小所得到的结果看上去还是2D的,而且视觉上完全不对。
图11-3.把90度角瓷砖转换成45度角瓷砖并不是那么容易的。
相反,你要把图11-2中的钻石状瓷砖作为你的画布。最容易设计的45度角瓷砖
是平的地板瓷砖。你只要将上述钻石状瓷砖用一些图案填充就可以了。图11-4
展示了由几块相连的45度角瓷砖排列而成的地板图案。虽然地板瓷砖并不那么
引人注目,但是它们是游戏世界背景层中不可或缺的一部分。
图11-4.45度角地板瓷砖看上去没有深度的感觉。它们在游戏中被用来填充背景地面区域。
要给45度角瓷砖地图添加视觉上的深度,你需要让瓷砖上画的物体超出钻石状
瓷砖的边界。最常用的方法是将物体画成以45度视角观察的3D图形。而且要让
物体超出瓷砖的边界,不过最多超出一块瓷砖的大小。你可以通过图11-5中的
石门来理解上述方法。石门的上半部份超出了石门所在的瓷砖,延升到了上面
一块瓷砖中,由此创造出视觉上的深度。
图11-5.物体的高度超出本身所在的瓷砖,延升进入上面的瓷砖,以此创造视觉深度。
因为瓷砖是从后面开始往前渲染的,所以45度角瓷砖地图允许瓷砖相互叠加,
这意味着离观看者近的物体瓷砖会叠加在离观看者远的瓷砖上,由此产生深度
的感觉。不过这要求你仔细设计单独的瓷砖和瓷砖地图,因为太多的瓷砖叠加
或者叠加了错误的瓷砖会很容易就破坏深度的感觉。
我建议你不要把形状类似的物体瓷砖叠加在一起,不过你应该使用相同的或者
类似的配色
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
。例如,在图11-5中,你不能把水晶瓷砖直接放在石门后面,
因为这两者之间缺乏对比,而且它们的轮廓线条还会重叠,从而破坏深度的感
觉。
同样,瓷砖上的物体高度不应该超出两块瓷砖的高度大小,如果超出就很难创
造出令人置信的3D画面,因为玩家只能在同一时间看到瓷砖地图的一部分。比
如,你画的大城堡的城墙有十几块瓷砖的高度,当主角走向城堡时,城堡的城
墙很容易被认为是地板的一部分。45度角瓷砖不会由于离开屏幕远而变小,所
以你可能会创造出如 M.C.Escher的作品所创造出的那种视觉幻象(你可以在这
里看到M.C.Escher的作品:
http://www.mcescher.com/Shopmain/ShopEU/facsprints-nieuw/prints.html
)。
图11-6展示了名为dg_iso32.png的由David精心制作的45度角瓷砖集。它包含了
多种地板瓷砖,墙壁,树木和房屋类的物体瓷砖,还有各种可被放在任何地板
瓷砖上的装饰性物体。瓷砖集里的瓷砖大小是 54x49 像素。你可以选择不同的
瓷砖高度;取决于你想要的瓷砖叠加程度,你可以选择大于或者小于49像素的
瓷砖高度。瓷砖的钻石形状的实际高度是27像素。当你在 Tiled 软件中创造瓷
砖地图时,知道钻石形状的高度很重要。
图11-6.David Gervais精心制作的45度角瓷砖集
使用Tiled编辑45度角瓷砖地图
我将使用Tiled Map Editor来制作45度角瓷砖地图。基本的地图编辑方法和90
度角瓷砖地图一样,但是我们需要应用几个重要的步骤来正确设置45度角瓷砖
地图和加载45度角瓷砖集。
生成一个新的45度角瓷砖地图
打开Tiled软件,选择File > New菜单会出现如图11-7所示的 New Map 对话框。
显然,Orientation 应该被设置为 Isometric,Map size 的width(宽度)和
height(高度)设为30块瓷砖。比较奇怪的一个设置是Tile size的宽度和高度
设置。之前我提到过dg_iso32.png中的单块瓷砖的大小是 54x49 像素。而钻石
形状的大小(当你将瓷砖放到地图中时,你要考虑这个尺寸)是 54x27 像素。
但是我们在这里设置的却是 52x26 像素。
这里的像素差别是有意为之。因为45度角瓷砖设计的时候考虑到了它们会相互
叠加,所以对于大多数45度角瓷砖集来说,当把它们应用到Tiled软件中的地图
上时,地图上的瓷砖宽度必须比瓷砖集里的钻石形状的实际宽度小2个像素,高
度要小1个像素。
图11-7.在Tiled中生成一个新的45度角瓷砖地图
使用上述瓷砖大小的像素值差别的目的是让瓷砖地图的边界成为一条直线,避
免背景透过瓷砖而显示出来。这是必须的,因为不可能把钻石形状设计成可以
让瓷砖之间的距离都相同,而又不相互叠加。
如果你看到如图11-8所示的缺陷,原因就是你在生成新45度角地图时设置了错
误的瓷砖大小。你可以在Tilemap05项目的资源文件夹中找到这张出错的地图:
isometricnooffset.tmx。
图11‐8. 图中的地图缺陷是因为设置了错误的瓷砖尺寸。
如果你已经设置了错误的瓷砖尺寸,但是又不想丢失花费了好几个小时设计的
地图,或者如果你出于其他的原因需要调整地图尺寸或瓷砖集尺寸,我教你一
个简单的处理方法。以下技巧可以让你轻松试验不同的瓷砖尺寸,直到地图显
示正确。在你的Xcode项目中选者 TMX 文件,你会看到它是个纯文本的XML文件。
在文件的开头,找到地图的设置: