RpgMakerXp地图原理分析

文章约定：

红色代表重要概念

绿色代表提示

注意：文章中使用的代码均为JavaScript标准的伪代码。

要制作一个2D RPG游戏，所需的地图大的种类无非两种：TileMap、PicutreMap。

这一章，我们主要针对于RpgMakerXp所实现的TileMap做分析。

首先我们来看看RpgMakerXp的地图编辑界面。

图块大小为32*32，地图所使用图块数量为20*15个格子。

所显示的图层有3个。

一般来说我们编辑时候显示的内容就是最终显示的内容，但是运行后却发现，并不尽然。

如下情况：

我们先在图层1绘制一个树木然后我们在图层2再使用其他图块遮盖住这个树木

运行一下看看效果：

这是怎么一回事呢？我们不是用其他东西覆盖了吗？为什么还会出现？而且更为奇怪的是，为什么只显示了一半？

这里，我们就有了另一个概念，图块级别。

我们怎么知道图块级别是如何设置的呢？如果您的电脑里有RpgMakerXp的话，首先我们打开一个项目，然后选择菜单中的工具-数据库即可打开内部数据编辑界面。

我们使用的地图为001：草原，如下图所示，我们目前选择的是通行：块(即，图块的全局可通行设置)，手动选择到优先级(即，图块级别)。

这里我们能看到，树木的根部是没有优先级的，然后从下往上分别是L2、L3、L4和L5。下面我们就来看看，这些级别分别是用来干什么的。

假设，我们在图层1中的数据如下(以下数字代表绘制到地图上的图块级别，0为没有优先级):

5 5 5 5

4 4 4 4

3 3 3 3

2 2 2 2

0 0 0 0 

图层2中的数据如下:

0 0 0 0

1 1 1 1

2 2 2 2

3 3 3 3

4 4 4 4

显示结果是如何的呢？按照RpgMakerXP的处理来说，流程会变成这样(相对于每个地图上要显示的格子来说，并非相对于使用的地图元件)：

1.对这个格子的3个图层根据图块级别排序，避免两个图层中图块级别一致导致绘制顺序错误(以下是该实现的伪代码)

data.layouts.sort(function (a, b) {
    if (a.图块级别 > b.图块级别 || (a.图块级别 == b.图块级别 && a.图层 > b.图层)) {
        return 1;
    } else if (a.图块级别 < b.图块级别 || (a.图块级别 == b.图块级别) && a.图层 < b.图层) {
        return -1;
    } else {
        return 0;
    }
});

2.将排序好的数据依次绘制到对应的图块级别画布中(图块级别有5级，因此程序内建的画布应该也有5个)

3.将画布转换成图片进行缓存，以此来提高应用程序性能。

以上流程只会在地图加载的时候执行一次，以后均取得图片缓存直接绘制。

可是，为什么要这么复杂呢？

因为这样才能够实现人物与地图的遮挡关系，地图图块与图块之间的遮挡关系。

人物应该在最底层地图缓存之后绘制。

如此我们来测试一下。

完美！~

但是，还有一个问题我们没有解决。

那就是如何实现可通行判断？

其实这个非常简单，并不像地图绘制那么难。

但是这里还是要说一下的。

由于图层1、图层2与图层3中绘制的内容不一样。

那么就有可能在图层2中有一个不可通行块而图层1和图层3中没有的情况。

这种情况我们只需要这样简单的判断一下即可。

for(var i = 0; i < data.layouts.length; i++){
    if(data.layouts[i].是否可通行 == false) return false;
}
return true;

其余概念请大家自行扩展。

本章至此结束，有问题请留言评论，谢谢！

Demo演示(Html5)