Isometric Tile Engine 的遮挡处理

[url]http://www.codingnow.com/isomtric/isotile.htm[/url]

　所谓 Isometric, 应该是指等距视角, 和透视相对, 指视野内的物体, 无论远近都用同一大小来表现. 而Tile 就是指的砖块, 我们平常所见的许多 2D 游戏, 都是 Tile 的. 比如新出的决战朝鲜, 还有去年的皇朝霸业;-), 这两个游戏都是典型的 Tile 游戏, 游戏中的元素被分割为一个个的砖块拼装起来. 不同的是, 前者是矩形的 Tile, 而后者是 Isometric 的. 它的Tile 有高度, 底面为一个菱形. Isometric 的外观更接近真实物体, 我个人比较喜欢这样的图形表现形式. 由于 Isometric 的 Tile 相互覆盖, 所以就有了遮挡问题, (传统的矩形Tile是没有遮挡问题的, 但其扩展也需要处理这个,不过比Isometric的简单), 这也许是Isometric Tile 引擎设计的一个难点, 本文的重点就在于介绍云风的处理方法.

　　先来看看 Isometric 下的地图, 这里由一个个菱形拼起来,每个菱形就是一个 Tile 的底面, 我将每个 Tile 编了号, 是按游戏世界的坐标编的, 组织数据的时候完全可以按照这个形式在内存开一个2D 数组描述地图. 实际上你也可以按照屏幕的横竖方向编坐标, 处理时注意这时奇数行和偶数行Tile的屏幕坐标相差半个 Tile 宽就可以了, 这样处理也很方便, 实际上两种坐标可以用一个很简单的公式换算, 本文不使用这种坐标,在此不提. 如果你不想为遮挡的问题而烦恼, 最简单的处理方法是每次产生一症图象的时候, 按从左上到右下,从右上到左下(就是游戏世界中的从左到右,从后到前)的顺序把每个Tile画一遍就够了. 但是这对于 Isometric 来说是很大的浪费, 因为 Isometric 中每个Tile 都是等大的,遮挡关系一目了然. 一般我们将Tile 的高度单位设置成 Tile 底面矩形的高,方便处理(如左图). 当游戏世界是单层时,这样一个最小单位的Tile, 它可能被比它的 (x,y) 坐标大 1 的 Tile 共 3 块遮挡. 同样, 如果一个精灵占了 4 个 Tile,可能遮挡它的 Tile 为 5 个. 如果物体有两层, 可能遮挡这个 2x2 物体的 Tile 就是10个, 依此类推.

　　现在来看一个例子, 左图中, 有两个(固定)物体, 树是 2x2 的, 它占据了 (2,2) (2,3) (3,2) (3,3) 四个Tile, 石块是 1x1 的, 占据了 (1,3) 这个 Tile. 大象(精灵) 也是 2x2 的,目前它在 (0,1) (0,2) (1,1) (1,2) 这4个 Tile 上. OK, 看看另张(右)图, 更清楚一些. 一般来说, 绘制 Isometric 的场景分 2 步, 先产生固定的场景,再绘制精灵.精灵由于是运动的, 所以通常每帧图都要重画一次(当然也可以不用全部重画, 让每个精灵的运动频率不同, 动画交错, 提高速度, 这个技术比较复杂, 在我的超越 Isometric Tile Engine 中使用的效果不错:-) 这个例子就是要说明图中的大象是怎么画的: 大象占据的是 (0,1) (0,2) (1,1) (1,2) 4 个Tile, 单层地图中可以遮挡它的 5 个 Tile 分别是 (2,1) (2,2) (2,3) (0,3) (1,3), 这 5 个坐标很容易求得, 最简单的方法是将 大象占据的 4 个 Tile 的坐标都加 1,(从 (x,y) 推出 (x+1,y) (x+1,y+1) (x,y+1) ), 把推出的 12 组坐标中重复的删掉. 当然这不是最好的算法, 这儿只是举个例子. 从地图上可以得到, (2,2) (2,3) (1,3) 上放有物体, 其中 (2,2) (2,3) 是 同一棵树的两部分, 所以只算一个. (1,3) 上是一个石块. 下一步, 我们设置一个剪裁矩形将画大象的区域框起来, 再向上面绘制遮挡它的树和石块. 注意,这里剪裁矩形的设置是不能少的, 否则这个遮挡问题处理完了, 又会引出新的遮挡问题 ;-) 具体步骤如下:

－－〉 －－〉
－－〉

　　可以看到, 传统的 Isometric Tile 引擎的优点正在于遮挡处理简洁, 速度快. 所以我个人观点就是, 如果要2D 游戏图形引擎要革新, 就全部采用新的复杂的手段, 使其完全摆脱 Tile, 所有的物体都是任意凸多边形, 精灵行走方向任意, 物体高度任意. 否则就采用传统的 Isometric Tile 型, (到目前的经典 2D 游戏几乎都是很正统的Tile Base 的, 比如 Diablo, Starcraft...) 以获得高的处理速度. 从速度和效果两方面看, 界于中间的处理方法,就不是很可取了.

[img]http://dl.iteye.com/upload/attachment/379147/953bfd8a-ce3b-32e8-9479-121bd5b830b2.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379149/878136f0-ff42-3fcc-8dca-9cd84400e212.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379151/e05b7465-ef63-31a7-b80e-374123716e7d.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379153/5b10bd3e-8060-3983-a265-2b72ef94c642.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379155/1c97cced-6dc8-30a5-9bec-751e3b896222.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379157/20d887ca-c053-3f66-9857-e0a6fe788290.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379159/cfd039be-c588-3f92-8f4f-0810ff00637e.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379161/0cbbec33-e783-3e68-8a1c-a33a2886114c.gif[/img]

[img]http://dl.iteye.com/upload/attachment/379163/de732fd2-5f22-3f46-9f93-5d8761370bbc.gif[/img]